js实现音乐播放器中点击歌名切歌

JavaScript010

js实现音乐播放器中点击歌名切歌,第1张

1、支持循环、随机播放

2、在播放的同时支持图片的旋转

3、支持点击进度条调整播放的位置,以及调整音量

4、显示音乐的播放时间

5、支持切歌:

以 B 站的播放页面为例,分析 H5 播放器常具备的功能:

该播放器容器内部包含两部分,分别是媒体播放区域和控件区域,其中控件浮动在容器的底部。

控件区域又由上方的进度条和下方的控件组构成。进度条可以包括两层 DIV,一层作为底部背景,一层位于背景之上,作为实际的进度显示。控件组的布局左边浮动 “播放/暂停” 按钮,“时长” 信息,右边浮动 “音量、“倍速”、“全屏” 按钮。

接下来就需要为各个控件按钮添加对应的事件行为