基于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.btnWidthconst 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.btnWidthconst offsetWidth = barWidth * newPercent// 设置进度条及按钮偏移this._setOffset(offsetWidth)}}}}
</script><style lang="stylus" rel="stylesheet/stylus">@import "~common/stylus/variable.styl".progress-barheight 0.5rem.bar-innerposition relativetop 0.2remheight 0.08rembackground rgba(0, 0, 0, 0.3).progressposition absoluteheight 100%background $color-theme.progress-btn-wrapperposition absoluteleft -0.25remtop -0.25remwidth 0.5remheight 0.5rem.progress-btnposition relativetop 0.12remleft 0.12rembox-sizing border-boxwidth 0.32remheight 0.32remborder 0.06rem solid $color-textborder-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-wrapperdisplay flex.timefont-size 0.24rem&.time-lposition absolutebottom 1.62remleft 1rem&.time-rposition absolutebottom 1.62remright 1rem.progress-bar-wrapperposition absolutebottom 1.5remleft 1.7remwidth 4.2rem

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

基于vue2.0实现音乐/视频播放进度条组件的思路及具体实现方法+代码解释相关推荐

基于Vue的事件响应式进度条组件
写在前面找了很多vue进度条组件,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和兼容 ...
vue-amap - 基于Vue2.0和高德地图的地图组件
为什么80%的码农都做不了架构师?>>> Github:ElemeFE/vue-amap 文档: vue-amap 前言在做基于LBS的应用中,时常会和地图打交道,最直接的解 ...
基于vue2.0以及better-scroll实现scroll滑动组件及所实现组件的应用例子
直接上源码: 组件:scroll.vue,需要先npm install better-scroll <template><div ref="wrapper"> ...
基于 Vue2.0 的移动端 / PC 端验证码输入组件.
vue-input-code 基于Vue2.0的移动端验证码输入组件. 功能预览输入回调完成回调自定义验证码个数样式可控这里是可爱的Demo 支持支持 Vue.js 2.0+. 安装和使用 ...
element upload预览_vue2.0 使用element-ui里的upload组件实现图片预览效果方法
1.首先我们在cli中引入element-ui 2.然后在具体的代码中放入uoload组件点击上传只能上传jpg/png文件,且不超过500kb 3.使用element-ui的upload组件中提 ...
Vue2.0+SVG实现音乐播放圆形进度条组件，传入实时百分比实现圆圈进度动画效果
vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果需求分析: 类似于大多数音乐播放器中等mini播放器控制按钮,显示播放进度,实时更新进度. progress-cir ...
Android自定义View,Android炫酷的音乐频谱进度条,变化自如的音乐进度条
前段时间,公司项目有个UI需求,要做一个这么的东西 : 一个仿音乐频率谱线进度条(这是什么鬼?),那好,就先将这个控件命名为:音乐频谱进度条:) 废话不多说,先来看一下效果图: 附上在GitHub上的 ...
基于vue2.0+ 抽奖项目
前言临近年关抽奖活动,基于vue2.0+开发的抽奖项目. 便于查看效果,贴上相关地址: 在线示例地址:快速访问 github地址:查看源码简介基于vue.js抽奖项目,截屏保存每次抽奖图片至本地 ...
android自定义seekbar,Android自定义SeekBar实现视频播放进度条
本文实例为大家分享了Android实现视频播放进度条的具体代码,供大家参考,具体内容如下首先来看一下效果图,如下所示: 其中进度条如下: 接下来说一说我的思路,上面的进度拖动条有自定义的Thumb, ...

基于vue2.0实现音乐/视频播放进度条组件的思路及具体实现方法+代码解释

基于vue2.0实现音乐/视频播放进度条组件的思路及具体实现方法+代码解释相关推荐

最新文章

热门文章