當(dāng)代瀏覽器喊的最響亮的一個(gè)口號(hào)就是支持HTML5，尤其是IE9這個(gè)頁面是一款知名的Firefox 4插件drag2up的開發(fā)人員所開發(fā)一款音樂播放器，實(shí)際上是一個(gè)音樂播放頁面只要支持HTML5的瀏覽器都可以播放本地音樂有測(cè)試人員表示，Chrome效果最好，F(xiàn)irefox也可以使用但是 筆者自己的試用體驗(yàn)是，Chrome表現(xiàn)最佳；testmp3quot type=quotaudiomp3quot ltsource src=quottestoggquot type=quotaudiooggquot ltembed height=quot100quot width=quot100quot src=quottestmp3quot ltaudio 上面的例子使用了兩個(gè)不同的音頻格式HTML5 ltaudio 元素會(huì)嘗試以 mp3 或 ogg 來播放音頻如果失敗，代碼將回退嘗試 ltembed 元素；一般有兩種方法，一個(gè)是flash播放器，一個(gè)是html5的video標(biāo)簽下面是我用的flash播放器代碼 ltembed src=quot；以下是我親自測(cè)試過可以達(dá)到你要的效果的代碼，細(xì)節(jié)需要你調(diào)整定時(shí)器的時(shí)間間隔和每次音量改變幅度下面是HTML部分的寫法 ltbody ltaudio id=quotplayerquot src=quot這里是你要播放的音樂mp3quotltaudio ltbutton type=quotbuttonquot onclick=quotfadeInquot播放ltbutton ltbutton type=quotbuttonquot onclick=quot；重點(diǎn)canvas繪制AudioContextAPI應(yīng)用代碼在#39publicjavascriptsindexjs#39中本博文重點(diǎn)講解實(shí)現(xiàn)過程中使用的AudioContext相關(guān)的API如果對(duì)webaudioAPI很有興趣，請(qǐng)參見webaudioAPI AudioContext音頻處理的環(huán)境和上下文，可以控制它所包含的節(jié)點(diǎn)的創(chuàng)建，以及音頻處理音頻解碼操作，讀取播放狀態(tài)等做任何音頻相關(guān)的。

在手機(jī)網(wǎng)頁上，HTML5的audio元素可能無法實(shí)現(xiàn)自動(dòng)加載播放音樂，這是由于安卓和iOS系統(tǒng)默認(rèn)不允許開發(fā)者進(jìn)行自動(dòng)播放，除非用戶進(jìn)行頁面操作一種解決方法是，在用戶進(jìn)行操作時(shí)，利用touch事件控制音樂播放如果頁面在微信中發(fā)布，可以嘗試以下方法編寫一段JavaScript代碼如下javascript；直接用audio標(biāo)簽啊，就能實(shí)現(xiàn)只是自動(dòng)播放的話，為了兼容瀏覽器和手機(jī)類型，需要另外寫js；1好像是瀏覽器兼容性的問題用js創(chuàng)建audio對(duì)象的形式成功實(shí)現(xiàn)了點(diǎn)擊再次播放2檢測(cè)ended屬性，根據(jù)currenttime還有durration，等它播放完之后又重新播放；ltaudio controls ltsource src=quothorseoggquot type=quotaudiooggquot ltsource src=quothorsemp3quot type=quotaudiompegquotYour browser does not support the audio elementltaudio ltbodylthtml在線演示asp？filename=tryhtml5_audio_all祝五一愉快。

這樣，當(dāng)前播放的歌曲或歌單就會(huì)不斷重復(fù)，直到用戶手動(dòng)停止其次，對(duì)于更為高級(jí)的用戶或者特定場(chǎng)合的需求，可以通過編程或者使用專業(yè)的音頻編輯軟件來實(shí)現(xiàn)音樂循環(huán)播放例如，在網(wǎng)頁設(shè)計(jì)中，可以使用HTML5的``標(biāo)簽配合JavaScript來編寫一個(gè)簡(jiǎn)單的音樂播放器，通過設(shè)置`loop`屬性為`true`來實(shí)現(xiàn)音樂的循環(huán)播放；html5可以實(shí)現(xiàn)在url跳轉(zhuǎn)的情況下，不刷新整個(gè)頁面，在支持html5的瀏覽器上可以實(shí)現(xiàn)跳轉(zhuǎn)頁面音樂不停放的需求就像新浪微博播放彈出視頻的時(shí)候，翻頁不會(huì)影響視頻的播放可以搜一下 historypushState和historyreplaceState。

HTML5中的video和audio標(biāo)簽中有一個(gè)autoplay屬性，添加這個(gè)屬性后就會(huì)在文件加載完成以后自動(dòng)播放具體代碼如下videoltvideo autoplay=quotautoplayquot ltsource src=quot視頻路徑quot ltvideoaudioltaudio autoplay=quotautoplayquot ltsource src=quot視頻路徑quot ltaudio除此屬性外還有如下屬性controls；背景音樂代碼 1ltembed src=quot背景音樂網(wǎng)址quot hidden=quottruequot autostart=quottruequot loop=quottruequot hidden=quottruequot表示隱藏播放，即不顯示播放器的外觀，若要想顯示，把quottruequot 替換為quotfalsequot即可，這樣為默認(rèn)是最小化播放，若還想具體顯示播放器的大小，另加上height=quot高度值quot width=quot寬度值quot 就；ltaudio src=quotmp3一輩子的孤單mp3quot onplay=quotthiscurrentTime=5quot autoplay controls style=quotwidth 200pxquotltaudio 當(dāng)然這樣寫還是有問題的，手動(dòng)播放的時(shí)候始終會(huì)從第5秒開始，建議你還是寫js控制，根據(jù)paused屬性判斷是否暫停，來設(shè)定currentTime 話說為什么不直接把歌曲的前5秒截掉不是更好。

ltaudio controls=quotcontrolsquot autoplay=quotautoplayquot ltsource src=quotsongoggquot type=quotaudiooggquot ltsource src=quotsongmp3quot type=quotaudiompegquot Your browser does not support the audio elementltaudio 也可以直接調(diào)用 API，用js實(shí)現(xiàn)。