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函数
Sep 08 Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
angular.bind使用心得
Oct 26 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 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模板页面中分页代码的解析
2009/02/06 PHP
PHP 面向对象实现代码
2009/11/11 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
内部类的定义、种类以及优点
2013/10/16 面试题
会计工作决心书
2014/03/11 职场文书
业务员自荐信范文
2014/04/20 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
机器人瓦力观后感
2015/06/12 职场文书
圣诞晚会主持词
2015/07/01 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
nginx容器方式反向代理实战
2022/04/18 Servers