vue怎么实现音乐/视频播放进度条组件

这篇文章主要介绍“vue怎么实现音乐/视频播放进度条组件”，在日常操作中，相信很多人在vue怎么实现音乐/视频播放进度条组件问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue怎么实现音乐/视频播放进度条组件”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

需求分析：

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

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

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

大概思路：

①：左边的时间可以通过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

到此，关于“vue怎么实现音乐/视频播放进度条组件”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！