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
至此,进度条组件的实现及使用方法均介绍完毕。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Vue多系统切换实现方案
推荐阅读
-
Android自定义SeekBar实现视频播放进度条
-
Android实现音乐播放进度条传递信息的两种方式(在service和activity中)
-
vue2.0实现音乐/视频播放进度条组件
-
使用Service组件实现简单的音乐播放器功能 --Android基础
-
PPT2003使用触发器实现在音乐或视频播放过程中进行控制
-
基于vue-element组件实现音乐播放器功能
-
Android实现音乐视频播放
-
Android 入门第九讲02-视频(本地视频播放,暂停,获取播放时间,重新播放,播放到指定位置,MediaController类(实现进度条,快进,播放暂停),播放网络视频)
-
Android自定义SeekBar实现视频播放进度条
-
Android实现音乐播放进度条传递信息的两种方式(在service和activity中)