提交audio

App.vue

@@ -1,12 +1,80 @@
-<template>
-	<view>
-	</view>
-</template>
 <script>
+	import Vue from 'vue';
 	//app.js
 	var config = require("./config");
 	export default {
-		onLaunch: function(options) {
+		onLaunch(options) {
+
+			uni.getSystemInfo({
+				success: function(e) {
+					console.log(e, 'adjsakljdklasjdklsakjdslakjd')
+					// #ifdef MP-WEIXIN
+					Vue.prototype.StatusBar = e.statusBarHeight;
+					let custom = wx.getMenuButtonBoundingClientRect();
+					Vue.prototype.Custom = custom;
+					Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
+					Vue.prototype.windowHeight = e.safeArea.height
+					// #endif
+					Vue.mixin({
+						data() {
+							return {
+								StatusBar: Vue.prototype.StatusBar,
+								CustomBar: Vue.prototype.CustomBar,
+								windowHeight: Vue.prototype.windowHeight
+							};
+						},
+
+						methods: {
+							// 目前使用页面为录音页面
+							SPEAKERSTYLE(index) {
+								let obj = {
+									color: '',
+								}
+								switch (index) {
+									case 1:
+										obj.color = '#60CBEC';
+										break;
+									case 2:
+										obj.color = '#EC8B47';
+										break;
+									case 3:
+										obj.color = '#4F861E';
+										break;
+									case 5:
+										obj.color = '#4980C8';
+										break;
+									case 6:
+										obj.color = '#60CBEC';
+										break;
+									case 7:
+										obj.color = '#EC8B47';
+										break;
+									case 8:
+										obj.color = '#4F861E';
+										break;
+									default:
+										obj.color = '#9F61C8';
+										break;
+								}
+								return obj
+							},
+						},
+
+						filters: {
+							// ASCII码转换 大写字母A是65 演讲人是从1开始所以num+64
+							toCapital(num) {
+								let str = ''
+								if (num) {
+									str = String.fromCharCode(num + 64)
+								}
+								return str
+							}
+						}
+					});
+				}
+			});
+
+
 			if (wx.canIUse('getUpdateManager')) {
 				const updateManager = wx.getUpdateManager()
 				updateManager.onCheckForUpdate(function(res) {
@@ -49,70 +117,72 @@
 			this.$u.get("/user/getMenu").then(data => {
 				uni.setStorageSync("weapp_session_Menu_data", data)
 			})
-			
-			
+
+
 			wx.setInnerAudioOption({
 				obeyMuteSwitch: false
-			});	
+			});
 		},
 		onShow(options) {
 			const token = uni.getStorageSync("weapp_session_login_data")
 			if (typeof token.token != "string") {
 				console.log("没有")
 				return
-			}else{
+			} else {
 				this.infoscoket()
 			}
 		},
 		onHide() {},
 		methods: {
-			infoscoket(){
-				let pushon=uni.getStorageSync('weapp_session_userInfo_data').loginName
+			infoscoket() {
+				let pushon = uni.getStorageSync('weapp_session_userInfo_data').loginName
 				uni.connectSocket({
-				  url: 'wss://hfju.com/ws?uid='+pushon+'_applets',
-				  header: {
-					  "content-type": "application/json",
-					  'Access-Token': uni.getStorageSync('weapp_session_login_data').token
-				  }
+					url: 'wss://hfju.com/ws?uid=' + pushon + '_applets',
+				 header: {
+					 "content-type": "application/json",
+						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
+					}
 				});
-				uni.onSocketOpen(function (res) {
-				  console.log('WebSocket连接已打开！');
+				uni.onSocketOpen(function(res) {
+					console.log('WebSocket连接已打开！');
 				});
-				uni.onSocketError(function (res) {
-				  console.log('WebSocket连接打开失败，请检查！');
+				uni.onSocketError(function(res) {
+					console.log('WebSocket连接打开失败，请检查！');
 				});
-				uni.onSocketMessage(function (res) {
-					  console.log('收到服务器内容：' + res.data);
-					  let cedata=JSON.stringify(res);
-					  let data=JSON.parse(cedata);
-					  let zdata=JSON.parse(data.data) 
-					  if(zdata.to=="recCmd"){
-						   uni.$emit('update',{msg:'页面更新'})
-						  return
-					  }
-					  uni.showModal({
-					      title: '提示',
-					      content: zdata.to+'的设备电量过低请检查！',
-						  cancelText: "取消", // 取消按钮的文字  
-						  confirmText: "查看", // 确认按钮文字  
-					      success: function (res) {
-					          if (res.confirm) {
-					              console.log('用户点击确定');
-								  uni.navigateTo({
-								  	url: `/pages/main/toviewtherecording/index?jump=`+"jump"
-								  })
-								  
-					          } else if (res.cancel) {
-					              console.log('用户点击取消');
-					          }
-					      }
-					  });
+				uni.onSocketMessage(function(res) {
+					console.log('收到服务器内容：' + res.data);
+					let cedata = JSON.stringify(res);
+					let data = JSON.parse(cedata);
+					let zdata = JSON.parse(data.data)
+					if (zdata.to == "recCmd") {
+						uni.$emit('update', {
+							msg: '页面更新'
+						})
+						return
+					}
+					uni.showModal({
+						title: '提示',
+						content: zdata.to + '的设备电量过低请检查！',
+						cancelText: "取消", // 取消按钮的文字  
+						confirmText: "查看", // 确认按钮文字  
+						success: function(res) {
+							if (res.confirm) {
+								console.log('用户点击确定');
+								uni.navigateTo({
+									url: `/pages/main/toviewtherecording/index?jump=` + "jump"
+								})
+
+							} else if (res.cancel) {
+								console.log('用户点击取消');
+							}
+						}
+					});
 				});
 			},
-			Closewebsocke(){
+			Closewebsocke() {
 				uni.closeSocket();
-				uni.onSocketClose(function (res) {
-				  console.log('WebSocket 已关闭！');
+				uni.onSocketClose(function(res) {
+					console.log('WebSocket 已关闭！');
 				});
 			},
 		}
@@ -124,17 +194,20 @@
 </style>
 <style lang="scss">
 	@import "uview-ui/index.scss";
+
 	/*每个页面公共css */
 	//图表样式等
-	.single{
+	.single {
 		width: 100%;
 		background: #FFFFFF;
-		.title{
+
+		.title {
 			width: 100%;
 			height: 90rpx;
 			border-bottom: 1rpx solid #E0E0E0;
 			display: flex;
-			.title1{
+
+			.title1 {
 				flex: 2;
 				font-size: 30rpx;
 				font-weight: 600;
@@ -142,28 +215,33 @@
 				line-height: 90rpx;
 				text-indent: 30rpx;
 			}
-			.title3{
+
+			.title3 {
 				flex: 3;
 				height: 90rpx;
 				display: flex;
 				align-items: center;
 				justify-content: flex-end;
-				.title3-box{
+
+				.title3-box {
 					display: flex;
 					align-items: center;
 					width: 25%;
 					justify-content: center;
-					.activecltab{
+
+					.activecltab {
 						border-bottom: 2px solid #2671E2;
 					}
 				}
 			}
-			.title2{
+
+			.title2 {
 				flex: 3;
 				height: 90rpx;
 				display: flex;
 				align-items: center;
-				.title2-che{
+
+				.title2-che {
 					width: 178rpx;
 					height: 48rpx;
 					background: #FFFFFF;
@@ -176,7 +254,8 @@
 					text-indent: 12rpx;
 					margin-left: 35rpx;
 					position: relative;
-					.righttochoose{
+
+					.righttochoose {
 						width: 18rpx;
 						height: 24rpx;
 						position: absolute;
@@ -186,15 +265,18 @@
 				}
 			}
 		}
-		.swiper-box{
+
+		.swiper-box {
 			width: 97%;
 			margin: 0 auto;
 		}
-		.hejibox{
+
+		.hejibox {
 			width: 100%;
 			height: 80rpx;
 			display: flex;
-			.heji{
+
+			.heji {
 				width: 50%;
 				height: 100%;
 				font-size: 28rpx;
@@ -204,7 +286,8 @@
 				text-indent: 30rpx;
 			}
 		}
-		.danwei{
+
+		.danwei {
 			width: 100%;
 			height: 40rpx;
 			font-size: 24rpx;
@@ -213,31 +296,37 @@
 			line-height: 40rpx;
 			text-indent: 30rpx;
 		}
-		.uchaserbox{
+
+		.uchaserbox {
 			width: 95%;
 			height: 470rpx;
 		}
-		.jindu{
+
+		.jindu {
 			width: 100%;
 			height: 300rpx;
-			.jindu-box{
-				width: 100%; 
+
+			.jindu-box {
+				width: 100%;
 				padding-left: 30rpx;
 				padding-right: 30rpx;
-				.jindu-boxche{
+
+				.jindu-boxche {
 					width: 100%;
 					height: 46rpx;
 					display: flex;
 					align-items: center;
 					height: 50rpx;
-					.jindu-name{
+
+					.jindu-name {
 						width: 120rpx;
-						font-size: 28rpx; 
+						font-size: 28rpx;
 						color: #666666;
 					}
-					.jindu-zxl{
+
+					.jindu-zxl {
 						width: 120rpx;
-						font-size: 26rpx; 
+						font-size: 26rpx;
 						margin-left: 16rpx;
 						color: #666666;
 						text-align: center;
@@ -246,6 +335,7 @@
 			}
 		}
 	}
+
 	//时间切换的样式
 	.boxtittab {
 		width: 100;
@@ -254,7 +344,7 @@
 		border: 1px solid #E0E0E0;
 		display: flex;
 		align-items: center;
-	
+
 		.tabbox {
 			flex: 1;
 			height: 100%;
@@ -264,40 +354,46 @@
 			font-size: 28rpx;
 			display: flex;
 			justify-content: center;
-	
+
 			.activecllasscet {
 				width: 96rpx;
 				border-bottom: 2px solid #2671E2;
 			}
 		}
 	}
+
 	//多个格子的样式
 	.boxzonglan {
 		width: 100%;
 		min-height: 496rpx;
 		background: #FFFFFF;
 		padding: 30rpx 30rpx 30rpx 30rpx;
+
 		.zonglantit {
 			font-size: 30rpx;
 			color: #333333;
 			font-family: PingFangSC-Semibold, PingFang SC;
 			font-weight: 600;
 		}
+
 		.zonglanbox {
 			width: 100%;
 			display: flex;
 			flex-wrap: wrap;
 			margin-top: 24rpx;
+
 			.grid {
 				width: 50%;
 				height: 128rpx;
 				border: 1px solid #E0E0E0;
+
 				.audonum {
 					color: #666666;
 					text-indent: 40rpx;
 					font-size: 26rpx;
 					margin-top: 20rpx;
 				}
+
 				.num {
 					color: #333333;
 					text-indent: 40rpx;

components/yz-audio/audioBg.js

@@ -0,0 +1,87 @@
+import {
+	mapState,
+	mapActions,
+	mapMutations
+} from 'vuex'
+export const audios = {
+	data() {
+		return {
+			isBgPlay: false, // 是否禁止拖拽进度条
+		}
+	},
+
+	computed: {
+		...mapState(['bgAudioMannager']),
+	},
+
+	methods: {
+		setAudio(obj) {
+			this.bgAudioMannager.title = '录音音频';
+			this.bgAudioMannager.src = obj.src
+			this.bgAudioMannager.startTime = obj.currentTime
+		},
+
+		setAudioFunc() {
+			this.bgAudioMannager.onCanplay(() => {
+				console.log('可以播放');
+			});
+			this.bgAudioMannager.onStop(() => {
+				console.log('停止播放');
+				this.isBgPlay = false
+			});
+
+			this.bgAudioMannager.onPause(() => {
+				console.log('暂停播放');
+				this.isBgPlay = false
+				// 设置当前暂停的视频播放位置
+				// this.seek(this.bgAudioMannager.currentTime)
+				// this.play()
+			});
+			
+			this.bgAudioMannager.onEnded(() => {
+				console.log('自然播放结束事件');
+				this.isBgPlay = false
+			});
+			
+			this.bgAudioMannager.onError((res) => {
+				console.log(res.errMsg);
+				console.log(res.errCode);
+			});
+
+			this.bgAudioMannager.onTimeUpdate(() => {
+				this.isBgPlay = true
+				this.duration = this.bgAudioMannager.duration;
+				this.currentTime = this.bgAudioMannager.currentTime;
+				this.$emit('timeUpdate', {
+					duration: this.bgAudioMannager.duration,
+					currentTime: this.bgAudioMannager.currentTime
+				})
+			});
+		},
+		
+		// 背景音频暂停
+		audioPause() {
+			this.bgAudioMannager.pause()
+		},
+		
+		// 背景音频播放
+		audioPlay() {
+			this.pause()
+			this.bgAudioMannager.play()
+		},
+		
+		//背景音频指定秒数播放
+		audioSeek(t) {
+			this.bgAudioMannager.seek(t)
+		},
+		
+		// 停止背景音频播放
+		stopAduio() {
+			console.log(this.bgAudioMannager)
+			this.bgAudioMannager.pause()
+			if (this.bgAudioMannager && this.bgAudioMannager.src) {
+				this.bgAudioMannager.src = ''
+			}
+		}
+	}
+}

components/yz-audio/index.scss

@@ -0,0 +1,119 @@
+@mixin textoverflow() {
+	display: -webkit-box;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 1;
+}
+@keyframes rowup {
+	0% {
+		-webkit-transform: translate(-50%, -50%) rotate(0deg);
+		transform-origin: center center;
+	}
+
+	100% {
+		-webkit-transform: translate(-50%, -50%) rotate(360deg);
+		transform-origin: center center;
+	}
+}
+.imt-audio{
+	position:relative;
+	width: 100%;
+	display: flex;
+	box-sizing: border-box;
+	background: #fff;
+	overflow: hidden;
+	
+	.top {
+		width: 140rpx;
+		position: relative;
+	}
+
+	.audio-wrapper {
+		display: flex;
+		flex-direction: column; 
+		flex: 1;
+		color: #fff;
+		margin-left: 20rpx;
+	}
+	.slidebox {
+		display: flex;
+		justify-content: space-between;
+		width: 96%;
+	}
+	/deep/ .uni-slider-tap-area {
+		padding: 0;
+	}
+	/deep/ .uni-slider-wrapper {
+		min-height: 0;
+	}
+	/deep/ .uni-slider-handle-wrapper {
+		height: 6px;
+	}
+	.audio-slider {
+		padding-top: 10rpx;
+		margin-left: 150rpx;
+		position: absolute;
+		bottom: 40rpx;		
+		width: 75vw;
+		left: 0;
+		padding: 0;
+	}
+	
+
+	// .cover {
+	// 	width: 120rpx;
+	// 	height: 120rpx;
+	// 	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+	// 	position: absolute;
+	// 	top: 50%;
+	// 	left: 50%;
+	// 	transform: translate(-50%, -50%);
+	// 	animation-fill-mode: forwards;
+	// 	-webkit-animation-fill-mode: forwards;
+	// }
+
+	.play {
+		width: 48rpx;
+		height: 48rpx;
+		z-index: 99;
+		background: rgba(0, 0, 0, 0.4);
+		border-radius: 50%;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		&.loading{
+			width: 48rpx;
+			height: 48rpx;
+			animation: rotating_theme3 2s linear infinite;
+		}
+	}
+}
+
+@keyframes rotating {
+	0% {
+		  transform: rotateZ(0deg)
+	}
+	100% {
+		  transform: rotateZ(360deg)
+	}
+}
+@keyframes rotating_theme3 {
+	0% {
+		  transform: translate(-50%, -50%) rotateZ(0deg)
+	}
+	100% {
+		  transform: translate(-50%, -50%) rotateZ(360deg)
+	}
+}
+
+.hItem
+{
+	margin-left: 16rpx;
+}
+
+.extrButton
+{
+	font-size: 36rpx;
+}

components/yz-audio/yz-audio.vue

@@ -0,0 +1,432 @@
+<template>
+	<view class="imt-audio">
+		<template>
+			<view class="top">
+				<view class="audio-control-wrapper">
+					<image :src="require('./static/loading.png')" v-if="playState=='loading'" class="play loading">
+					</image>
+					<template v-else>
+						<image :src="require('./static/playbtn.png')" alt="play" @click="play" class="play"
+							v-if="playState=='pause'"></image>
+						<image :src="require('./static/pausebtn.png')" alt="pause" @click="pause" class="play" v-else>
+						</image>
+					</template>
+				</view>
+			</view>
+			<view class="audio-wrapper">
+				<view class="audio-flex">
+					<text>
+						{{formatSeconds(currentTime)}}
+					</text>
+					<slider class="audio-slider" block-size="12" :max="duration" :value="currentTime"
+						@change="sliderChange" @changing="sliderChanging"></slider>
+					<text>
+						{{formatSeconds(duration)}}
+					</text>
+				</view>
+
+				<view class="slidebox" @click="showTip">
+					<slot name="extraCtrls">
+						<image class="slide-img" :src="require('./static/backimg.png')" mode=""></image>
+					</slot>
+				</view>
+				<!-- 后台播放按钮区域 -->
+				<view class="popup" v-if="show" :class="{close: closeing}" @click="checkPlayer">
+					<template v-if="!isBgPlay">
+						<image :src="require('./static/bg.png')" mode=""></image>
+					</template>
+					<template v-else>
+						<image :src="require('./static/bg_act.png')" mode=""></image>
+					</template>
+					<text :class="{'act-test': isBgPlay}">后台播放</text>
+				</view>
+			</view>
+			<!--video在ios中不能完全隐藏，否则无法播放-->
+			<video id="videoPlayer" :autoplay="true" class="videoPlayer" :src="src" :muted="false"
+				style="width: 10rpx;height:10rpx;" @play="playerOnPlay" @pause="playerOnPause" @ended="playerOnEnded"
+				@timeupdate="playerOnTimeupdate" @waiting="playerOnWaiting" @error="playerOnError"></video>
+		</template>
+	</view>
+</template>
+
+<script>
+	/*
+	createInnerAudioContext()是audio组件的内部实现，不能熄屏播放、不能后台播放、不能倍速播放。
+	getBackgroundAudioManager() 可以熄屏播放、后台播放，不能倍速播放。缺点是响应速度很慢，无法实现精细、及时的进度控制，而且可能被别的程序占用。
+	因此这里只能用video来实现，video能倍速播放，不能熄屏播放、不能后台播放。而且避免了用createInnerAudioContext()实现的跳转到别的页面，还在播放的问题
+	因此应用程序可以在需要后台播放的时候（需要用户操作触发），再暂停这个控件的播放，然后自己用getBackgroundAudioManager实现后台播放
+	*/
+
+	import Vue from 'vue';
+	import {
+		mapMutations
+	} from 'vuex'
+	import {
+		audios
+	} from './audioBg.js'
+	export default {
+		mixins: [audios],
+		props: {
+			nowFileTime: {
+				type: [String, Number],
+				default: 0
+			},
+		},
+
+		watch: {
+			nowFileTime(oValue, nValue) {
+				this.duration = nValue
+			}
+		},
+
+		data() {
+			return {
+				src: '', // 
+				poster: "",
+				name: "...",
+				singer: "...",
+				duration: 0,
+				currentTime: 0,
+				playState: "pause", //"loading"/"playing"/"pause"
+				isSliderChanging: false,
+				isFirst: false, // 是否阻止第一次赋值
+				audio: null, // 音频对象
+				show: false, // 控制展示用的
+				closeing: false, //  默认关闭
+			};
+		},
+		created() {
+			// 自定义组件，需要传递第二个参数为this，否则后续的pause等操作不起作用
+			this.videoCtx = uni.createVideoContext("videoPlayer", this);
+			this.audio = uni.createInnerAudioContext();
+			this.audio.autoplay = false;
+			this.createAudio()
+			this.setAudioFunc()
+		},
+
+		mounted() {
+			this.audio.onCanplay((e) => {
+				if (this.audio.duration != 0) {
+					this.playState = "pause"
+					this.$forceUpdate()
+				}
+			})
+		},
+
+		methods: {
+			...mapMutations(['createAudio', 'stopAduio']),
+			setSrc(value) {
+				console.log(this, ' 我打印this')
+				this.src = value;
+				console.log(this.src, '我在这儿里更换src')
+				// 获取当前音频的总时长
+				this.audio.src = value;
+			},
+
+			setPoster(value) {
+				this.poster = value;
+			},
+			setName(value) {
+				this.name = value;
+			},
+			setSinger(value) {
+				this.singer = value;
+			},
+
+			playerOnPlay(e) {
+				this.playState = "playing";
+				console.log('playerOnPlay', e)
+				this.$emit("play");
+			},
+			playerOnPause(e) {
+				this.playState = "pause";
+				console.log('playerOnPause', e)
+				this.$emit("pause");
+			},
+			playerOnEnded(e) {
+				this.playState = "pause";
+				console.log('playerOnEnded', e)
+				this.$emit("ended");
+			},
+
+			playerOnTimeupdate(e) {
+				if (this.isFirst) this.playState = "playing";
+				this.isFirst = true
+				this.duration = e.detail.duration;
+				this.currentTime = e.detail.currentTime;
+				this.$emit("timeUpdate", e.detail);
+			},
+
+			playerOnWaiting(e) {
+				this.playState = "loading";
+				console.log('playerOnWaiting', e)
+			},
+			playerOnError(e) {
+				console.log('playerOnError', e)
+				this.playState = "pause";
+				this.$emit("error", e);
+			},
+			formatSeconds(seconds) {
+				var result = typeof seconds === "string" ? parseFloat(seconds) : seconds;
+				if (isNaN(result)) return "";
+				let h = Math.floor(result / 3600) < 10 ?
+					"0" + Math.floor(result / 3600) :
+					Math.floor(result / 3600);
+				let m = Math.floor((result / 60) % 60) < 10 ?
+					"0" + Math.floor((result / 60) % 60) :
+					Math.floor((result / 60) % 60) + h * 60;
+				let s = Math.floor(result % 60) < 10 ?
+					"0" + Math.floor(result % 60) :
+					Math.floor(result % 60);
+				return `${h}:${m}:${s}`;
+			},
+			stop() {
+				this.videoCtx.stop();
+			},
+			seek(t) {
+				this.videoCtx.seek(t);
+			},
+			play() {
+				// if (this.videoCtx.currentTime != this.videoCtx.currentTime) {
+				// 	this.seek(this.currentTime)
+				// }
+				console.log('触发方法play')
+				this.videoCtx.play(); //在有的H5浏览器里，如果play不是用户触发的，则play()会报错
+				// 暂停后台播放
+				this.stopAduio()
+			},
+			pause() {
+				console.log('触发方法pause')
+				this.videoCtx.pause();
+			},
+			playbackRate(value) {
+				this.videoCtx.playbackRate(value);
+				//playbackRate不能在play之前或者之后立即调用，否则只有很少几率会成功
+			},
+			sliderChange(e) {
+				this.isSliderChanging = false;
+				//要通过e.detail.value获取，否则如果通过dom去读取slider的value
+				//就会存在滚动条拖不动的情况
+				// this.videoCtx.seek(e.detail.value);
+				let type = 'audio'
+				
+				if (this.bgAudioMannager.paused === false) {
+					type = 'bgAudio'
+				}
+				this.$emit('sliderChangeComplate', { ...e, isType: type })
+			},
+			sliderChanging(e) {
+				this.isSliderChanging = true;
+				console.log(e, '当前正在改变')
+			},
+			
+			// 关闭后台播放按钮
+			closeTip() {
+				this.closeing = false
+				setTimeout(() => {
+					this.show = false
+				}, 250)
+			},
+			
+			// 展示后台播放按钮
+			showTip() {
+				this.show = true
+				setTimeout(() => {
+					this.closeing = true
+				}, 50)
+			},
+
+			// 点击后台播放音频事件
+			backAudio() {
+				this.pause()
+				let obj = {
+					src: this.src,
+					currentTime: this.currentTime
+				}
+				this.setAudio(obj)
+			},
+
+			// 切换播放源
+			checkPlayer() {
+				this.closeTip()
+				if (this.bgAudioMannager.paused === false) {
+					this.stopAduio()
+				} else {
+					this.backAudio()
+				}
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	// @import './index.scss';
+	@mixin textoverflow() {
+		display: -webkit-box;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 1;
+	}
+
+	@keyframes rowup {
+		0% {
+			-webkit-transform: translate(-50%, -50%) rotate(0deg);
+			transform-origin: center center;
+		}
+
+		100% {
+			-webkit-transform: translate(-50%, -50%) rotate(360deg);
+			transform-origin: center center;
+		}
+	}
+
+	.imt-audio {
+		position: relative;
+		width: 100%;
+		height: 81rpx;
+		display: flex;
+		box-sizing: border-box;
+		background: #fff;
+
+		.top {
+			position: relative;
+			width: 100rpx;
+		}
+
+		.audio-wrapper {
+			position: relative;
+			padding: 0 20rpx;
+			display: flex;
+			flex: 1;
+			color: #fff;
+			
+			.popup {
+				position: absolute;
+				right: 32rpx;
+				top: -122rpx;
+				z-index: 100;
+				width: 136rpx;
+				height: 122rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-direction: column;
+				background: #fff;
+				border: 1rpx solid #E0E0E0;
+				transition: all 0.25s linear;
+				opacity: 0;
+				
+				image {
+					width: 32rpx;
+					height: 32rpx;
+				}
+				
+				text {
+					margin-top: 10rpx;
+					color: #333;
+					font-size: 24rpx;
+				}
+				
+				.act-test {
+					color: #2671E2;
+				}
+			}
+			
+			.close {
+				opacity: 1;
+			}
+		}
+
+		.slidebox {
+			flex-shrink: 0;
+			display: flex;
+			align-items: center;
+			
+			.slide-img {
+				width: 32rpx;
+				height: 8rpx;
+			}
+		}
+
+		/deep/ .uni-slider-tap-area {
+			padding: 0;
+		}
+
+		/deep/ .uni-slider-wrapper {
+			min-height: 0;
+		}
+
+		/deep/ .uni-slider-handle-wrapper {
+			height: 6px;
+		}
+
+		.audio-slider {
+			flex-grow: 1;
+		}
+
+		.play {
+			width: 48rpx;
+			height: 48rpx;
+			z-index: 99;
+			background: rgba(0, 0, 0, 0.4);
+			border-radius: 50%;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+
+			&.loading {
+				width: 48rpx;
+				height: 48rpx;
+				animation: rotating_theme3 2s linear infinite;
+			}
+		}
+	}
+
+	.audio-flex {
+		padding: 0 32rpx 0 0;
+		flex-grow: 1;
+		display: flex;
+		align-items: center;
+
+		text {
+			color: #70798D;
+		}
+	}
+
+	@keyframes rotating {
+		0% {
+			transform: rotateZ(0deg)
+		}
+
+		100% {
+			transform: rotateZ(360deg)
+		}
+	}
+
+	@keyframes rotating_theme3 {
+		0% {
+			transform: translate(-50%, -50%) rotateZ(0deg)
+		}
+
+		100% {
+			transform: translate(-50%, -50%) rotateZ(360deg)
+		}
+	}
+
+	.hItem {
+		margin-left: 16rpx;
+	}
+
+	.extrButton {
+		font-size: 36rpx;
+	}
+
+	.videoPlayer {
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		z-index: -1;
+	}
+</style>

main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import App from './App';
 import dayjs from './utils/dayjs.min.js'
+import store from './store/index.js'
 Vue.config.productionTip = false;
 
 Vue.prototype.$dayjs = dayjs;
@@ -20,6 +21,7 @@ Vue.use(http, app)
 App.mpType = 'app';
 
 const app = new Vue({
-    ...App
+    ...App,
+	store
 });
 app.$mount();

manifest.json

@@ -1,5 +1,5 @@
 {
-    "name" : "去房质控管家",
+    "name" : "去房智控管家",
     "appid" : "__UNI__D88F14A",
     "description" : "AI营销助理",
     "versionName" : "1.1.0",
@@ -100,6 +100,7 @@
         },
         "usingComponents" : true,
         "permission" : {},
+        "requiredBackgroundModes" : [ "audio" ],
         "plugins" : {
             "WechatSI" : {
                 "version" : "0.3.4",

pages/mine/details2.vue

@@ -36,70 +36,9 @@
 					:class="{active: item.bg < playNow &&  item.ed > playNow && i==0}"
 					v-for="(item,index) in dialog.message" :key="index" :data-speaker="item.speaker">
 					<view class="avatar">
-						<view v-if="item.speaker == 1" style="color: #60CBEC;">
+						<view :style="[SPEAKERSTYLE(item.speaker)]">
 							<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
-							<text v-else>A</text>
-						</view>
-						<view v-if="item.speaker == 2" style="color: #EC8B47;">
-							<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
-							<text v-else>B</text>
-						</view>
-						<view v-if="item.speaker == 3" style="color: #4F861E;">
-							<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
-							<text v-else>C</text>
-						</view>
-						<view v-if="item.speaker == 4" style="color: #9F61C8;">
-							<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
-							<text v-else>D</text>
-						</view>
-						<view v-if="item.speaker == 5" style="color: #4980C8;">
-							<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
-							<text v-else>E</text>
-						</view>
-
-						<view v-if="item.speaker == 6" style="color: #60CBEC;">
-							<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
-							<text v-else>F</text>
-						</view>
-						<view v-if="item.speaker == 7" style="color: #EC8B47;">
-							<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
-							<text v-else>G</text>
-						</view>
-						<view v-if="item.speaker == 8" style="color: #4F861E;">
-							<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
-							<text v-else>H</text>
-						</view>
-						<view v-if="item.speaker == 9" style="color: #9F61C8;">
-							<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
-							<text v-else>I</text>
-						</view>
-						<view v-if="item.speaker == 10" style="color: #9F61C8;">
-							<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
-							<text v-else>J</text>
-						</view>
-						<view v-if="item.speaker == 11" style="color: #9F61C8;">
-							<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
-							<text v-else>K</text>
-						</view>
-						<view v-if="item.speaker == 12" style="color: #9F61C8;">
-							<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
-							<text v-else>L</text>
-						</view>
-						<view v-if="item.speaker == 13" style="color: #9F61C8;">
-							<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
-							<text v-else>M</text>
-						</view>
-						<view v-if="item.speaker == 14" style="color: #9F61C8;">
-							<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
-							<text v-else>N</text>
-						</view>
-						<view v-if="item.speaker == 15" style="color: #9F61C8;">
-							<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
-							<text v-else>O</text>
-						</view>
-						<view v-if="item.speaker == 16" style="color: #9F61C8;">
-							<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image>
-							<text v-else>P</text>
+							<text v-else>{{ item.speaker | toCapital }}</text>
 						</view>
 					</view>
 					<view class="content">
@@ -128,23 +67,10 @@
 		<view class="bottombox">
 			<!-- <LongAudio :customerId="customerId" :infos="infos" :roleindex="roleindex"></LongAudio> -->
 			<!-- 播放块 -->
-			<view class="bottomhead">
-				<view class="audio-play" @tap="changePlayState">
-					<image class="image" mode="widthFix"
-						:src="audioPlay ? 'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/pause.png' : 'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/play.png'">
-					</image>
-				</view>
-				<view class="audio-slider">
-					<view class="audio-time">
-						<text>{{currentTimeStr}}</text>
-					</view>
-					<slider class="slider" min="0" :max="sliderMax" @change="sliderChangeComplate" block-size="14"
-						:value="sliderValue" activeColor="blue"></slider>
-					<view class="audio-time">
-						<text>{{timeStr}}</text>
-					</view>
-				</view>
-			</view>
+
+			<!-- 播放块 :src="recordPath" -->
+			<yz-audio ref="zyAudio" @timeUpdate="TimeUpdate" @sliderChangeComplate="sliderChangeComplate"></yz-audio>
+
 			<!-- 底部弹框 -->
 			<view class="botbotmm">
 				<view class="tmmchen" @click="guanjiancishifo()">
@@ -421,7 +347,8 @@
 					</view>
 					<view class="bioqianwayl" v-if="item.isshow==true">
 						<view class="jiangshang" v-for="(chend,i) in item.children" :key='i' v-if="chend.selected==0">
-							{{chend.text}}</view>
+							{{chend.text}}
+						</view>
 					</view>
 				</view>
 			</view>
@@ -482,7 +409,7 @@
 	var config = require("../../config");
 	import LongAudio from "@/components/long_audio/long_audio.vue"
 	export default {
-		components:{
+		components: {
 			LongAudio
 		},
 		data() {
@@ -583,7 +510,7 @@
 				roleisshaw: false,
 				roleindexrow: 0,
 				roletiaoshu: 0,
-				infos:null
+				infos: null
 			};
 		},
 		onLoad: function(options) {
@@ -592,11 +519,11 @@
 			this.itemobj = uni.getStorageSync('searchobj');
 			console.log(this.itemobj)
 			this.stateisshow = options.stateisshow;
-			uni.$on("playNows",(val)=>{
-			    this.playNow=val;
+			uni.$on("playNows", (val) => {
+				this.playNow = val;
 			})
-			uni.$on("scrollIds",(val)=>{
-			    this.scrollId=val;
+			uni.$on("scrollIds", (val) => {
+				this.scrollId = val;
 			})
 		},
 		onShow() {
@@ -627,28 +554,10 @@
 				this.infos = currPage.data.info;
 			}
 			this.gituserlist()
-			this.innerAudioContext = uni.createInnerAudioContext();
-			this.innerAudioContext.autoplay = false;
-			this.innerAudioContext.title = '音频';
-
-			this.onPlay()
-			this.onPause()
-			this.onCanplay()
-			this.onEnded()
-			this.onSeeking()
-			this.onSeeked()
-			this.TimeUpdate()
 			this.init(this.infos)
 
 		},
-		
-		
-		onUnload() {
-			//暂停
-			this.innerAudioContext.pause()
-			// 销毁
-			// this.innerAudioContext.destroy();
-		},
+
 		methods: {
 			rolexuanze(index) {
 				this.roleindexrow = index;
@@ -684,7 +593,6 @@
 			},
 			argece(item) {
 				console.log(item)
-				this.innerAudioContext.destroy();
 				if (item.selected == 0) {
 					console.log(item)
 					uni.navigateTo({
@@ -728,7 +636,6 @@
 			},
 			//评分点击
 			clickaudeopal(item) {
-				this.innerAudioContext.destroy();
 				if (item.selected == 0) {
 					console.log(item)
 					uni.navigateTo({
@@ -753,7 +660,6 @@
 				this.Acquirecustomerintentlist2[i].isshow = !this.Acquirecustomerintentlist2[i].isshow;
 			},
 			tocalibration() {
-				this.innerAudioContext.destroy();
 				uni.navigateTo({
 					url: '/pages/mine/calibration?id=' + this.customerId
 				});
@@ -951,7 +857,6 @@
 			},
 			guanjiancishifo() {
 				// this.guanjianciishow=!this.guanjianciishow;
-				this.innerAudioContext.destroy();
 
 				this.stateisshow = 1;
 				uni.navigateTo({
@@ -1056,7 +961,7 @@
 							this.roleindexbiaoji = data.data.data.speaker - 1;
 							this.dshfkjsdkksodofydwfkhwdfkjh = data.data.data.speaker - 1;
 						}
-						if (this.roleindex > this.tablist.length - 1) { 
+						if (this.roleindex > this.tablist.length - 1) {
 							this.roleindex = this.tablist.length - 1
 							this.fenjiaoseunfo()
 						}
@@ -1084,7 +989,6 @@
 				})
 			},
 			toKeywordsearch() {
-				this.innerAudioContext.destroy();
 
 				this.stateisshow = 1;
 				uni.navigateTo({
@@ -1092,92 +996,25 @@
 						"&skpl=" + "1"
 				})
 			},
-			onPlay() {
-				this.innerAudioContext.onPlay(() => {
-					// 播放监听
-					console.log('播放!');
-					this.audioPlay = true;
-					wx.enableAlertBeforeUnload({
-						message: "是否确认退出详情页面？",
-						success: function(res) {
-					 	console.log("方法注册成功：", res);
-						},
-						fail: function(errMsg) {
-					  console.log("方法注册失败：", errMsg);
-						},
-					});
-				});
-			},
-			onPause() {
-				this.innerAudioContext.onPause(() => {
-					wx.disableAlertBeforeUnload({
-						success: function(res) {
-							console.log(res)
-						},
-						fail: function(e) {
-							console.log(e)
-						}
-					});
-					// 暂停监听
-					console.log('暂停播放!');
-					this.audioPlay = false
-				});
-			},
-			onCanplay() {
-				this.innerAudioContext.onCanplay((callback) => {
-					console.log("缓冲回调", this.innerAudioContext.duration);
-				})
-			},
-			onEnded() {
-				this.innerAudioContext.onEnded(() => {
-					// 结束播放监听
-					console.log('播放结束!');
-					this.audioPlay = false;
-				});
-			},
-			onSeeking() {
-				this.innerAudioContext.onSeeking((res) => {
-					console.log("进行跳转", res);
-				})
-			},
-			onSeeked() {
-				this.innerAudioContext.onSeeked((res) => {
-					console.log("结束跳转", res);
-					this.$forceUpdate()
-				});
-			},
-			TimeUpdate() {
-				this.innerAudioContext.onTimeUpdate(() => {
-					// var pages = getCurrentPages();
-					// if(pages[pages.length-1].route!="pages/mine/details2"){
-					// 	this.innerAudioContext.destroy();
-					// }
-					const {
-						currentTime,
-						duration
-					} = this.innerAudioContext;
-					console.log(currentTime, 'TimeUpdate, currentTime')
-					this.playNow = parseInt(currentTime * 1000)
-					console.log(this.playNow)
-					if (this.dialogList.length == 0) {
-						return
-					} else {
-						const message = this.dialogList[0].message;
-						for (let i = 0; i < message.length; i++) {
-							if (Number(message[i].bg) < this.playNow && Number(message[i].ed) > this.playNow) {
-								this.scrollId = "dialog" + this.csdFileindex + "text" + message[i].bg;
-								break;
-							}
+
+			TimeUpdate(e) {
+				const {
+					currentTime,
+					duration
+				} = e
+				this.playNow = parseInt(currentTime * 1000)
+				if (this.dialogList.length == 0) {
+					return
+				} else {
+					const message = this.dialogList[0].message;
+					for (let i = 0; i < message.length; i++) {
+						if (Number(message[i].bg) < this.playNow && Number(message[i].ed) > this.playNow) {
+							this.scrollId = "dialog" + this.csdFileindex + "text" + message[i].bg;
+							break;
 						}
 					}
-					const currTimeStr = this.formatTime(currentTime);
-					this.sliderValue = parseInt(currentTime);
-					// 变动的时间
-					this.currentTimeStr = currTimeStr;
-					//进度条最大值
-					this.sliderMax = this.luyinList[this.csdFileindex].recordDuration;
-					this.$forceUpdate()
-				});
+				}
+				this.$forceUpdate()
 			},
 
 
@@ -1204,34 +1041,26 @@
 						if (info.bg != 0) {
 							this.luyinList = res;
 							this.recordPath = res[0].recordPath
-							this.sliderMax = this.getTime(res[0].recordDuration)
-							this.timeStr = this.getTime(res[0].recordDuration)
 							this.date = res[0].receptionTime;
-
 							this.getCorpusAnalysis(info);
-							this.creatAudio()
 						} else {
 							this.luyinList = res;
 							this.recordPath = res[0].recordPath
-							this.sliderMax = this.getTime(res[0].recordDuration)
-							this.timeStr = this.getTime(res[0].recordDuration)
 							this.date = res[0].receptionTime;
-
 							this.getCorpusAnalysis(info);
-							this.creatAudio()
 						}
+
+						this.zyAudio()
 					}
 				})
 			},
 			//搜索跳转
 			adasdasdasd(e) {
-				const currTimeStr = this.formatTime(e)
-				this.currentTimeStr = currTimeStr
-				this.innerAudioContext.seek(e);
+				this.$refs.zyAudio.seek(e)
 				if (uni.getStorageSync('entrance') == 1) {
 					return
 				} else {
-					this.innerAudioContext.play();
+					this.$refs.zyAudio.play();
 				}
 			},
 			//下一页
@@ -1694,21 +1523,18 @@
 			},
 
 
-
-
 			getTime(time) {
 				return util.formatSecond(time)
 			},
-			// 录音暂停播放
-			changePlayState() {
-				if (this.audioPlay == false) {
-					this.innerAudioContext.play();
-				} else {
-					this.innerAudioContext.pause()
-				}
-			},
+
+
 			//音频前进回退
 			sliderChangeComplate(e) {
+				if (e.isType == 'audio') {
+					this.$refs.zyAudio.pause()
+				} else {
+					this.$refs.zyAudio.audioPause()
+				}
 				let platetime = e.detail.value * 1000;
 				this.dialogList = []
 				uni.request({
@@ -1727,11 +1553,14 @@
 						} else {
 							this.dialogList.push(this.newluyinList[data.data.data.index])
 						}
-						console.log(e.detail, '1233333333333333333333333333333333333333333333333333333333333')
-						const currTimeStr = this.formatTime(e.detail.value)
-						this.currentTimeStr = currTimeStr
-						this.innerAudioContext.seek(e.detail.value);
-						this.innerAudioContext.play();
+
+						if (e.isType == 'audio') {
+							this.$refs.zyAudio.seek(e.detail.value);
+							this.$refs.zyAudio.play();
+						} else {
+							this.$refs.zyAudio.audioSeek(e.detail.value);
+							this.$refs.zyAudio.audioPlay();
+						}
 					}
 				})
 			},
@@ -1760,33 +1589,12 @@
 						this.textindex = data.data.data.index;
 						this.toptextindex = data.data.data.index;
 						this.dialogList.push(this.newluyinList[data.data.data.index])
-						const currTimeStr = this.formatTime(newtime)
-						console.log(currTimeStr, 'currTimeStr')
 						this.currentTimeStr = currTimeStr
-						this.innerAudioContext.seek(newtime);
-						this.innerAudioContext.play();
+						this.$refs.zyAudio.seek(newtime)
+						this.$refs.zyAudio.play()
 					}
 				})
 			},
-			//录音实例
-			creatAudio() {
-				this.innerAudioContext = uni.createInnerAudioContext();
-				if (uni.getStorageSync('entrance') == 1) {
-					this.innerAudioContext.autoplay = false;
-				} else {
-					this.innerAudioContext.autoplay = true;
-				}
-
-				this.innerAudioContext.src = this.recordPath;
-				this.innerAudioContext.title = '音频';
-				this.onPlay()
-				this.onPause()
-				this.onCanplay()
-				this.onEnded()
-				this.onSeeking()
-				this.onSeeked()
-				this.TimeUpdate()
-			},
 			formatTime(num) {
 				//格式化时间格式
 				num = num.toFixed(0);
@@ -1800,7 +1608,12 @@
 				this.dialogListres[0].message.forEach(asd => {
 					asd.isshow = false;
 				})
-			}
+			},
+			
+			//录音实例
+			zyAudio() {
+				this.$refs.zyAudio.setSrc(this.recordPath)
+			},
 		},
 	}
 </script>
@@ -1916,8 +1729,8 @@
 		height: 84rpx;
 		border-bottom: 1px solid #E0E0E0;
 		display: flex;
-	
-	.boxhead1 {
+
+		.boxhead1 {
 			width: 50%;
 			color: #303030;
 			height: 84rpx;
@@ -2181,7 +1994,7 @@
 		left: 50%;
 		top: 50%;
 		transform: translate(-50%, -50%);
-		
+
 		.headpade {
 			margin-top: 10rpx;
 			padding: 8rpx 8rpx 8rpx 8rpx;

store/index.js

@@ -0,0 +1,54 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+	state: {
+		bgAudioMannager: null,
+	},
+	
+	mutations: {
+		createAudio(state) {
+			state.bgAudioMannager = uni.getBackgroundAudioManager();
+		},
+		
+		setSeekAudio(state, t) {
+			state.bgAudioMannager.seek(t)
+		},
+		
+		// 加载音频监听方法
+		initAudioMethod (state, obj) {
+			state.bgAudioMannager.onCanplay(() => {
+				state.bgAudioMannager.currentTime = obj.currentTime
+			});
+			state.bgAudioMannager.onStop(() => {
+				console.log('停止播放');
+			});
+			
+			state.bgAudioMannager.onPause(() => {
+				console.log('暂停播放');
+			});
+			state.bgAudioMannager.onEnded(() => {
+				//初始化 需要的参数
+				console.log('自然播放结束事件');
+			});
+			state.bgAudioMannager.onError((res) => {
+				console.log(res.errMsg);
+				console.log(res.errCode);
+			});
+		},
+		
+		// 停止全局音频播放
+		stopAduio(state) {
+			state.bgAudioMannager && state.bgAudioMannager.pause()
+			if (state.bgAudioMannager && state.bgAudioMannager.src) {
+				state.bgAudioMannager.src = ''
+			}
+		},
+	},
+	
+	action: {
+		
+	}
+})

utils/domain.js

@@ -1,12 +1,12 @@
 // http.js使用域名
 // const baseUrl = 'http://192.168.31.57:8080/autoSR/api';// 本地
-const baseUrl = 'http://121.42.63.138:9091/autoSR/api';// 测试站
+// const baseUrl = 'http://121.42.63.138:9091/autoSR/api';// 测试站
 // const baseUrl = 'http://192.168.31.92:8080/api';// sh
 // const baseUrl = 'http://81.70.55.170:9090/autoSR/api';// 测试站
 // const baseUrl = 'http://192.168.31.167:8080/autoSR/api'; // 长龙	
 // const baseUrl = 'http://192.168.31.134:8080/autoSR/api'; // 佳豪
 // const baseUrl = 'http://10.2.1.104:8081/autoSR/api'; // 刘敏
-// const baseUrl = 'https://zkgj.quhouse.com/api'; // 质控正式
+const baseUrl = 'https://zkgj.quhouse.com/api'; // 质控正式 
 // const baseUrl = 'https://hfju.com/api'; // 数智正式