vue.js实现点击、拖动进度条播放歌曲事件

进度条可参考本人已写的进度条链接：vue.js实现歌曲播放进度条

效果图：

vue.js实现点击、拖动进度条播放歌曲事件

进度条：

<audio ref="player" autoplay ></audio>

<div class="bar">
    <div class="progressbar" @click="playMusic" ref="runfatbar">
    <div class="greenbar" ref="runbar" >
    <span class="yuan"></span>
    </div>
    </div>
</div>

逻辑实现：

mounted () {
    const music = this.$refs.player  // 音频所在对象
    const musicBar = this.$refs.runbar  // 颜色进度条所在对象
    const musicWidth = this.$refs.runfatbar.offsetWidth // 底部进度条总宽
    
// 监听颜色进度条是否触摸拖动
    musicBar.addEventListener('touchmove', (event) => {
      const events = event.targetTouches[0].pageX // 获得触摸拖动的距离
      if(events <= musicWidth) {
        musicBar.style.width = `${(events / musicWidth) * 100}%` // 计算进度条所在比例宽度
        
        //改变播放状态
        music.pause() // 触摸拖动时停止播放
        //改变播放状态图标
        this.$refs.icon.innerHTML = ("&#xe634;");
      }
    })

// 监听颜色进度条是否触摸拖动结束
    musicBar.addEventListener('touchend', () => {
      const touwidth = (musicBar.offsetWidth / musicWidth) // 计算进度条所在比例
      music.currentTime = music.duration * touwidth // 通过所在比例赋值给音频应在的播放时
        
        // 改变播放状态，进行播放
        music.play()
        this.$refs.icon.innerHTML = ("&#xe6ad;");

      if(touwidth < musicWidth) {
        music.play() // 根据播放时间开始播放
        // 更改播放暂停按钮为播放
        this.$refs.icon.innerHTML = ("&#xe6ad;");
      }else if(touwidth >= musicWidth) {
        music.pause() // 触摸拖动时停止播放
        this.$refs.icon.innerHTML = ("&#xe634;");
      }
    })
  },