<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" @change="handleAudioSliderChange($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, isEnded: false, timesTheSpeed: [ { name: "倍速", value: 1 }, { name: "1.25倍", value: 1.25 }, { name: "1.5倍", value: 1.5 }, { name: "2倍", value: 2 }, ], }; }, computed: { //重新 audioInit() { return { activityId: this.$store.state.audioBg.activityId, reportId: this.$store.state.audioBg.reportId, }; }, // 几倍的播放速度 isTimes() { return this.$store.state.audioBg.multiple; }, }, watch: { audioInit: { handler(nval) { this.init(); }, immediate: true, }, }, created() {}, mounted() {}, methods: { //点击隐藏事件 isShowMaskHandler() { this.$emit("update:showAudioPop", false); }, //数据初次加载 init() { const curAudio = this.$store.state.audioBg.list; if (this.globalBgAudioManager.src != curAudio.Url && curAudio.Url) { this.$store.commit("audioBg/setMultiple", 1); this.$store.commit("audioBg/updateAudioTime", 0); this.globalBgInit(); this.globalBgAudioManager.startTime = 0; this.globalBgAudioManager.playbackRate = this.isTimes; 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(); }, //播放不同的,或者播放结束了 globalBgInit(type) { const curAudio = this.$store.state.audioBg.list; this.globalBgAudioManager.src = curAudio.Url; this.globalBgAudioManager.title = curAudio.Name; if (type == "onEnded") { this.play = false; this.globalBgAudioManager.pause(); this.$store.commit("audioBg/updateAudioPause", true); } }, //音频播放事件 listenAudio() { this.globalBgAudioManager.onPlay(async () => { console.log("音频播放"); this.play = true; this.$store.commit("audioBg/updateAudioPause", false); if (this.$store.state.audioBg.activityId) { activity.backAudioPlay({ ActivityId: this.$store.state.audioBg.activityId }); } }); this.globalBgAudioManager.onPause(() => { console.log("音频暂停"); this.play = false; this.$store.commit("audioBg/updateAudioPause", true); }); this.globalBgAudioManager.onStop(() => { console.log("音频停止"); this.$emit("update:showAudioPop", false); uni.getSystemInfo({ success: (res) => { if (res.osName == "ios") { this.play = false; this.$store.commit("audioBg/removeAudio"); } else { this.play = false; this.$store.commit("audioBg/updateAudioPause", true); } }, }); }); this.globalBgAudioManager.onEnded(() => { console.log("音频onEnded"); // this.$store.commit("audioBg/updateAudioTime", 0); this.curTime = 0; uni.getSystemInfo({ success: (res) => { if (res.osName == "ios") { this.globalBgInit("onEnded"); } else { this.play = false; this.globalBgAudioManager.pause(); this.$store.commit("audioBg/updateAudioPause", true); } }, }); }); 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.curTime = parseInt(this.globalBgAudioManager.currentTime); this.$store.commit("audioBg/updateAudioTime", this.curTime); } }); }, //拖动进度条 handleAudioSliderChange(e) { const value = e.detail.value; this.globalBgAudioManager.seek(value); }, //音频点击暂停播放 handleChangePlayStatus() { if (!this.globalBgAudioManager.paused) { this.globalBgAudioManager.pause(); } else { this.globalBgAudioManager.play(); } }, //倍速播放 isTimesHandler(i) { console.log(this.curTime); 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(); } }, //快进 快退 speedReverseHandler(type) { let isTime = type == "reverse" ? this.curTime - 15 : this.curTime + 15; isTime = isTime <= 0 ? 0 : isTime >= this.audioTime ? this.audioTime : isTime; this.globalBgAudioManager.seek(isTime); }, }, }; </script> <style scoped lang="scss"> .global-audio-box { display: flex; height: 100%; position: fixed; width: 100%; top: 0; left: 0; z-index: 11; .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>