標籤：
最近學習了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處播放，可以用來快進，但是這個方法Google不支援，狐火下可以，所以最好還是通過設定currentTime來實現。
canPlayType() 檢查瀏覽器是否可以播放指定的音訊類型 如果想做的完美一點是可以的，但是一般常見的音樂類型，瀏覽器都會支援。
2 屬性
常用的屬性及其方法我已經在上面進行了標註。在播放音樂之前一定要先載入音樂，也就是設定audio.src屬性。paused屬性在播放是會設定為false 暫停時設定為true。
由於屬性事件太多，於是採用了這種標註的方式，還望大家見諒。
3 事件：
注意：
當音頻/視頻處於載入過程中時，會依次發生以下事件：
這個標籤的用法其實很簡單，完成播放器的痛點就是邏輯控制，思路的清晰，所以在寫代碼之前一定要畫流程圖。在這裡我推薦一款線上的框圖設計網站，不加評論，因為目前自己只用過這一個：https://www.processon.com 當然還可以畫思維腦圖等等其他的。
可能你在寫播放器的圖中會用到下面的一些問題：
1
2
我碰到這個問題的原因是，音樂沒有載入（沒有設定audio.src）就直接 audio.play() 此時不會報錯 ，但是點擊關閉按鈕即執行 audio.pause()時，就會報這個錯。底下為產生相同錯誤的測試代碼
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <audio id="audioDom"></audio> <button onclick="test()">關閉</button> </body> <script type="text/javascript"> var dom=document.getElementById("audioDom"); dom.play(); function test(){ dom.pause(); } </script> </html>
總結一點 就是如果產生類似問題，一定是你的播放邏輯產生了問題。
這是我個人播放器的github地址：音樂播放器 目前還沒有怎麼整理最佳化，只是功能有了，金玉其外，敗絮其中了，最後告誡大家一點，寫代碼一定要備份，一定要學會用git來管理自己的項目。這次本來有一個小bug，我想小bug改起來應該容易，不用備份，結果越改坑越大最後改的面目全非，一片混亂，一氣之下又來一遍，每一次改動都會commit。
HTML5 audio標籤 打造屬於自己的音樂播放器
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
