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

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

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

需求分析：

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

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

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

大概思路：

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

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

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

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

先上组件源码：

@touchstart.prevent = "progressTouchStart"

@touchmove.prevent = "progressTouchMove"

@touchend = "progressTouchEnd"

>

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

组件的使用：

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

{{formatTime(currentTime)}}

{{formatTime(currentSong.duration)}}

解释：两个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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。