HTML5：aduio标签音乐播放器
html5里有一个新标签audio，该标签用以定义声音，比如音乐或其他音频流。
既然audio标签可以播放音频，那我们可以不再使用flash、wmp等其他任何第三方组件，轻而易举的使用纯html来打造一个音乐播放器。
例子：
1 | <audio src="someaudio.MP3"></audio> |
或
1 | <source src="someaudio.MP3"/> |
audio 有几个属性：
src:String型，所播放音频的 url。
autoplay:bool型，如果是 true，则音频在就绪后马上播放。默认为false。
controls:bool型，如果是 true，则向用户显示控件，比如播放按钮。默认为false。
更多详细属性：http://www.w3school.com.cn/html5/html5_audio.asp
audio 有几个事件：
onended:当媒介已抵达结尾时运行脚本，也就是当前歌曲播放完了，这里的“媒介”是指audio标签。
onloadstart:当浏览器开始加载媒介数据时运行脚本。
onplay:当媒介数据将要开始播放时运行脚本。这里的“媒介数据”是指播放的文件。
onplaying:当媒介数据已开始播放时运行脚本。
onpause:当媒介数据暂停时运行脚本。
onerror:当加载媒介数据出错时运行的脚本。(w3school不是这样解释的)
更多详细事件：http://www.w3school.com.cn/html5/html5_ref_eventattributes.asp#Media_Events
打造该播放器的完整代码效果如下：
你还可修改部分代码再运行看看哦
MusicBox.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | MusicBox=function (){
var _this=this;
var media= document.getElementById("musicBox");
var musicFiles=[
{name:"犯错",url:"http://www.yandui.com/upload/sound/2009-9-20/20_34_25_953_.mp3"} ,
{name:"天使的翅膀",url:"http://www.masradio.com.cn/uploadfile/program/uploadfile/200805/20080522090800196.mp3"},
{name:"无名轻音乐",url:"http://audio.ngfiles.com/88000/88260_Zanarkan_Mastered_Piano_Ve.mp3"},
{name:"草泥马之歌",url:"http://www.cnblogs.com"},//错误的资源
{name:"相思风雨中",url:"http://www.czopen.com/club/forum/files/247.mp3"}
];
//当前正在播放的歌曲的索引
var index=-1;
//当前正在播放的歌曲
var playingFile=null;
//播放模式
var playMode=1;
//下一首
this.nextMusic=function(){
if(playMode=="1"){
index+=1;
}
if(index==musicFiles.length){
index=0;
}
playingFile=musicFiles[index];
media.setAttribute("src",playingFile.url);
media.play();
$("#ul_musicList").children().css({"background-color":"#FFF","border":"solid 1px #EEEEEE","color":"#000"});
$( $("#ul_musicList").children()[index]).css({"background-color":"#2C7DE2","border":"solid 1px #206DDF","color":"#FFF"});
}
//加载
this. loadStart=function(){
$("#sn_status").text("加载中....");
}
//播放
this. playing=function(){
$("#sn_status").text("当前正在播放："+playingFile.name);
}
//暂停
this. pausePaly=function(){
$("#sn_status").text("暂停："+playingFile.name);
}
//加载出错
this. loadError=function(){
$("#sn_status").text("加载“"+playingFile.name+"”失败，可能资源不存在~");
}
//初始化
this.init=function(){
for(var a in musicFiles){
$("#ul_musicList").append("<li>"+musicFiles[a].name+"</li>");
}
_this.nextMusic();
$("#slt_playMode").change(function(){
playMode=$("#slt_playMode").val();
});
}
} |
源码下载
注：
如果您能在下面看到播放器并听到背景音乐，那说明您当前使用的浏览器支持HTML5 。（建议使用 Google Chrome测试）
