HTML元素详细介绍之Audio&Video（二）-歌曲播放器的制作
今天给大家带来一个基于HTML5和Javascript的音乐播放器制作的例子，功能很简单啦，主要是让大家理解理解HTML5和Javascript编程的一些小技巧。
大体的实现思路是：
1.在服务器上放一XML文件，里面有歌曲的信息，比如歌曲名，歌曲的url地址，歌曲的分类等。
2.javascript读取xml文件，并解析里面的内容。
3.创建一个类musicList，里面定义一些属性啊，方法啊。属性比如有：当前播放的歌曲，上一首歌曲，下一首歌曲。方法比如有：控制播放，播放下一首歌，播放上一首歌。
4.还有一个music类是存放歌曲的信息。
5.之后就是通过一些javascript提供的函数来操作，audio标签进行音乐的播放。
界面相当简单。就几个div和button。
下面就说说一些详细的制作步骤：
1.首先定义一music类，存放的是单一首歌曲的信息。
//定义music类
function music(txt, url, catalog) {
this.txt = txt;
this.url = url;
this.catalog = catalog;
}
2.有了music类，我们就开始着重编写musicList类，里面实现的属性如下：
//所有的歌曲
this.allMusic = getAllMusic(xdoc);
//当前歌曲
this.currentMusic = this.allMusic[0];
//当前歌曲索引
this.currentIndex = this.currentMusic.key;
//audio元素
this.audioElement = audioSource;
//定义上一首歌
if (this.currentIndex - 1 >= 0) {
this.previousMusic = allMusic[this.currentIndex - 1];
}
else {
this.previousMusic = null;
}
//定义下一首歌
if (this.currentIndex + 1 < this.allMusic.length) {
this.nextMusic = this.allMusic[this.currentIndex + 1];
}
else {
this.nextMusic = null;
}
getAllMusic（xdoc）函数是获取一个数组，里面存放着所有的歌曲类。
//获取所有的音乐列表
function getAllMusic(xdoc) {
this._allMusic = new Array();
nodes = xdoc.documentElement.childNodes;
for (var i = 0; i < nodes.length; i++) {
var _music = new music(nodes.item(i).childNodes.item(0).text, nodes.item(i).childNodes.item(1).text, nodes.item(i).childNodes.item(2).text);
_allMusic.push({ key: i, value: _music });
}
return _allMusic;
}
3.musicList类实现的方法有：
a.这个方法是用来控制播放与暂停的。
//控制音乐
musicList.prototype.controlMusic = function () {
var toggle = document.getElementById("toggle");
if (this.audioElement.paused) {
this.audioElement.play();
toggle.innerHTML = "暂停";
}
else {
this.audioElement.pause();
toggle.innerHTML = "播放";
}
}
b.播放下一首歌，并改变几个属性。
//下一首歌
musicList.prototype.moveToNextMusic = function () {
if (this.currentIndex + 1 < this.allMusic.length) {
this.currentMusic = this.allMusic[this.currentIndex + 1];
this.currentIndex++;
this.audioElement.src = this.currentMusic.value.url;
this.audioElement.play();
document.getElementById("toggle").innerHTML = "暂停";
this.previousMusic = this.allMusic[this.currentIndex - 1];
if (this.currentIndex + 1 < this.allMusic.length) {
this.nextMusic = this.allMusic[this.currentIndex + 1];
}
else {
this.nextMusic = this.allMusic[0];
}
this.updataMusicList();
}
else {
//返回到头部
this.currentMusic = this.allMusic[0];
this.currentIndex = this.currentMusic.key;
if (this.currentIndex - 1 >= 0) {
this.previousMusic = allMusic[this.currentIndex - 1];
}
else {
this.previousMusic = null;
}
if (this.currentIndex + 1 < this.allMusic.length) {
this.nextMusic = this.allMusic[this.currentIndex + 1];
}
else {
this.nextMusic = null;
}
this.audioElement.src = this.currentMusic.value.url;
this.audioElement.play();
document.getElementById("toggle").innerHTML = "暂停";
this.updataMusicList();
}
}
c.播放上一首歌
//上一首歌
musicList.prototype.moveToPreviousMusic = function () {
if (this.currentIndex - 1 >= 0) {
this.currentMusic = this.allMusic[this.currentIndex - 1];
this.currentIndex--;
this.audioElement.src = this.currentMusic.value.url;
this.audioElement.play();
document.getElementById("toggle").innerHTML = "暂停";
this.nextMusic = this.allMusic[this.currentIndex+1];
if (this.currentIndex - 1 >= 0) {
this.previousMusic = this.allMusic[this.currentIndex - 1];
}
else {
this.previousMusic = null;
}
this.updataMusicList();
}
else {
this.audioElement.src = this.currentMusic.value.url;
this.audioElement.play();
document.getElementById("toggle").innerHTML = "暂停";
this.updataMusicList();
}
}
d.更新歌曲的目录，就是改变界面上显示当前播放和上一首下一首歌的歌名。
//更新歌曲目录
musicList.prototype.updataMusicList = function () {
document.getElementById("currentName").innerHTML = "当前播放：" + this.currentMusic.value.txt;
if (this.nextMusic != null) {
document.getElementById("nextName").innerHTML = "下一首：" + this.nextMusic.value.txt;
} else {
document.getElementById("nextName").innerHTML = "";
}
if (this.previousMusic != null) {
document.getElementById("prevName").innerHTML = "上一首：" + this.previousMusic.value.txt;
} else {
document.getElementById("prevName").innerHTML = "上一首："+"";
}
}
4.html部分：
<audio id="myPlayer"></audio>
<div id="player" style=" background-color:#E2D7BE;">
<div id="prevName" style="padding: 3px 0px 0px 0px;float: left; margin-right:25px; width:200px;"></div>
<div id="currentName"
style="padding: 3px 0px 0px 0px;float: left;margin-right:25px; width:200px; color: #FF0000;"></div>
<div id="nextName"
style="padding: 3px 0px 0px 0px; float: left; margin-right:25px; width:200px;"></div>
<button id="prev" onclick="list.moveToPreviousMusic()">上一首</button>
<button id="toggle" onclick="list.controlMusic()">播放</button>
<button id="next" onclick="list.moveToNextMusic()">下一首</button>
</div>
给大家上个图，呵呵通过这个类再扩展扩展应该就是一个简单的网络播放器啦：
源码下载（用ie9打开，因为音频是mp3的，且我写的读取xml文件的方法也是ie的读取方法没有做其他的。。）
下次给大家带来的是viedo控件和视频播放器的制作方法。
