js实现音乐播放控制栏

序

Html5提供了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 class=' Audio-bar ' span class=' Audio-time-current '/span Div class=' Audio-progress ' Div/Div/Div/span class=' Audio-time-duration '/span/Div class=' audiv-volume ' span class=' Audio-volume-volume-icon/

游戏区

该区域实现音乐(前一首歌和下一首歌)的播放、暂停和切换。其实也没什么好解释的。实际上，是音频api中的play()和pause()实现了播放和暂停。歌曲的切换只是数组元素的改变和src地址的修改。

进展领域

该区域是整个模块的核心部分，其主要功能点有：

进度效果实现滑动效果实现首先进度实现，思路是：

1.进度条由两个div组成：

//最外层是进度条的暗长区域div//最内层是实际进度div/div/div

2.单击进度条时，获取鼠标单击的点相对于最近的父元素在X轴方向上的偏移。3.偏移量是内部div的实际宽度，并设置背景颜色。4.滑块的位置设置为左值，但左值为：偏移-滑块宽度/2

滑动的实现是通过mousedown、mousemove和mouseup来实现的，而不是html5中的拖放api。具体来说，

实现代码：

//滑动效果栏。addeventlistener ('mousedown '，函数(e){ e . stopperpagation()；//当选择滑块时，获取相对于文档的x轴初始值options . client x=e . client x；//偏移选项。左=这个。offsetlefoptions . max=bgnode . offset with-this . offset with/2；options.isDrag=true});document . addeventlistener(' mouse move '，函数(e){ e . stopperpagation()；if(options . is drag){ let current clienttx=e . clientx，left=options.left，max=options.max，initClientX=options.clientX，Barhalf width=bar。offset withts/2，fgwidth=0，//将滑动到的位置点(X轴方向的偏移量)设置为=math.max (0，math.min (max，left(当前client X-init client X)))；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 . parent node . addeventlistener(' mouse up ')，函数(e){ e . stopperpagation()；If (options.isDrag) {//此时绘制进度tools . timeupdateorvolumeupdate(options . offsetx，type)；options.isDrag=false} });简单地说：

使用mousemove时，通过获取当前鼠标在文档中的X轴位置——初始位置元素的初始偏移量，动态改变left的值来实现

进度实际上是通过div的宽度来显示的，进度效果是通过动态改变宽度的值和滑块的左值来实现的

这里应该注意的是：

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

事实上，这也很容易计算：

比例：宽度/持续时间指定时间的宽度：(宽度/持续时间)*当前时间

音量调节的实现类似于进度，主要是改变音量的实现。

让我们谈谈本模块中的问题：

有时候滑块效果并不自然流畅。音频文件的处理时间不够好。进度部分一开始不是很好

代码会上传到我的Github，以后模块需要改进。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。