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
Mar 07 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
JS定时关闭窗口的实例
May 22 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 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
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
PHP分页显示制作详细讲解
2006/12/05 PHP
php实现paypal 授权登录
2015/05/28 PHP
破解Session cookie的方法
2006/07/28 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
Python操作SQLite简明教程
2014/07/10 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
python flask实现分页的示例代码
2018/08/02 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
对python中dict和json的区别详解
2018/12/18 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
python文件编写好后如何实践
2020/07/07 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
《陋室铭》教学反思
2014/02/26 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
法人代表资格证明书
2015/06/18 职场文书
公司员工管理制度
2015/08/04 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL