前言
html5中提供audio标签,该标签实现音频的播放,之前就一直对于音频以及视频播放比较感兴趣,一直想要自己实现一个音频和视频播放的模块,这也是本文章撰写的初衷,最近花了些时间实现了Audio播放控制条,从这个小的模块实现也学习到了以前没有接触到的知识。
Audio实现思路
浏览器原生提供的audio的样式比较简单而且不是太好看,原生提供的样式如下:
自实现的音乐播放控制条,效果如下:
该音乐播放控制条实现的功能如下:
- 音乐播放(最基本的)
- 多首音乐的手动切换以及自动切换实现循环播放
- 进度条点击播放进度的改变
- 进度条拖动播放进度的改变
- 音量点击改变
- 音量拖动改变
具体的实现效果:
下面就具体功能的实现具体展开,实现的音乐播放控制进度条主要是学习使用,没有考虑兼容性,下面主要讲解每个功能的实现思路:
整体
整个音乐播放的控制底层还是采用浏览器audio标签来实现,调用audio api来实现整体的功能,下面是当前控制条的html结构:
dio">
@L_502_0@,该模块日后还需要进行改进。
原文链接:https://www.f2er.com/js/36551.html