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 相关文章推荐
实现只能输入数字的input不用replace方法
Sep 12 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
Javascript之Date对象详解
Jun 07 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
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数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
python里运用私有属性和方法总结
2019/07/08 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
Opencv求取连通区域重心实例
2020/06/04 Python
详解python中的闭包
2020/09/07 Python
python如何控制进程或者线程的个数
2020/10/16 Python
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
财务管理专业推荐信
2013/11/19 职场文书
小学老师对学生的评语
2014/12/29 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
刘胡兰观后感
2015/06/16 职场文书
世界文化遗产导游词
2019/08/07 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android