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"/>
OK,就这样,End~
上一篇下一篇

猜你喜欢

热点阅读