這篇文章主要介紹了HTML5如何實現音樂播放器，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

要做一個音樂播放器就要非常了解在Web中音頻播放的方式，通常都采用HTML5的audio標簽

1. 關于audio標簽，它有大量的屬性、方法和事件，在這里我就做一個大致的介紹。
   
   屬性：
   src：必需，音頻來源；
   controls：常見，設置后顯示瀏覽器默認的audio控制面板，不設置默認隱藏audio標簽；
   autoplay：常見，設置后自動播放音頻（移動端不支持）；
   loop：常見，設置后音頻將循環(huán)播放；
   preload：常見，設置音頻預加載（移動端不支持）；
   volume：少見，設置或返回音頻大小，值為0-1之間的一個浮點數（移動端不支持）；
   muted：少見，設置或返回靜音狀態(tài)；
   duration：少見，返回音頻時長；
   currentTime：少見，設置或返回當前播放時間；
   paused：少見，返回當前播放狀態(tài)，是否暫停；
   buffered：少見，一個TimeRanges對象，包含已緩沖的時間段信息，即加載進度。該對象包含一個屬性length，返回一個從0開始的數表示當前緩沖了多少段音頻；還包含兩個方法，start、end，分別需要傳入一個參數，即傳入音頻已加載的第幾段，從0開始。start返回該段的起始時間，end返回該段的終點時間。舉例：即傳入0，第一段的起始是0，終止時間是17，單位秒；
   屬性就介紹到這里，可能還有一些比較少用的屬性如：playbackRate等，在視頻播放中可能會用到，我就暫不講解。
   
   方法：
   play()：開始播放音頻；
   pause()：暫停播放音頻；
   
   事件：
   canplay：當前音頻可以開始播放（只加載了部分buffered，并未全部加載完成）；
   canplaythrough：可以無停頓播放（即音頻全部加載完成）；
   durationchange：音頻時長發(fā)生變化；
   ended：播放結束；
   error：發(fā)生錯誤；
   pause：播放暫停；
   play：播放開始；
   progress：音頻下載過程中觸發(fā)，事件觸發(fā)過程中可以通過訪問audio的buffered屬性獲取加載進度；
   seeking：音頻跳躍中觸發(fā)，即為修改currentTime時；
   seeked：音頻跳躍完成時觸發(fā)，即為修改完成currentTime時；
   timeupdate：音頻播放過程中觸發(fā)，同時currentTime屬性在同步更新；
   事件就介紹到這里，可能還有一些不常用的事件暫不講解。
   
   最后再講解一下一個音頻從開始加載到播放結束過程中，所觸發(fā)的事件流以及我們在不同時間段可以操作的屬性：
   loadstart：開始加載；
   durationchange：獲取到音頻時長（此時可以獲取duration屬性）；
   progress：音頻下載中（將伴隨下載過程一直觸發(fā)，此時可以獲取buffered屬性）；
   canplay：所加載的音頻足夠開始播放（每次暫停后開始播放也會觸發(fā)）；
   canplaythrough：音頻全部加載完成；
   timeupdate：播放過程中（currentTime屬性伴隨著同步更新）；
   seeking：修改當前播放進度中（即為修改currentTime屬性）；
   seeked：修改當前播放進度完成；
   ended：播放完成；
   這就是整個音頻的大致事件流，可能有一些少用的事件沒有列舉出。
   在事件觸發(fā)過程中，有一些屬性在音頻還沒有開始加載的時候就可以設置，如：controls、loop、volume等等；

2. 確定整體結構：
   因為自己是做成插件的方式發(fā)布在npm上供他人使用的，所以我們就采用面向對象的方式進行代碼編寫，又因為用戶的需求不一，所以在設計之初就暴露出大量的API和配置項以滿足大部分用戶的需求。
   這里因為自己更習慣es6的語法，就全程以es6為基礎進行開發(fā)，同時為了開發(fā)效率，又使用了sass進行css的編寫，最后還使用了webpack和webpack-dev-server用以編譯es6和sass，項目打包，構建本地服務器。

3. 確定播放器UI和交互：
   可能關于界面每個人有自己的想法，這里就不過多贅述了，以我做好的播放器UI為例進行分解
   
   從界面中可以看出一個播放器所需要的最基礎功能：
   播放/暫停、封面/歌名/歌手的顯示、播放進度條/加載進度條/進度操作功能、循環(huán)模式切換、進度文字更新/歌曲時長、靜音/音量大小控制、列表顯示狀態(tài)控制、點擊列表項切歌功能
   再結合我們想要滿足用戶需求，提供配置項和API的出發(fā)點可以得出我們想設計的配置項和暴露的API項：
   配置項：自動播放是否開啟、默認歌曲列表的顯示狀態(tài)、默認循環(huán)模式的設置
   API：播放/暫停/toggle、循環(huán)模式的切換、靜音/恢復、列表顯示狀態(tài)的切換、上一曲/下一曲/切歌、銷毀當前實例

4. 確立項目結構，開始編碼：
   因為使用webpack，所以我們直接將css打包至js內，以便作為插件供用戶使用：

   require('./skPlayer.scss');

   
   分享名稱：HTML5如何實現音樂播放器-創(chuàng)新互聯
   路徑分享：http://www.xueling.net.cn/article/jseps.html