hongze_yb_xcx/pages-report/components/audioBox.vue

<template>
    <view class="pop-audio-box">
        <view class="name">{{title}}</view>
        <view class="flex">
            <text>{{currentTime|formatVoiceTime}}</text>
            <slider
                activeColor="#e3b377"
                :max="audioTime" 
                :value="currentTime" 
                @change="handleAudioSliderChange($event)"
                block-size="16"
                class="slider"
            />
            <text>{{audioTime|formatVoiceTime}}</text>
            <image 
                class="small-img"  
                :src="play?'../static/audio-play.png':'../static/audio-pause.png'" 
                mode="aspectFill" 
                v-if="audioData.list.length==1"
                @click="handleChangePlayStatus"
            />
        </view>
        <view class="btn" v-if="audioData.list.length>1">
            <image 
                :src="audioData.index==0?'../static/audio-change-grey.png':'../static/audio-change.png'" 
                mode="aspectFill" 
                class="aside"
                @click="handleAudioChange('before')"
            />
            <image 
                :src="play?'../static/audio-play.png':'../static/audio-pause.png'" 
                mode="aspectFill" 
                class="center"
                @click="handleChangePlayStatus"
            />
            <image 
                :src="audioData.index==audioData.list.length-1?'../static/audio-change-grey.png':'../static/audio-change.png'" 
                mode="aspectFill" 
                class="aside" 
                style="transform: rotate(180deg)"
                @click="handleAudioChange('next')"
            />
        </view>
    </view>
</template>

<script>
export default {
    computed: {
        audioData(){
            return this.$store.state.report.audioData
        }
    },
    watch: {
        'audioData.list':{
            handler(nval,old){
                console.log('watch',nval,old);
                
                if(nval.length>0){
                    if(old){
                        this.init('change')
                    }else{
                        this.init()
                    }
                }
            },
            deep:true,
            immediate:true
        }
    },
    data () {
        return {
            title:'',
            audioTime:0,
            currentTime:0,
            play:false
        }
    },
    methods: {
        init(type){
            console.log('init',this.$store.state.report.audioData);
            let curAudio=this.$store.state.report.audioData.list[this.$store.state.report.audioData.index]
            if(this.globalBgMusic.src){
                console.log(this.globalBgMusic);
                console.log(type);
                if(type==='change'){
                    this.globalBgMusic.src=curAudio.video_url
                    this.globalBgMusic.title=curAudio.video_name
                }else{
                    this.currentTime=parseInt(this.globalBgMusic.currentTime)
                    this.play=!this.globalBgMusic.paused
                }
            }else{
                this.globalBgMusic.src=curAudio.video_url
                this.globalBgMusic.title=curAudio.video_name
            }
            this.title=curAudio.video_name
            this.audioTime=curAudio.video_play_seconds
            this.handleAudioFun()
        },

        // 音频事件
        handleAudioFun(){
            this.globalBgMusic.onPlay(()=>{
                this.play=true
                this.$store.commit('updateAudioPause',false)
            })
            this.globalBgMusic.onPause(()=>{
                this.play=false
                this.$store.commit('updateAudioPause',true)
            })
            this.globalBgMusic.onStop(()=>{
                this.$store.commit('removeAudio')
            })
            this.globalBgMusic.onEnded(()=>{
                console.log('onEnded');
                // this.play=false
                let index=this.$store.state.report.audioData.index
                if(index==this.$store.state.report.audioData.list.length-1){
                    this.$store.commit('removeAudio')
                }else{
                    this.handleAudioChange('next')
                }
            })
            this.globalBgMusic.onError((e)=>{
                console.log('onError',e);
                uni.showToast({
                    title: '音频播放错误',
                    icon: 'none'
                })
            })
            this.globalBgMusic.onTimeUpdate(()=>{
                // console.log('时间更新');
                this.currentTime=parseInt(this.globalBgMusic.currentTime)
            })
        },

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

        //音频切换
        handleAudioChange(type){
            let temIndex=this.$store.state.report.audioData.index
            if(type=='before'){
                if(temIndex>0){
                    let index=temIndex-1
                    this.$store.commit('updateAudioIndex', index)
                    this.init('change')
                }
            }else{
                if(temIndex<this.$store.state.report.audioData.list.length-1){
                    let index=temIndex+1
                    this.$store.commit('updateAudioIndex', index)
                    this.init('change')
                }
            }
        },

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

<style lang="scss" scoped>
.pop-audio-box{
    position: fixed;
    width: 90vw;
    min-height: 50rpx;
    left: 5vw;
    bottom: 30rpx;
    z-index: 99;
    background-color: #fff;
    border: 2px solid rgba(240, 234, 226, 0.32);
    border-radius: 8rpx;
    padding: 10rpx 15rpx;
    .name{
        text-align: center;
        font-size: 24rpx;
    }
    .flex{
        align-items: center;
        text{
            flex-shrink: 0;
            font-size: 20rpx;
        }
        .slider{
            flex: 1;
            margin: 0 20rpx;
        }
        .small-img{
            width: 36rpx;
            height: 36rpx;
            display: block;
            margin-left: 10rpx;
            flex-shrink: 0;
        }
    }
    .btn{
        display: flex;
        justify-content: center;
        align-items: center;
        image{
            display: block;
        }
        .aside{
            width: 36rpx;
            height: 36rpx;
        }
        .center{
            width: 44rpx;
            height: 44rpx;
            margin: 0 20rpx;
        }
    }
}
</style>