使用HTML5实现网页音乐播放器的案例

　　介绍

使用HTML5实现网页音乐播放器的案例?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

具体如下:

<强> 1功能介绍

HTML5中推出了音视频标签,可以让我们不借助其他插件就可以直接播放音视频。下面我们就利用H5的音频标签及其相关属性和方法来制作一个简单的音乐播放器。主要包括以下几个功能:

1,播放暂停,上一首和下一首

2,调整音量和播放进度条

3,根据列表切换当前歌曲

先来看一下最终的完成效果:

使用HTML5实现网页音乐播放器的案例

这个音乐播放器的结构主要分为三部分:歌曲信息,播放器和播放列表,我们重点介绍一下播放器部分,首先在播放器中放三个音频标签用于播放:

& lt;音频id=癿usic1"在浏览器不支持音频标签 　　& lt;源src=https://www.yisu.com/zixun/泵教?超越-光辉岁月。mp3”> 　　 　　<音频id=" music2 ">浏览器不支持音频标签 　　<源src="媒体/丹尼尔波特-自由Loop.mp3 "> 　　 　　<音频id=" music3 ">浏览器不支持音频标签 　　<源src="媒体/周杰伦,费玉清——千里之外。mp3”> 　　

下面的播放列表也对应三个音频标签:

& lt; p id=皃layList"比; 　　& lt; ul> 　　李& lt; id=癿0"祝辞之外——光辉岁月& lt;/li> 　　李& lt; id=癿1"祝辞丹尼尔Powter-Free Loop 　　李& lt; id=癿2"祝辞周杰伦,费玉清——千里之外& lt;/li> 　　& lt;/ul> 　　& lt;/p>

接下来我们就开始逐步实现上面提到的功能吧,先来完成播放和暂停功能,在按下播放按钮时我们要做到进度条随歌曲进度前进,播放时间也逐渐增加,同时播放按钮变成暂停按钮,播放列表的样式也对应改变。

在做功能之前我们要先把三个音频标签获取身份证后存到一个数组中,供后续使用。

 var music1=. getelementbyid (“music1");
　　var music2=. getelementbyid (“music2");
　　var music3=. getelementbyid (“music3");
　　var mList=[music1、music2 music3];

<强> 2播放和暂停:

我们现在就可以完成播放按钮的功能啦,首先设置一个标志,用来标记音乐的播放状态,再为数组的索引指数设置一个默认值:

然后对播放状态进行判断,调用对应的函数,并修改旗的值和列表对应项目样式:

函数playMusic () {
　　如果(flag&, mList[指数].paused) {
　　(指数)mList .play ();
　　. getelementbyid (“m" +指数).style。写成backgroundColor=? A71307";
　　. getelementbyid (“m" +指数).style。颜色=皐hite";
　　progressBar ();
　　游戏();
　　play.style。backgroundImage=皍rl(媒体/pause.png)“;
　　国旗=false;
　　其他}{
　　(指数)mList .pause ();
　　国旗=true;
　　play.style。backgroundImage=皍rl(媒体/play.png)“;
　　}
　　}

上面的代码中调用了多个函数,其中播放和暂停是音频标签自带的方法,而其他的函数则是我们自己定义的。下面我们就来看一下这些函数是怎么实现的,又对应了哪些功能吧。

<强> 3进度条和播放时间:

首先是进度条功能,获取歌曲的全部时长,然后再根据当前播放的进度与进度条总长度相乘计算出进度条的位置。

函数progressBar () {
　　var披散下来=mList .duration(指数);
　　timer1=setInterval(函数(){
　　坏蛋=mList(指数).currentTime;//获取当前的播放时间
　　progress.style.width=?“+ parseFloat (cur/长度)* 300 +“px";
　　progressBtn.style。左=60 + parseFloat (cur/长度)* 300 +“px";
　　},10)
　　}

下面是改变播放时间功能,这里我们设置一个定时函数,每隔一段时间来执行一次以改变播放时间,因为我们获取到的歌曲时长是以秒来计算,所以我们要利用如果语句对时长判断来进行换算,将播放时间改为以几分几秒的形式来显示。

使用HTML5实现网页音乐播放器的案例