NewZkgj/components/long_audio/long_audio.vue

<template>
	<view>
		<!-- 播放块 -->
		<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>
	</view>
</template>

<script>
	var util = require("@/utils/util.js");
	var config = require("@/config");
	export default {
		name: "long_audio",
		data() {
			return {
				audioPlay: false, //当前的播放状态控制
				sliderValue: 0, //进度条最小值
				sliderMax: 0, //进度条最大值
				innerAudioContext:null, //播放实例
				currentTimeStr: "00:00", //当前进度的时间
				timeStr: "00:00", //总的时间
				recordPath: "",
				luyinList: [], //录音文件
				newluyinList: [],
				dialogList: [], //录音识别列表
				csdFileindex: 0,
				date: "", //年月日
				scrollId: "",
				playNow: 0,
				alltimeStr: "00:00:00",
			};
		},
		props:{
			customerId:'',
			infos:null,
			roleindex:0
		},
		mounted() {
			this.roleindex = 0;
			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)
		},
		destroyed() {
			//暂停
			this.innerAudioContext.pause()
			// 销毁
			// this.innerAudioContext.destroy();
		},
		methods: {
			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)
					uni.$emit("playNows", this.playNow)
					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;
								uni.$emit("scrollIds", this.scrollId)
								break;
							}
						}
					}
					const currTimeStr = this.formatTime(currentTime);
					this.sliderValue = parseInt(currentTime);
					// 变动的时间
					this.currentTimeStr = currTimeStr;
					//进度条最大值
					this.sliderMax = this.luyinList[this.csdFileindex].recordDuration;
					this.$forceUpdate()
				});
			},
			//分角色标记刷新
			fenjiaoseunfo() {
				var bgcd = this.sliderValue * 1000;
				this.newluyinList = [];
				this.dialogList = [];
				uni.request({
					url: config.service.getCorpusAnal + '?corpusId=' + this.luyinList[this.csdFileindex].id +
						"&bg=" + bgcd + "&speaker=" + this.roleindex, //仅为示例，并非真实接口地址。	
					method: "GET",
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					success: (data) => {
						this.tablist = [];
						let jsonInfo = JSON.parse(data.data.data.audioContent);
						for (var i = 0; i <= data.data.data.speakerNum; i++) {
							if (i === 0) {
								this.tablist.push({
									name: '全部'
								})
							} else {
								this.tablist.push({
									name: String.fromCharCode(i + 64)
								})
							}
						}

						if (data.data.data.speaker == null) {
							this.roleindexbiaoji = 0;
							this.dshfkjsdkksodofydwfkhwdfkjh = 0;
						} else {
							this.tablist[data.data.data.speaker].name = this.tablist[data.data.data.speaker]
								.name + "顾问";
							this.roleindexbiaoji = data.data.data.speaker - 1;
							this.dshfkjsdkksodofydwfkhwdfkjh = data.data.data.speaker - 1;
						}
						if (this.roleindex > this.tablist.length - 1) { 
							this.roleindex = this.tablist.length - 1
							this.fenjiaoseunfo()
						}


						this.speaker = data.data.data.speaker;
						//上拉标记点
						this.textindex = data.data.data.index;
						//下拉标记点
						this.toptextindex = data.data.data.index;

						jsonInfo.forEach(item => {
							item.message = JSON.parse(item.onebest)
							item.backindex = this.csdFileindex
						})
						console.log(jsonInfo)

						this.newluyinList = jsonInfo;
						if (this.textindex == null) {
							return
						} else {
							this.dialogList.push(jsonInfo[this.textindex]);
						}
					}
				})
			},
			
			// 获取转义后的对话结果
			getCorpusAnalysis(info) {
				this.dialogList = [];
				this.newluyinList = []
				uni.request({
					url: config.service.getCorpusAnal + '?corpusId=' + this.luyinList[this.csdFileindex].id +
						"&bg=" + info.bg + "&speaker=" + this.roleindex, //仅为示例，并非真实接口地址。	
					method: "GET",
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					success: (data) => {
						this.tablist = [];
						this.roleindexbiaoji = 0;
						let jsonInfo = JSON.parse(data.data.data.audioContent);
			
						for (var i = 0; i <= data.data.data.speakerNum; i++) {
							if (i === 0) {
								this.tablist.push({
									name: '全部'
								})
							} else {
								this.tablist.push({
									name: String.fromCharCode(i + 64)
								})
							}
						}
						if (data.data.data.speaker == null) {
							this.dshfkjsdkksodofydwfkhwdfkjh = 0;
						} else {
							this.tablist[data.data.data.speaker].name = this.tablist[data.data.data.speaker]
								.name + "顾问";
							this.roleindexbiaoji = data.data.data.speaker - 1;
							this.dshfkjsdkksodofydwfkhwdfkjh = data.data.data.speaker - 1;
						}
			
						this.speaker = data.data.data.speaker;
						//上拉标记点
						this.textindex = data.data.data.index;
						//下拉标记点
						this.toptextindex = data.data.data.index;
			
						jsonInfo.forEach(item => {
							item.message = JSON.parse(item.onebest)
							item.backindex = this.csdFileindex;
							if (info.onebest) {
								item.message.forEach(che => {
									if (che.onebest == info.onebest) {
										che.onebest =
											`<font style='color: red'>${che.onebest}</font>`;
									}
								})
							}
			
						})
						this.newluyinList = jsonInfo;
						this.dialogList.push(jsonInfo[this.textindex]);
						var itc = parseInt(info.bg / 1000)
						this.adasdasdasd(itc)
					}
				})
			},
			
			init(info) {
				this.sliderMax = 0; //进度条最大值
				this.timeStr = "00:00"; //总的时间
				const parames = {
					pageNum: 1,
					pageSize: 100,
					query: {
						customerId: this.customerId
					}
				}
				this.$u.post("/corpus/findByPage", parames).then(res => {
					if (res && res.length) {
						let alltime = 1 + res[0].recordDuration;
						this.calibration = res[0].calibration;
						if (this.calibration == 0) {
							this.kehuyixiangcenterindex = 0;
						} else {
							this.kehuyixiangcenterindex = 1;
						}
						this.alltimeStr = this.getTime(alltime)
						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()
						}
					}
				})
			},
			//搜索跳转
			adasdasdasd(e) {
				const currTimeStr = this.formatTime(e)
				this.currentTimeStr = currTimeStr
				this.innerAudioContext.seek(e);
				if (uni.getStorageSync('entrance') == 1) {
					return
				} else {
					this.innerAudioContext.play();
				}
			},
			getTime(time) {
				return util.formatSecond(time)
			},
			// 录音暂停播放
			changePlayState() {
				if (this.audioPlay == false) {
					this.innerAudioContext.play();
				} else {
					this.innerAudioContext.pause()
				}
			},
			//音频前进回退
			sliderChangeComplate(e) {
				let platetime = e.detail.value * 1000;
				this.dialogList = []
				uni.request({
					url: config.service.fastForward + '?corpusId=' + this.luyinList[this.csdFileindex].id +
						"&bg=" + platetime, //仅为示例，并非真实接口地址。	
					method: "GET",
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					success: (data) => {
						this.textindex = data.data.data.index;
						this.toptextindex = data.data.data.index;
						if (data.data.data.index > this.newluyinList.length) {
							this.dialogList.push(this.newluyinList[0])
						} 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();
					}
				})
			},
			//录音实例
			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);
				let second = num % 60;
				if (second < 10) second = '0' + second;
				let min = Math.floor(num / 60);
				if (min < 10) min = '0' + min;
				return min + ":" + second;
			},
			
		}
	}
</script>

<style lang="scss">
	.bottomhead {
		width: 100%;
		height: 81rpx;
		border-bottom: 1px solid #E0E0E0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.audio-slider {
			width: 87%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 30rpx;
		}

		.audio-slider .slider {
			width: 100%;
			padding: 0px 15rpx;
			box-sizing: border-box;
		}

		.audio-time {
			width: 110rpx;
			text-align: right;
			font-size: 26rpx;
			line-height: 28rpx;
			color: #70798D;
			display: flex;
			justify-content: space-between;
		}

		.audio-play {
			width: 48rpx;
			height: 48rpx;
			flex-shrink: 0;
		}

		.audio-play .image {
			width: 100%;
			height: 100%;
			margin-left: 30rpx;
		}
	}
</style>