<template> <view class="container global-audio-box" v-if="showAudioPop"> <view class="bg-overlay" @click="isShowMaskHandler"></view> <view class="audio-box"> <view class="activity-title"> {{ activityTitle }} <view class="icon-cross" @click.stop="isShowMaskHandler"> <van-icon name="cross" font-size="32" /> </view> </view> <view class="audio-card"> <view class="card-title text_oneLine"> {{ title }} </view> <view class="slider-paly"> <view style="flex: 1; padding-top: 20rpx"> <slider activeColor="#3385FF" :max="audioTime" :value="curTime" @touchstart="touchstartHandler" @change="handleAudioSliderChange($event)" @changing="handleAudioSliderChangeing($event)" block-size="16" class="slider" /> <view class="card-time"> <text class="time">{{ curTime | formatVoiceTime }}</text> <text class="time">{{ audioTime | formatVoiceTime }}</text> </view> </view> <view class="is-paly-card"> <image @click.stop="handleChangePlayStatus" :src="play ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon.gif' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/pause_icon.png'" ></image> </view> </view> <view class="fast-reverse"> <image @click="speedReverseHandler('reverse')" class="speed-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/fastReverse_icon.png"></image> <block v-for="(item, index) in timesTheSpeed" :key="item.value"> <view class="speed-button" v-if="isTimes == item.value" @click="isTimesHandler(index)"> {{ item.name }} </view> </block> <image @click="speedReverseHandler('speed')" class="speed-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/speed_icon.png"></image> </view> </view> </view> </view> </template> <script> import { activity } from "@/config/api"; export default { name: "", filters: { formatVoiceTime(e) { let m = parseInt(e / 60); let s = parseInt(e % 60); return `${m > 9 ? m : "0" + m}:${s > 9 ? s : "0" + s}`; }, }, components: {}, props: { showAudioPop: { type: Boolean, default: false, required: true, }, }, data() { return { curTime: 0, audioTime: 0, //当前音频总时长 title: "", //当前音频标题 activityTitle: "", //当前活动标题 play: false, isosName: "", palyTimeout: null, palyTime: 0, timesTheSpeed: [ { name: "倍速", value: 1 }, { name: "1.25倍", value: 1.25 }, { name: "1.5倍", value: 1.5 }, { name: "2倍", value: 2 }, ], isRecord: true, //是否记录播放 }; }, computed: { //重新 audioInit() { return { activityId: this.$store.state.audioBg.activityId, reportId: this.$store.state.audioBg.reportId, indexId: this.$store.state.audioBg.indexId, }; }, // 几倍的播放速度 isTimes() { return this.$store.state.audioBg.multiple; }, //进度条是否在滑动 isSlide() { return this.$store.state.audioBg.isDragSlide; }, isEnded() { return this.$store.state.audioBg.isAudioEnded; }, }, watch: { audioInit: { // 切换了音频播放 重置下数据 handler(nval) { this.init(); }, immediate: true, }, }, created() {}, mounted() { uni.getSystemInfo({ //判断机型 success: (res) => { this.isosName = res.osName; }, }); }, methods: { //点击隐藏事件 isShowMaskHandler() { this.$emit("update:showAudioPop", false); }, //数据初次加载 init() { const curAudio = this.$store.state.audioBg.list; if ((this.globalBgAudioManager.src != curAudio.Url && curAudio.Url) || (this.isEnded && this.isosName !== "ios" && curAudio.Url)) { this.$store.commit("audioBg/setAudioEnd", false); this.globalBgAudioManager.playbackRate = 1; this.$store.commit("audioBg/setMultiple", 1); this.$store.commit("audioBg/updateAudioTime", 0); this.globalBgAudioManager.src = curAudio.Url; this.globalBgAudioManager.title = curAudio.Name; this.globalBgAudioManager.startTime = 0; this.curTime = 0; } else { this.curTime = parseInt(this.globalBgAudioManager.currentTime); } this.audioTime = curAudio.PlaySeconds; this.title = curAudio.Name; this.activityTitle = this.$store.state.audioBg.activityTitle; this.play = !this.globalBgAudioManager.paused; this.listenAudio(); }, //音频播放事件 listenAudio() { // 音频播放 this.globalBgAudioManager.onPlay(async () => { if (this.isRecord) { console.log("音频播放"); this.palyTime = 0; this.backAudioPlay(); this.palyTimeout = setInterval(() => { this.palyTime++; }, 1000); } this.play = true; this.$store.commit("audioBg/updateAudioPause", false); this.isRecord = true; }); // 音频暂停 this.globalBgAudioManager.onPause(() => { console.log("音频暂停"); this.backAudioPlay(); clearInterval(this.palyTimeout); this.play = false; this.$store.commit("audioBg/updateAudioPause", true); }); // 音频停止 this.globalBgAudioManager.onStop(() => { console.log("音频停止"); this.backAudioPlay(); clearInterval(this.palyTimeout); this.$emit("update:showAudioPop", false); if (this.isosName == "ios") { this.play = false; this.$store.commit("audioBg/removeAudio"); } else { this.play = false; this.$store.commit("audioBg/updateAudioPause", true); } }); // 音频onEnded this.globalBgAudioManager.onEnded(() => { console.log("音频onEnded"); this.backAudioPlay(); clearInterval(this.palyTimeout); this.$emit("update:showAudioPop", false); this.$store.commit("audioBg/setAudioEnd", true); this.$store.commit("audioBg/parseIntAudio", false); this.$store.commit("audioBg/removeAudio"); }); // 音频onError this.globalBgAudioManager.onError((e) => { console.log("音频onError", e); this.$store.commit("audioBg/removeAudio"); this.$store.commit("audioBg/setMultiple", 1); uni.showToast({ title: "音频播放错误", icon: "none", }); }); // 音频的播放时间更新 this.globalBgAudioManager.onTimeUpdate(() => { if (this.globalBgAudioManager.src && parseInt(this.globalBgAudioManager.currentTime) !== 0 && !this.isSlide) { this.curTime = parseInt(this.globalBgAudioManager.currentTime); this.$store.commit("audioBg/updateAudioTime", this.curTime); } }); }, // 拖动进度条 handleAudioSliderChangeing(e) { this.curTime = e.detail.value; }, // 拖动进度条 handleAudioSliderChange(e) { const value = e.detail.value; this.globalBgAudioManager.seek(value); this.isRecord = false; setTimeout(() => { this.$store.commit("audioBg/setSlide", false); }, 300); }, // 音频点击暂停播放 handleChangePlayStatus() { if (!this.globalBgAudioManager.paused) { this.globalBgAudioManager.pause(); } else { this.globalBgAudioManager.play(); } }, // 倍速播放 isTimesHandler(i) { let index = i == 3 ? 0 : i + 1; this.$store.commit("audioBg/setMultiple", this.timesTheSpeed[index].value); this.globalBgAudioManager.playbackRate = this.isTimes; this.globalBgAudioManager.startTime = this.curTime; if (this.globalBgAudioManager.paused) { this.globalBgAudioManager.play(); } this.isRecord = false; }, //快进 快退 speedReverseHandler(type) { let isTime = type == "reverse" ? this.curTime - 15 : this.curTime + 15; isTime = isTime <= 0 ? 0 : isTime >= this.audioTime ? this.audioTime - 1 : isTime; this.globalBgAudioManager.seek(isTime); this.isRecord = false; }, // 播放了记录 backAudioPlay() { if ((this.$store.state.audioBg.activityId || this.$store.state.audioBg.indexId) && this.palyTime >= 0) { activity.backAudioPlay({ ActivityId: this.$store.state.audioBg.activityId || this.$store.state.audioBg.indexId, PlaySeconds: this.palyTime, }); } }, // 手指离开了拖动进度条 touchstartHandler() { this.$store.commit("audioBg/setSlide", true); }, }, }; </script> <style scoped lang="scss"> .global-audio-box { display: flex; height: 100%; position: fixed; width: 100%; top: 0; left: 0; z-index: 111; .bg-overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); } .activity-title { position: relative; width: 100%; font-size: 30rpx; font-weight: 500; margin-bottom: 35rpx; padding-right: 30rpx; .icon-cross { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 10rpx; } } .audio-box { position: absolute; bottom: 0; left: 0; padding: 30rpx; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); width: 100%; background: #ffffff; box-sizing: border-box; border-radius: 30rpx 30rpx 0 0; } .audio-card { width: 100%; height: 282rpx; background: #f9f9f9; border-radius: 16rpx; margin: 0 auto; padding: 30rpx; .slider { width: 100%; margin: 0; } .slider-paly { display: flex; height: 80rpx; align-items: center; } .card-title { color: #3385ff; font-size: 28rpx; padding: 0 40rpx; text-align: center; margin-bottom: 35rpx; } .card-time { display: flex; justify-content: space-between; color: #999999; font-size: 20rpx; } .is-paly-card { width: 70rpx; height: 70rpx; flex-shrink: 0; margin-left: 30rpx; image { width: 70rpx; height: 70rpx; } } .fast-reverse { display: flex; align-items: center; justify-content: center; margin-top: 30rpx; .speed-button { width: 96rpx; height: 47rpx; background: #eaeaea; border-radius: 8rpx; text-align: center; line-height: 47rpx; margin: 0 70rpx; } .speed-img { width: 50rpx; height: 50rpx; } } } } </style>