播放区域

该区域实现音乐的播放、暂停、切换（上一首、下一首）,这部分其实没有什么需要讲解的，实际上就是audio api中play()、pause()来实现播放与暂停的，歌曲的切换就是数组元素的改变，修改src地址而已。

进度区域

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

首先进度实现，思路是：

// 最外层作为进度条暗的长度区域<p> // 最内层是实际表示进度
 <p></p>
</p>

滑动的实现，在该模块编写中没有采用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的值来实现的

进度实际就是p的宽度来显示的，动态的改变width的值以及滑块的left值来实现进度效果

这里需要注意的是：

实际上这也非常好计算：

比例：width / duration
指定时间的宽度：(width / duration) * currentTime

音量调节的实现与进度相似，主要是改变volume的实现。

下面就说说该模块中存在的问题：

代码会上传到我的Github，该模块日后还需要进行改进。