vue前端封装一个点击播放音频,同时含有倒计时的组件

clipboard.png

<div class="speech-content">
   <div class="speech-info" @click="startSpeech"> 
       <i class="iconfont icon-speech" :class="speech?'icon-yuyin':'icon-yuyin'"></i>
   </div>
   <audio :ref="audioRef" id="audio">
        <source :src="audioSrc" type="audio/mpeg" />
    </audio> 
   <span class="often-text">{{audioOftenText}}</span>
</div>

data(){
    return{
        isPlaying:false,  //判断是否处于播放状态
        speech:false,     //图标的样式
        timeid:0,       //显示剩余时长的计时器
    }
}

//获取音频列表的异步方法
getAudioList(){

}
//点击播放,再点击暂停
startSpeech(){
    let self=this;
    if(!self.isPlaying){
        self.$refs.audioRef.play();
        self.isPlaying=true;
        self.speech=true;
        self.timeid= setInterval(function(){
            self.getProcess(); 
        },1000)
    }
    else{
        self.$refs.audioRef.pause();
        self.isPlaying=false;
        self.speech=false;
        clearInterval(self.timeid);
    }
},
//获取播放时长
getProcess(){
    let self=this;
    self.audioOften=parseInt(self.$refs.audioRef.duration-self.$refs.audioRef.currentTime);  //点击后计算剩余时长。
    if(self.audioOften==0){    //播放完毕后把isPlaying 状态重置
        self.isPlaying=false;
        self.speech=false;
    }
},
mounted(){
    let self=this;
    self.$nextTick(function(){
        setTimeout(()=>{
            self.getProcess();
        },1000);
    })
}

由于每个组件在点击的时候都需要一个计时器(来获取对应组件的播放倒计时),并且点击其中一个,其他播放的暂停且计时器暂停。
在页面上写一个还可以,现在需要封装调用,该怎么封装呢。

回答:

组件computed生成个13位时间戳作唯一标志,通过判断组件实例的时间戳来进行你的操作

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注