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 相关文章推荐
用JS写的一个TableView控件代码
Jan 23 Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
jquery常用操作小结
Jul 21 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
JavaScript实现简单音乐播放器
Apr 17 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
使用数据库保存session的方法
2006/10/09 PHP
缓存技术详谈―php
2006/12/14 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
php进程间通讯实例分析
2016/07/11 PHP
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
javascript基础知识讲解
2017/01/11 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
Python 正则表达式操作指南
2009/05/04 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
python中有帮助函数吗
2020/06/19 Python
python装饰器代码深入讲解
2021/03/01 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
报表员工作失误检讨书范文
2014/09/19 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
python中subplot大小的设置步骤
2021/06/28 Python
MySQL读取JSON转换的方式
2022/03/18 MySQL