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 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
HTML颜色选择器实现代码
Nov 23 Javascript
jquery offset函数应用实例
Nov 14 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
JS与C#编码解码
Dec 03 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
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版(3)
2006/10/09 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
php GUID生成函数和类
2014/03/10 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
深入浅析python定时杀进程
2016/06/06 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
印度购物网站:TATA CLiQ
2017/11/23 全球购物
装修设计师求职信
2014/02/26 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
实名检举信范文
2015/03/02 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python
redis protocol通信协议及使用详解
2022/07/15 Redis