欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-15 10:48:11
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释,具体内容如下 需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度;时间实时更新...

基于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 

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

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