html5里有一個(gè)新標(biāo)簽audio，該標(biāo)簽用以定義聲音，比如音樂或其他音頻流。既然audio標(biāo)簽可以播放音頻，那我們可以不再使用flash、wmp等其他任何第三方組件，輕而易舉的使用純html來打造一個(gè)音樂播放器。
audio 有幾個(gè)事件：
onended:當(dāng)媒介已抵達(dá)結(jié)尾時(shí)運(yùn)行腳本，也就是當(dāng)前歌曲播放完了，這里的“媒介”是指audio標(biāo)簽。
onplaying:當(dāng)媒介數(shù)據(jù)已開始播放時(shí)運(yùn)行腳本。
onloadstart:當(dāng)瀏覽器開始加載媒介數(shù)據(jù)時(shí)運(yùn)行腳本。
onpause:當(dāng)媒介數(shù)據(jù)暫停時(shí)運(yùn)行腳本。
onplay:當(dāng)媒介數(shù)據(jù)將要開始播放時(shí)運(yùn)行腳本。這里的“媒介數(shù)據(jù)”是指播放的文件。
onerror:當(dāng)加載媒介數(shù)據(jù)出錯(cuò)時(shí)運(yùn)行的腳本。
audio 有幾個(gè)屬性：
controls:bool型，如果是 true，則向用戶顯示控件，比如播放按鈕。默認(rèn)為false。
autoplay:bool型，如果是 true，則音頻在就緒后馬上播放。默認(rèn)為false。
src:String型，所播放音頻的 url。
打造播放器的完整代碼如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>無標(biāo)題頁</title> <style type="text/css"> body{ font-size:13px;font-family:宋體;} #ul_musicList{width:300px;list-style-type:none;margin:5px 0 3px 0;padding:0px;} #ul_musicList li{padding:5px;border:solid 1px #EEEEEE;} </style> <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script> <script src="Scripts/MusicBox.js" type="text/javascript"></script> <script type="text/javascript"> var mb=null; ().ready(function(){ mb=new MusicBox(); mb.init(); }); </script> </head> <body > <div> <audio id="musicBox" controls="true" onended="mb.nextMusic()" onloadstart="mb.loadStart()" onplaying="mb.playing()" onpause="mb.pausePaly()" onerror="mb.loadError()" > </audio> <br /> <input id="btnNext" type="button" value="下一首" onclick="javascript：mb.nextMusic()" /> <span id="sn_status"></span><br /> <div style=" margin-top:5px">歌曲列表：</div> <ul id="ul_musicList" > </ul> <div style="width:300px; text-align:right"> 播放模式:<select id="slt_playMode"> <option value="1">全部循環(huán)</option> <option value="2">單曲循環(huán)</option> </select> </div> </div> </body> </html> MusicBox.js MusicBox=function (){ var _this=this; var media= document.getElementById("musicBox"); var mucicFiles=[ {name:"犯錯(cuò)",url:"#"} , {name:"天使的翅膀",url:"#"}, {name:"無名輕音樂",url:"#"}, {name:"草泥馬之歌",url:"#"},//錯(cuò)誤的資源 {name:"相思風(fēng)雨中",url:"#"} ]; //當(dāng)前正在播放的歌曲的索引 var index=-1; //當(dāng)前正在播放的歌曲 var playingFile=null; //播放模式 var playMod