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案例分享之金额小写转大写
May 15 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
QT与javascript交互数据的实现
May 26 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面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
javascript控制台详解
2015/06/25 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
python在控制台输出进度条的方法
2015/06/20 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
python修改文件内容的3种方法详解
2019/11/15 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
python绘制彩虹图
2019/12/16 Python
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
自荐信结尾
2013/10/27 职场文书
思想政治教育专业个人求职信范文
2013/12/20 职场文书
长辈证婚人证婚词
2014/01/09 职场文书
项目建议书范文
2014/05/12 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
导游词开场白
2015/01/31 职场文书
刘公岛导游词
2015/02/05 职场文书
天堂的孩子观后感
2015/06/11 职场文书
导游词之阆中古城
2019/12/23 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL