美文网首页
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 组件续播功能

    在原有的基础上,添加location,Continuation 在组件里,新增setProgressBarPoin...

  • 续播

    经过点拨,我明白了,其实是我担心儿子像我小时候一样被排斥。就这样,我小时候遗忘的小事情慢慢苏醒了一部分,我看...

  • 3面向对象实战

    参考:tab组件229曝光组件187轮播组件172轮播二次封装154 我的: 1: 封装一个轮播组件 http:/...

  • 组件化-动态库实战【续】

    组件化-动态库实战【续】 组件化-动态库实战【续】

  • 组件化

    组件构成 基础组件(分类) 功能组件 业务组件 (骨架) 创建私有库

  • Flutter Provider

    InheritedWidget 组件是功能型组件,提供了沿树向下,共享数据的功能,即子组件可以获取父组件(Inhe...

  • element 表格组件内部添加expand

    功能:个别页面需要添加expand功能,传入数据进行操作,完善table组件 (由于table组件是公用组件,避免...

  • 组件化之路—集成组件SDK

    介绍 组件化的前提是要有基础组件、功能组件、业务组件这三大块。其中基础组件和功能组件都可以做成SDK,可以供其他A...

  • 【Android组件开发】组件化简介

    组件:指的是单一的功能组件,如视频组件(VideoSDK)、支付组件(PaySDK)、路由组件(Router)等。...

  • 浅析直播APP开发流程

    用户角色: 外部用户: 主播:使用主播间部分功能。 用户:使用主播间部分功能 内部用户 房间管理员:使用后台各项数...

网友评论

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

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