vue-audio-player 组件续播功能
2020-10-27 本文已影响0人
小睿同学
在原有的基础上,添加location,Continuation
props: {
location: {
default: 0,
type: Number
}
},
data() {
return {
continuation:true //是否续播
}
},
在组件里,新增setProgressBarPoint方法(续播)
setProgressBarPoint(currentTime) {
// 设置当前时间
this.currentTime = currentTime
let pageX =
this.$refs.audioProgressWrap.offsetWidth *
(currentTime / this.$refs.audio.duration)
+this.$refs.audioProgressWrap.offsetLeft
// 设置播放位置
this.$refs.audio.currentTime = this.currentTime
this.setPointPosition(pageX)
// 设置进度条
this.$refs.audioProgress.style.width =
pageX - this.$refs.audioProgressWrap.offsetLeft + 'px'
// 设置当前时间(格式化后)
this.currentTimeAfterFormat = this.formatTime(this.currentTime)
this.continuation = false //
},
在play方法里通过continuation判断是否续播
play() {
let playHandler = () => {
this.$refs.audio.play()
this.$nextTick(() => {
//this.continuation = true 执行setProgressBarPoint方法,
//否则执行原有的initProgressBarPoint方法
if(this.continuation === true){
this.setProgressBarPoint(this.location)
}
this.playing()
this.timer = setInterval(this.playing, this.progressInterval)
this.isPlaying = true
this.$emit('play')
})
}
在调用的时候,原有基础上在传入location(上次音频播放的位置)的值
<AudioPlayer ref="auPlayer" @timeupdate="updateTime" :location="progress"
:audio-list="audioList" :before-play="onBeforePlay" v-on:pause="pause"
v-on:ended="ended" v-on:play="play"/>