美文网首页
vue-audio-player 组件续播功能

vue-audio-player 组件续播功能

作者: 小睿同学 | 来源:发表于2020-10-27 10:14 被阅读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~

    相关文章

      网友评论

          本文标题:vue-audio-player 组件续播功能

          本文链接:https://www.haomeiwen.com/subject/xlczpktx.html