js实现音乐播放控制条


Posted in Javascript onSeptember 09, 2017

前言

html5中提供audio标签, 该标签实现音频的播放,之前就一直对于音频以及视频播放比较感兴趣,一直想要自己实现一个音频和视频播放的模块,这也是本文章撰写的初衷,最近花了些时间实现了Audio播放控制条,从这个小的模块实现也学习到了以前没有接触到的知识。

Audio实现思路

浏览器原生提供的audio的样式比较简单而且不是太好看,原生提供的样式如下:

js实现音乐播放控制条

自实现的音乐播放控制条, 效果如下:

js实现音乐播放控制条

该音乐播放控制条实现的功能如下:

  • 音乐播放(最基本的)
  • 多首音乐的手动切换以及自动切换实现循环播放
  • 进度条点击播放进度的改变
  • 进度条拖动播放进度的改变
  • 音量点击改变
  • 音量拖动改变

具体的实现效果:

js实现音乐播放控制条

下面就具体功能的实现具体展开,实现的音乐播放控制进度条主要是学习使用,没有考虑兼容性,下面主要讲解每个功能的实现思路:

整体

整个音乐播放的控制底层还是采用浏览器audio标签来实现,调用audio api来实现整体的功能,下面是当前控制条的html结构:

<div class="audio">
 <audio></audio>
 <div class="audio-controller">
 <span class="audio-prev"></span>
 <span class="audio-state"></span>
 <span class="audio-next"></span>
 </div>
 <div class="audio-bar">
 <span class="audio-time-current"></span>
 <div class="audio-progress">
  <div>
  <div></div>
  <div></div>
  </div>
  </div>
 <span class="audio-time-duration"></span>
 </div>
 <div class="audio-volume">
 <span class="audio-volume-icon"></span>
 <div class="audio-volume-adjust">
  <div>
  <div></div>
  <div></div>
  </div>
 </div>
 </div>
</div>

audio-controller:是控制播放以及切换歌曲的区域
audio-bar:是时间以及歌曲进度的区域
audio-volume:是音量调节的区域

播放区域

该区域实现音乐的播放、暂停、切换(上一首、下一首),这部分其实没有什么需要讲解的,实际上就是audio api中play()、pause()来实现播放与暂停的,歌曲的切换就是数组元素的改变,修改src地址而已。

进度区域

该区域是整个模块中核心的部分,该区域主要的功能点是:

  • 进度效果实现
  • 滑动效果实现

首先进度实现,思路是:

1.进度条有两个div构成:

// 最外层作为进度条暗的长度区域
<div>
 // 最内层是实际表示进度
 <div></div>
</div>

js实现音乐播放控制条

2.当点击进度条,获取鼠标点击该点的相对于最近的父类元素的x轴方向的偏移量
3.偏移量就是内层div的实际宽度,设置背景色
4.滑块的位置是设置left的值,但是left的值是:偏移量-滑块宽度/2

滑动的实现,在该模块编写中没有采用html5中的拖放api,而是采用mousedown、mousemove、mouseup来实现的,具体

实现代码:

// 滑动效果
 bar.addEventListener('mousedown', function(e) {
 e.stopPropagation();
 // 获取滑块被选择时相对文档的初始X轴值
 options.clientX = e.clientX;
 // 偏移量
 options.left = this.offsetLeft;
 options.max = bgNode.offsetWidth - this.offsetWidth / 2;
 options.isDrag = true;
 });
 document.addEventListener('mousemove', function(e) {
 e.stopPropagation();
 if (options.isDrag) {
  let currentClientX = e.clientX,
  left = options.left,
  max = options.max,
  initClientX = options.clientX,
  barHalfWidth = bar.offsetWidth / 2,
  fgWidth = 0,
  // 设置要滑动到的位置点(x轴方向偏移量)
  to = Math.max(0, Math.min(max, left + (currentClientX - initClientX)));

  bar.style.left = to + 'px';
  if (to > barHalfWidth) {
  fgWidth = to + barHalfWidth;
  }
  fgNode.style.width = Math.max(0, fgWidth) + 'px';
  options.offsetX = Math.max(0, fgWidth);
 }
 });

 bgNode.parentNode.addEventListener('mouseup', function(e) {
 e.stopPropagation();
 if (options.isDrag) {
  // 绘制此时的进度
  tools.timeUpdateOrVolumeUpdate(options.offsetX, type);
  options.isDrag = false;
 }
 });

简单来说就是:

mousemove时获取当前鼠标在文档中的X轴方向位置 - 初始位置 + 元素最初的偏移量,动态改变left的值来实现的

进度实际就是div的宽度来显示的,动态的改变width的值以及滑块的left值来实现进度效果

这里需要注意的是:

当前进度条总宽度与音频总时间之间的比例关系,从而计算不同音频时间点对应的进度的长度,这是基础

实际上这也非常好计算:

比例:width / duration
指定时间的宽度:(width / duration) * currentTime

音量调节的实现与进度相似,主要是改变volume的实现。

下面就说说该模块中存在的问题:

滑块效果有时不够自然顺畅
音频文件时间的处理不够好
开始时进度部分不是太好

代码会上传到我的Github,该模块日后还需要进行改进。

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

Javascript 相关文章推荐
一种JavaScript的设计模式
Nov 22 Javascript
认识延迟时间为0的setTimeout
May 16 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
js如何打印object对象
Oct 16 Javascript
理解javascript中DOM事件
Dec 25 Javascript
实例浅析js的this
Dec 11 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
vue组件入门知识全梳理
Sep 21 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 #Javascript
详解vue2 $watch要注意的问题
Sep 08 #Javascript
Express + Session 实现登录验证功能
Sep 08 #Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 #Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 #jQuery
JavaScript实现开关等效果
Sep 08 #Javascript
浅谈React Native 中组件的生命周期
Sep 08 #Javascript
You might like
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
PDO的安全处理与事物处理方法
2016/10/31 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
自制PHP框架之设计模式
2017/05/07 PHP
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
js简易版购物车功能
2017/06/17 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
Python、Javascript中的闭包比较
2015/02/04 Python
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
python开发之thread线程基础实例入门
2015/11/11 Python
使用python实现生成用户信息
2017/03/20 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
python递归法解决棋盘分割问题
2019/07/17 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
如何使用Python调整图像大小
2020/09/26 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
实习心得体会
2014/01/02 职场文书
单位单身证明范本
2014/01/11 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
工作检讨书500字
2014/10/19 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript