本文介绍了HTML5网页音乐播放器的示例代码，分享给大家，具体如下：
1功能介绍
HTML5中推出了音视频标签，可以让我们不借助其他插件就可以直接播放音视频。下面我们就利用H5的audio标签及其相关属性和方法来制作一个简单的音乐播放器。主要包括以下几个功能：
1、播放暂停、上一首和下一首
2、调整音量和播放进度条
3、根据列表切换当前歌曲
先来看一下最终的完成效果：
这个音乐播放器的结构主要分为三部分：歌曲信息、播放器和播放列表，我们重点介绍一下播放器部分。首先在播放器中放三个audio标签用于播放：
| <audio id="music1">浏览器不支持audio标签 <source src="media/Beyond - 光辉岁月.mp3"></source> </audio> <audio id="music2">浏览器不支持audio标签 <source src="media/Daniel Powter - Free Loop.mp3"></source> </audio> <audio id="music3">浏览器不支持audio标签 <source src="media/周杰伦、费玉清 - 千里之外.mp3"></source> </audio> |
下面的播放列表也对应三个audio标签：
| <div id="playList"> <ul> <li id="m0">Beyond-光辉岁月</li> <li id="m1">Daniel Powter-Free Loop</li> <li id="m2">周杰伦、费玉清-千里之外</li> </ul> </div> |
接下来我们就开始逐步实现上面提到的功能吧，先来完成播放和暂停功能，在按下播放按钮时我们要做到进度条随歌曲进度前进，播放时间也逐渐增加，同时播放按钮变成暂停按钮，播放列表的样式也对应改变。
在做功能之前我们要先把三个audio标签获取id后存到一个数组中，供后续使用。
| var music1= document.getElementById("music1"); var music2= document.getElementById("music2"); var music3= document.getElementById("music3"); var mList = [music1,music2,music3]; |
2播放和暂停：
我们现在就可以完成播放按钮的功能啦，首先设置一个标志，用来标记音乐的播放状态，再为数组的索引index设置一个默认值：
然后对播放状态进行判断，调用对应的函数，并修改flag的值和列表对应项目样式：
