hongze_yb_xcx/components/audioBox/audioBox.vue

<template>
    <view class="global-voice-box">
        <view class="flex small-box" v-if="!showBig" @click.prevent="showBig=true">
            <view style="flex:1;overflow: hidden;">
                <view class="van-ellipsis">{{title}}</view>
                <view class="time" style="font-size:24rpx;color:#666">时长 {{audioTime|formatVoiceTime}}</view>
            </view>
            <image 
                class="pause-img"  
                :src="play?require('@/static/audio-doing.png'):require('@/static/audio-pause-3.png')" 
                mode="aspectFill"
                @click.stop="handleChangePlayStatus"
            />
            <van-icon @click.stop="handleClosePopAudio" name="cross" size="18" color="#BBC3C9"/>
            <van-progress 
                color="#D4AC78" 
                track-color="#fff"
                :show-pivot="false" 
                stroke-width="2px" 
                custom-class="bot-progress" 
                :percentage="percentage" 
            />
        </view>
        <view class="big-box" v-else>
            <view class="flex top" style="overflow: hidden;">
                <van-icon name="arrow-down" size="18" color="#BBC3C9" @click="showBig=false" />
                <view class="van-ellipsis" style="flex:1;margin:0 10rpx;text-align:center">{{title}}</view>
                <van-icon @click.stop="handleClosePopAudio" name="cross" size="18" color="#BBC3C9"/>
            </view>
            <view class="flex center">
                <image 
                    class="pause-img"  
                    :src="play?require('@/static/audio-doing.png'):require('@/static/audio-pause-3.png')" 
                    mode="aspectFill"
                    @click.stop="handleChangePlayStatus"
                />
                <text class="time">{{curTime|formatVoiceTime}}</text>
                <slider
                    activeColor="#e3b377"
                    :max="audioTime" 
                    :value="curTime" 
                    @change="handleAudioSliderChange($event)"
                    block-size="16"
                    class="slider"
                />
                <text class="time">{{audioTime|formatVoiceTime}}</text>
            </view>
        </view>
    </view>
      
</template>

<script>
export default {
    filters:{
        formatVoiceTime(e){
            let m=parseInt(e/60)
            let s=parseInt(e%60)
            return `${m>9?m:'0'+m}:${s>9?s:'0'+s}`
        }
    },

    computed: {
        audioData(){
            return this.$store.state.audio
        },
        //用户监听音频是否变化了 是否需要初始化
        audioInit(){
            return {
                reportId:this.$store.state.audio.reportId,
                voiceId:this.$store.state.audio.voiceId,
            }
        },

        percentage(){
            return parseInt((this.curTime/this.audioTime)*100)
        },

        reportAudioShow(){
            return this.$store.state.report.audioData.show
        }
    },
    watch:{
        audioInit:{
            handler(nval){
                console.log(nval);
                this.init()
            },
            immediate:true
        },
        showBig:{
            handler(nval){
                this.$store.commit('audio/showBig',nval)
            },
            immediate:true
        }
    },
    data() {
        return {
            showBig:false,
            curTime:0,
            audioTime:0,//当前音频总时长
            title:'',//当前音频标题
            play:false
        }
    },
    methods: {
        init(){
            console.log('audioBox init');
            let delyTime=0
            if(this.$store.state.report.audioData.show){
                this.globalBgMusic.stop()
                delyTime=300
            }
            console.log('audioBox init',delyTime);
            const curAudio=this.$store.state.audio.list[this.$store.state.audio.index]
            setTimeout(() => {
                if(this.globalBgMusic.src!=curAudio.url){
                    this.globalBgMusic.src=curAudio.url 
                    this.globalBgMusic.title=curAudio.title
                }
                this.audioTime=curAudio.time
                this.title=curAudio.title
                this.curTime=parseInt(this.globalBgMusic.currentTime)
                this.play=!this.globalBgMusic.paused
                this.listenAudio()
            }, delyTime);
        },

        //音频播放事件
        listenAudio(){
            console.log('设置监听事件');
            this.globalBgMusic.onPlay(()=>{
                console.log('开始播放');
                this.play=true
                this.$store.commit('audio/updateAudioPause',false)
            })
            this.globalBgMusic.onPause(()=>{
                console.log('音频暂停');
                this.play=false
                this.$store.commit('audio/updateAudioPause',true)
            })
            this.globalBgMusic.onStop(()=>{
                console.log('音频停止');
                this.$store.commit('audio/removeAudio')
            })
            this.globalBgMusic.onEnded(()=>{
                console.log('音频onEnded');

                const index=this.$store.state.audio.index 
                if(index==this.$store.state.audio.list.length-1){
                    this.$store.commit('audio/removeAudio')
                }else{
                    this.handleAudioChange('next')
                }
                
            })
            this.globalBgMusic.onError((e)=>{
                console.log('音频onError',e);
                this.$store.commit('audio/removeAudio')
                uni.showToast({
                    title: '音频播放错误',
                    icon: 'none'
                })
            })
            this.globalBgMusic.onTimeUpdate(()=>{
                // console.log('时间更新');
                this.curTime=parseInt(this.globalBgMusic.currentTime)
                this.$store.commit('audio/updateAudioTime',this.curTime)
            })
        },

        //关闭弹窗停止播放的音频
        handleClosePopAudio(){
            this.globalBgMusic.stop()
        },

        //音频切换（暂时没有用到因为都是一个音频 如果后期有多个 直接在页面dom调用此方法即可）
        handleAudioChange(type){
            let temIndex=this.$store.state.report.audioData.index
            if(type=='before'){
                if(temIndex>0){
                    let index=temIndex-1
                    this.$store.commit('audio/updateAudioIndex', index)
                    this.init()
                }
            }else{
                if(temIndex<this.$store.state.report.audioData.list.length-1){
                    let index=temIndex+1
                    this.$store.commit('audio/updateAudioIndex', index)
                    this.init()
                }
            }
        },

        //拖动进度条
        handleAudioSliderChange(e){
            const value=e.detail.value
            this.globalBgMusic.seek(value)
        },

        //音频点击暂停播放
        handleChangePlayStatus(){
            if(!this.globalBgMusic.paused){
                this.globalBgMusic.pause()
            }else{
                this.globalBgMusic.play()
            }
        },

    },
}
</script>

<style>
.bot-progress{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
</style>

<style lang="scss" scoped>
.global-voice-box{
    position: fixed;
    background: #FFFFFF;
    border: 1px solid #E4E4E4;
    box-shadow: 0px 0px 40rpx rgba(50, 35, 17, 0.25);
    left: 20rpx;
    right: 20rpx;
    bottom: calc(130rpx + constant(safe-area-inset-bottom));
    bottom: calc(130rpx + env(safe-area-inset-bottom));
    z-index: 99;
    .small-box{
        padding: 18rpx 48rpx 18rpx 20rpx;
        position: relative;
        align-items: center;
        .pause-img{
            width: 60rpx;
            height: 60rpx;
            margin-right: 44rpx;
            margin-left: 30rpx;
            flex-shrink: 0;
        }
    }
    .big-box{
        padding: 33rpx 30rpx;
        .center{
            align-items: center;
            margin-top: 20rpx;
            .time{
                font-size: 24rpx;
            }
            .pause-img{
                width: 60rpx;
                height: 60rpx;
                margin-right: 34rpx;
            }
            .slider{
                flex: 1;
            }
        }
    }
}
</style>