js实现音乐播放控制
前言音频HTML5标签，播放音频和视频的标签，之前它一直在播放音频和视频的兴趣，一直想完成一个音频和视频播放模块，这也是本文写作的初衷，最近花了一些时间来实现语音控制，也可以在不从这个小模块获取知识。
音频的实现
最初由浏览器提供的音频样式更简单，更具吸引力，其原始风格如下：
自己实现的音乐播放控制栏，效果如下：
音乐播放控制栏的功能如下：
音乐演奏（最基本）
多音乐手动切换与自动切换实现循环播放
进度条点击播放进度
进度条拖动更改
点击改变量
体积阻力变化
具体实现效果：
以下是具体功能的实现。音乐播放控制进度条的实现主要是学习和使用，不考虑兼容性。
整个
整个音乐播放控制层由浏览器音频标记实现，调用音频API实现整个功能。下面是当前控件栏的HTML结构。
音频控制器：是控制播放和切换歌曲的区域。
音频栏：时间的领域和歌曲的进展
音量音量调节区
播放地区
音乐播放，暂停，切换到实现区域（下一步），这部分不是需要解释的，实际上是音频API（播放），暂停（）播放和暂停，歌曲是切换数组元素变化，修改SRC地址。
发展区
该区域是整个模块的核心部分，该区域的主要功能点是：
进步效果的实现
滑动效应的实现
首先，这个想法是：
1。进度条由两个div组件组成：
作为最外层/暗区长度的进展
内层是实际的时间表；
2。当单击进度条时，从鼠标最近的父轴的x轴方向上点击鼠标的偏移量。
3。偏移量是内层div的实际宽度，设置背景色。
4位。滑块是用来设置左边的值，但是左边的值是：偏移量滑块宽度 2。
实施滑动，在模块的程序没有使用HTML5的拖放API，而是利用MouseDown、MouseMove、MouseUp来实现的，具体的
实现代码：
滑动效应
Bar.addEventListener（'mousedown功能（e）{
e.stoppropagation（）；
为了获得初始的x轴/轴滑块，选择了文档的相对值。
options.clientx = e.clientx；
偏移量
options.left = this.offsetleft；
options.max = bgnode.offsetwidth - this.offsetwidth / 2；
options.isdrag =真；
}）；
Document.addEventListener（'mousemove功能（e）{
e.stoppropagation（）；
如果（选项。isdrag）{
让currentclientx = e.clientx，
左= options.left，
马克斯= options.max，
initclientx = options.clientx，
barhalfwidth = bar.offsetwidth / 2，
fgwidth = 0，
点设置为幻灯片/幻灯片（X轴偏移）
= math.max（0，Math.min（Max，左+（currentclientx - initclientx））））；
bar.style.left = + 'px；
如果（barhalfwidth）{
fgwidth = + barhalfwidth；
}
fgnode.style.width = math.max（0，fgwidth）+ 'px；
options.offsetx = math.max（0，fgwidth）；
}
}）；
BgNode.parentNode.addEventListener（'mouseup功能（e）{
e.stoppropagation（）；
如果（选项。isdrag）{
进度表/绘图
tools.timeupdateorvolumeupdate（options.offsetx，型）；
options.isdrag = false；
}
}）；
简单地说，它是：
MouseMove获取当前鼠标的X轴位置的初始位置+元素的初始偏移文件，动态改变左的价值实现
进度实际上是通过div的宽度来显示的，动态地改变滑块的宽度和左边的值来达到进度的效果。
这里需要注意的是：
当前进度条的总宽度与总音频时间之间的比率关系，从而计算与不同音频时间点对应的调度的长度，这是基础。
事实上，它计算得很好。
比例：宽度/持续时间
在指定时间的宽度（宽度/时间）*时间
音量调节的实现类似于日程安排，主要是改变音量的执行。
下面是模块中的问题：
滑块的效果有时不自然流畅。
音频文件的时间处理不好。
起初，进展不太顺利。
该代码将被上传到我的GitHub，模块后当天还需要改进。
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。