最近學習了HTML5中的Audio標簽，學習他的最好方式當然是實踐，于是就自己寫了一個。那就直接上演示鏈接吧

http://htmlpreview.github.io/?https://github.com/djlxiaoshi/Audio/blob/master/music.html。模仿了QQ音樂網頁版的部分樣式。誰叫自己不會UI呢！

HTML5中增加了Audio和Video標簽，這兩個標簽的用法非常相似。功能卻是相當強大，我們先來看一下Audio標簽各個瀏覽器的支持情況。這里用的依然是Can I Use這個在線網站，相信學習前端的同學應該都不陌生。

我們可以看到，各大瀏覽器對這個元素的支持是非常給力的，除了IE8以前的和Opera Mini，所以just do it。

相關文檔：Audio MDN? ? ?Audio 菜鳥教程

對于這個元素怎么使用，個人感覺沒有什么好講解的，都是一目了然。我就講解一下Audio的一些屬性，方法，事件會在什么時候用到。

1 方法

play() ?播放這就不用說了 ?會設置puased屬性為false

pause(), ?暫停這也不用說了 ?會設置puased屬性為true

load() ? 重新加載

fastSeek ?設置播放時間?fastSeek(30) ?設置從30s處播放，可以用來快進，但是這個方法谷歌不支持，狐火下可以，所以最好還是通過設置currentTime來實現。

canPlayType() ?檢查瀏覽器是否可以播放指定的音頻類型 ?如果想做的完美一點是可以的，但是一般常見的音樂類型，瀏覽器都會支持。

2 屬性

常用的屬性及其方法我已經在上面進行了標注。在播放音樂之前一定要先加載音樂，也就是設置audio.src屬性。paused屬性在播放是會設置為false 暫停時設置為true。

由于屬性事件太多，于是采用了這種截圖標注的方式，還望大家見諒。

3 事件：

注意：

當音頻/視頻處于加載過程中時，會依次發生以下事件：

loadstart

durationchange

loadedmetadata

loadeddata

progress

canplay

canplaythrough

這個標簽的用法其實很簡單，完成播放器的難點就是邏輯控制，思路的清晰，所以在寫代碼之前一定要畫流程圖。在這里我推薦一款在線的框圖設計網站，不加評論，因為目前自己只用過這一個：https://www.processon.com? 當然還可以畫思維腦圖等等其他的。

可能你在寫播放器的圖中會用到下面的一些問題：

1

2

我碰到這個問題的原因是，音樂沒有加載(沒有設置audio.src)就直接 ?audio.play() ?此時不會報錯 ，但是點擊關閉按鈕即執行 audio.pause()時，就會報這個錯。底下為產生相同錯誤的測試代碼

關閉

vardom=document.getElementById("audioDom");

dom.play();functiontest(){

dom.pause();

}

總結一點 ?就是如果產生類似問題，一定是你的播放邏輯產生了問題。

這是我個人播放器的github地址：音樂播放器目前還沒有怎么整理優化，只是功能有了，金玉其外，敗絮其中了，最后告誡大家一點，寫代碼一定要備份，一定要學會用git來管理自己的項目。這次本來有一個小bug，我想小bug改起來應該容易，不用備份，結果越改坑越大最后改的面目全非，一片混亂，一氣之下又來一遍，每一次改動都會commit。

來源：https://www.cnblogs.com/djlxs/p/5650987.html

總結

以上是生活随笔為你收集整理的html5播放器源码自己添加音乐,HTML5 audio标签 打造属于自己的音乐播放器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。