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


Posted in Javascript onJune 06, 2018

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

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

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

Javascript 相关文章推荐
轻轻松松学习JavaScript
Feb 25 Javascript
一个符号插入器 中用到的js代码
Sep 04 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
js模拟点击事件实现代码
Nov 06 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
vue实现简单loading进度条
Jun 06 #Javascript
security.js实现的RSA加密功能示例
Jun 06 #Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 #Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 #Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 #Javascript
详解创建自定义的Angular Schematics
Jun 06 #Javascript
vue组件实现进度条效果
Jun 06 #Javascript
You might like
深入分析php之面向对象
2013/05/15 PHP
php算法实例分享
2015/07/14 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
python登陆asp网站页面的实现代码
2015/01/14 Python
详解Django中的权限和组以及消息
2015/07/23 Python
python中reader的next用法
2018/07/24 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
调解协议书
2014/04/16 职场文书
房地产广告策划方案
2014/05/15 职场文书
专科生就业求职信
2014/06/22 职场文书
客户答谢会活动方案
2014/08/31 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
先进典型事迹材料
2014/12/29 职场文书
法院个人总结
2015/03/03 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers