html5里有一個新標簽audio，該標簽用以定義聲音，比如音樂或其他音頻流。既然audio標簽可以播放音頻，那我們可以不再使用flash、wmp等其他任何第三方組件，輕而易舉的使用純html來打造一個音樂播放器。
audio 有幾個事件：
onended:當媒介已抵達結尾時運行腳本，也就是當前歌曲播放完了，這里的“媒介”是指audio標簽。
onplaying:當媒介數據已開始播放時運行腳本。
onloadstart:當瀏覽器開始加載媒介數據時運行腳本。
onpause:當媒介數據暫停時運行腳本。
onplay:當媒介數據將要開始播放時運行腳本。這里的“媒介數據”是指播放的文件。
onerror:當加載媒介數據出錯時運行的腳本。
audio 有幾個屬性：
controls:bool型，如果是 true，則向用戶顯示控件，比如播放按鈕。默認為false。
autoplay:bool型，如果是 true，則音頻在就緒后馬上播放。默認為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>無標題頁</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">全部循環</option> <option value="2">單曲循環</option> </select> </div> </div> </body> </html> MusicBox.js MusicBox=function (){ var _this=this; var media= document.getElementById("musicBox"); var mucicFiles=[ {name:"犯錯",url:"#"} , {name:"天使的翅膀",url:"#"}, {name:"無名輕音樂",url:"#"}, {name:"草泥馬之歌",url:"#"},//錯誤的資源 {name:"相思風雨中",url:"#"} ]; //當前正在播放的歌曲的索引 var index=-1; //當前正在播放的歌曲 var playingFile=null; //播放模式 var playMod