vue2.0实现音乐/视频播放进度条组件


            基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释，具体内容如下

需求分析：

①：进度条随着歌曲的播放延长，歌曲播放完时长度等于黑色总进度条长度；时间实时更新。

②：当滑动按钮时，实时更新播放时间，橙色进度条长度也会随着按钮的滑动而改变，当滑动结束时，橙色区域停留在滑动结束的位置，歌曲从当前进度开始播放。

③：点击进度条，橙色进度条长度变为点击处至起点的长度，并从当前点开始播放歌曲。



大概思路：

①：左边的时间可以通过audio播放时派发的timeupdate事件获取，右边的时间为接口获取的当前歌曲的总时间。

②：进度条子组件的长度通过父组件传入一个percent值计算，percent值为播放进度与总进度的比值。

③：进度条的滑动及点击结束后，需要向父组件传递一个percent值，使用this.$emit()像父组件派发事件，父组件中设置事件响应函数，接收percent参数值，用于改变audio中当前播放的音乐进度。

详细实现，关键代码已经注释：

先上组件源码：





<template> 

 <div class="progress-bar" ref="progressBar" @click="progressClick"> 

  <div class="bar-inner"> 

   <div class="progress" ref="progress"></div> 

   <div class="progress-btn-wrapper"ref="progressBtn" 

      @touchstart.prevent = "progressTouchStart" 

      @touchmove.prevent = "progressTouchMove" 

      @touchend = "progressTouchEnd" 

   > 

    <div class="progress-btn"></div> 

   </div> 

  </div> 

 </div> 

</template> 

 

<script type="text/ecmascript-6"> 

 // 进度条按钮宽度,由于style中没有设置width,因此只能用clientWidth获取 

 export default { 

  data() { 

   return { 

    btnWidth: { 

     type: Number, 

     default: 0 

    }, 

    touchInfo: { 

     initiated: false 

    } 

   } 

  }, 

  props: { 

   percent: { 

    type: Number, 

    default: 0 

   } 

  }, 

  mounted() { 

   this.btnWidth = document.getElementsByClassName('progress-btn')[0].clientWidth 

  }, 

  methods: { 

   // 点击按钮 

   progressTouchStart(e) { 

    // 记录touch事件已经初始化 

    this.touchInfo.initiated = true 

    // 点击位置 

    this.touchInfo.startX = e.touches[0].pageX 

    // 点击时进度条长度 

    this.touchInfo.left = this.$refs.progress.clientWidth 

   }, 

   // 开始移动 

   progressTouchMove(e) { 

    if (!this.touchInfo.initiated) { 

     return 

    } 

    // 计算移动距离 

    const moveX = e.touches[0].pageX - this.touchInfo.startX 

    // 设置偏移值 

    const offsetWidth = Math.min(Math.max(0, this.touchInfo.left + moveX), 

     this.$refs.progressBar.clientWidth - this.btnWidth) 

    this._setOffset(offsetWidth) 

   }, 

   // 移动结束 

   progressTouchEnd(e) { 

    this.touchInfo.initiated = false 

    // 向父组件派发事件,传递当前百分比值 

    this._triggerPercent() 

   }, 

   // 进度条点击事件 

   progressClick(e) { 

    console.log('clikc') 

    // 设置进度条及按钮偏移 

    this._setOffset(e.offsetX) 

    // 通知父组件播放进度变化 

    this._triggerPercent() 

   }, 

   _triggerPercent() { 

    const barWidth = this.$refs.progressBar.clientWidth - this.btnWidth 

    const percent = Math.min(1, this.$refs.progress.clientWidth / barWidth) 

    this.$emit('percentChange', percent) 

   }, 

   // 设置偏移 

   _setOffset(offsetWidth) { 

    // 设置进度长度随着百分比变化 

    this.$refs.progress.style.width = `${offsetWidth}px` 

    // 设置按钮随着百分比偏移 

    this.$refs.progressBtn.style.transform = `translate3d(${offsetWidth}px, 0, 0)` 

   } 

  }, 

  watch: { 

   // 监听歌曲播放百分比变化 

   percent(newPercent, oldPercent) { 

    if (newPercent > 0 && !this.touchInfo.initiated) { 

     // 进度条总长度 

     const barWidth = this.$refs.progressBar.clientWidth - this.btnWidth 

     const offsetWidth = barWidth * newPercent 

     // 设置进度条及按钮偏移 

     this._setOffset(offsetWidth) 

    } 

   } 

  } 

 } 

</script> 

 

<style lang="stylus" rel="stylesheet/stylus"> 

 @import "~common/stylus/variable.styl" 

 

 .progress-bar 

  height 0.5rem 

  .bar-inner 

   position relative 

   top 0.2rem 

   height 0.08rem 

   background rgba(0, 0, 0, 0.3) 

   .progress 

    position absolute 

    height 100% 

    background $color-theme 

   .progress-btn-wrapper 

    position absolute 

    left -0.25rem 

    top -0.25rem 

    width 0.5rem 

    height 0.5rem 

    .progress-btn 

     position relative 

     top 0.12rem 

     left 0.12rem 

     box-sizing border-box 

     width 0.32rem 

     height 0.32rem 

     border 0.06rem solid $color-text 

     border-radius 50% 

     background $color-theme 

</style> 



此为progerss-bar.vue组件源码，组件所需要父组件传入的值只有一个“percent”，为父组件中audio当前播放时间与总时间的比值，用于计算此组件中橙色进度条的长度。



组件的使用：

首先导入并注册组件（在此不做解释），随后使用此组件，dom：







<div class="progress-wrapper"> 

 <span class="time time-l">{{formatTime(currentTime)}}</span> 

 <div class="progress-bar-wrapper"> 

  <progress-bar :percent="percent" @percentChange="setProgress"></progress-bar> 

 </div> 

 <span class="time time-r">{{formatTime(currentSong.duration)}}</span> 

</div> 





解释：两个span为左右两个时间值，progress-bar为调用的组件，需要传入percent值，用于子组件设置进度条长度

percent值来自于audio的currenTime与歌曲总长度的比值：





// 计算百分比 

percent() { 

 return Math.min(1, this.currentTime / this.currentSong.duration) 

} 



@percentChange为子组件中派发过来的事件，详细请看子组件中源码及注释“_triggerPercent()”部分，此事件调用的方法用于接收子组件传过来的拖动按钮、点击进度条改变歌曲播放进度后的播放百分比，用于改变父组件中audio标签的currentTime，进而将歌曲播放进度设置为当前时间。

以下为父组件中，接收到子组件派发过来的事件后调用的函数。





// 设置进度 

  setProgress(percent) { 

   // 根据子组件传过来的百分比设置播放进度 

   this.$refs.audio.currentTime = this.currentSong.duration * percent 

   // 拖动后设置歌曲播放 

   if (!this.playing) { 

    this.togglePlaying() 

   } 

  }, 



样式（本人使用stylus）：





.progress-wrapper 

     display flex 

     .time 

      font-size 0.24rem 

      &.time-l 

       position absolute 

       bottom 1.62rem 

       left 1rem 

      &.time-r 

       position absolute 

       bottom 1.62rem 

       right 1rem 

     .progress-bar-wrapper 

      position absolute 

      bottom 1.5rem 

      left 1.7rem 

      width 4.2rem 



至此，进度条组件的实现及使用方法均介绍完毕。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。