<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);
})
} because each component needs a timer when it is clicked (to get the playback countdown of the corresponding component), and click on one of them, the other playback pauses and the timer pauses.
it"s OK to write one on the page, now you need to encapsulate the call, how to encapsulate it.