<强>前言
html5中提供音频标签,该标签实现音频的播放,之前就一直对于音频以及视频播放比较感兴趣,一直想要自己实现一个音频和视频播放的模块,这也是本文章撰写的初衷,最近花了些时间实现了音频播放控制条,从这个小的模块实现也学习到了以前没有接触到的知识。
<强>音频实现思路
浏览器原生提供的音频的样式比较简单而且不是太好看,原生提供的样式如下:
自实现的音乐播放控制条、效果如下:
该音乐播放控制条实现的功能如下:
<李>音乐播放(最基本的)
<李>多首音乐的手动切换以及自动切换实现循环播放李
<李>进度条点击播放进度的改变李
<李>进度条拖动播放进度的改变李
<李>音量点击改变李
<李>音量拖动改变
李
具体的实现效果:
下面就具体功能的实现具体展开,实现的音乐播放控制进度条主要是学习使用,没有考虑兼容性、下面主要讲解每个功能的实现思路:
<强>整体
整个音乐播放的控制底层还是采用浏览器音频标签来实现,调用音频api来实现整体的功能,下面是当前控制条的html结构:
& lt; div类=耙羝怠北?
& lt; audio> & lt;/audio>
& lt; div类=耙羝悼刂破鳌北?
& lt;跨类=" audio-prev "祝辞& lt;/span>
& lt;跨类="音频栈"祝辞& lt;/span>
& lt;跨类=" audio-next "祝辞& lt;/span>
& lt;/div>
& lt; div类=癮udio-bar”比;
& lt;跨类=" audio-time-current "祝辞& lt;/span>
& lt; div类=癮udio-progress”比;
& lt; div>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt;/div>
& lt;/div>
& lt;跨类=" audio-time-duration "祝辞& lt;/span>
& lt;/div>
& lt; div类=耙袅俊北?
& lt;跨类=" audio-volume-icon "祝辞& lt;/span>
& lt; div类=癮udio-volume-adjust”比;
& lt; div>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
之前
音频控制器:是控制播放以及切换歌曲的区域
audio-bar:是时间以及歌曲进度的区域
音量:是音量调节的区域
<强>播放区域
该区域实现音乐的播放,暂停,切换(上一首,下一首),这部分其实没有什么需要讲解的,实际上就是音频api中打(),暂停()来实现播放与暂停的,歌曲的切换就是数组元素的改变,修改src地址而已。
<强>进度区域
该区域是整个模块中核心的部分,该区域主要的功能点是:
首先进度实现,思路是:
//最外层作为进度条暗的长度区域
& lt; div>//最内层是实际表示进度
& lt; div> & lt;/div>
& lt;/div>
之前
2。当点击进度条,获取鼠标点击该点的相对于最近的父类元素的x轴方向的偏移量
3.偏移量就是内层div的实际宽度,设置背景色
4.左滑块的位置是设置的值,但是左边的值是:偏移量——滑块宽度/2
滑动的实现,在该模块编写中没有采用html5中的拖放api,而是采用mousedown, mousemove, mouseup来实现的,具体
实现代码:
//滑动效果
酒吧。addEventListener (mousedown,函数(e) {
e.stopPropagation ();//获取滑块被选择时相对文档的初始X轴值
选项。clientX=e.clientX;//偏移量
选项。左=this.offsetLeft;
选项。max=bgNode。offsetWidth——这一点。offsetWidth/2;
选项。isDrag=true;
});
文档。addEventListener (mousemove,函数(e) {
e.stopPropagation ();
如果(options.isDrag) {
让currentClientX=e.clientX,
左=options.left,
max=options.max,
initClientX=options.clientX,
barHalfWidth=酒吧。offsetWidth/2,
fgWidth=0,//设置要滑动到的位置点(x轴方向偏移量)=数学。马克斯(0,数学。最小(最大,左+ (currentClientX - initClientX)));
bar.style。左=+“px”;
如果(在barHalfWidth) {
fgWidth=+ barHalfWidth;
}
fgNode.style。宽度=数学。马克斯(0,fgWidth) +“px”;
选项。offsetX=数学。马克斯(0,fgWidth);
}
});
bgNode.parentNode。addEventListener (mouseup,函数(e) {
e.stopPropagation ();
如果(options.isDrag) {//绘制此时的进度
tools.timeUpdateOrVolumeUpdate(选项。offsetX类型);
选项。isDrag=false;
}
});
