HTML5 有兩個很炫的元素，就是Audio和 Video,可以用他們在頁面上創建音頻播放器和視頻播放器，制作一些效果很不錯的應用。
無論是視屏還是音頻，都是一個容器文件，包含了一些音頻軌道，視頻軌道和一些元數據，這些是和你的視頻或者音頻控件綁定到一塊的，這樣才形成了一個完整的播放組件。
瀏覽器支持情況：
| 瀏覽器 |
支持情況 |
編解碼器 |
| Chrome |
3.0 |
Theora 、 Vorbis 、Ogg H.264 、 AAC 、MPEG4 |
| FireFox |
3.5 |
Theora 、 Vorbis 、Ogg |
| IE |
不支持 |
無 |
| Opera |
10.5 |
Theora 、 Vorbis 、Ogg（10.5） VP8、Vorbis 、 WebM（10.6） |
| Safari |
3.2 |
H.264 、 ACC 、MPEG4 |
常用的控制函數：
| 函數 |
動作 |
| load() |
加載音頻、視頻軟件 |
| play() |
加載並播放音頻、視頻文件或重新播放暫停的的音頻、視頻 |
| pause() |
暫停出於播放狀態的音頻、視頻文件 |
| canPlayType(obj) |
測試是否支持給定的Mini類型的文件 |
只讀的媒體屬性：
| 只讀屬性 |
值 |
| duration |
獲取媒體文件的播放時長，以s為單位，如果無法獲取，則為NaN |
| paused |
如果媒體文件被暫停，則返回true，否則返回false |
| ended |
如果媒體文件播放完畢，則返回true |
| startTime |
返回起始播放時間 |
| error |
返回錯誤代碼 |
| currentSrc |
以字符串形式返回正在播放或已加載的文件 |
可腳本控制的屬性值：
| 屬性 |
值 |
| autoplay |
自動播放已經加載的的媒體文件 |
| loop |
為true的時候則設定為自動播放 |
| currentTime |
以s為單位返回從開始播放到目前所花的時間 |
| controls |
顯示或者隱藏用戶控制界面 |
| volume |
音量值,從0.0至1.0之間 |
| muted |
設置是否靜音 |
| autobuffer |
是否進行緩沖加載 |
首先,我們在頁面中添加一個音頻元素：
<audio src="../Media/The sound of silence.mp3" controls="controls" autoplay="autoplay"></audio>
在谷歌Chrome瀏覽器中的效果如下：
controls指的是用戶控制界面,所以我們可以在Web頁面中看到上面這個操作面板，包括播放和暫停，播放進度條，音量進度條，和進度時間顯示等。autoplay 指的是自動播發已加載的媒體文件，所以我們一打開頁面就可以直接播放了
HTML5 Audio API 的界面很強大，功能也很完善，但是我們的Web應用會根據不同的需求、設計風格和界面顏色來要求不同的播放器樣式和功能，這就要求我們能基於他們的API 設計出靈活的應用。
接下來，我們設計一款適合我們離線工作系統需要的播放器：
1 //在頁面放置一個audio元素，因為我們使用自己設計的播放界面，所以這邊不用他們的controls。 2 <audio id="myMusic" > </audio> 3 4 //這邊放置一個隱藏域，他的作用是存放媒體文件暫停的時間點 5 <input id="PauseTime" type="hidden" /> 6 7 //編寫音樂盒的界面 8 <div class="MusicBox" > 9 10 <div class="LeftControl" ></div> //上一個媒體文件的控制圖標 11 <div id="MainControl" class="MainControl" ></div> //開始和暫停的控制圖標 12 <div class="RightControl" ></div> //下一個媒體文件的控制圖標 13 14 <div class="ProcessControl">//進度條 15 <div class="SongName">Ben's Music Box!</div> //媒體文件標題 16 <div class="SongTime">00:00 | 00:00</div> //時間進度 17 <div class="Process" ></div> //全部時長的進度條 18 <div class="ProcessYet"></div> //已播放時長的進度條 19 </div> 20 21 <div class="VoiceEmp"></div> //靜音圖標 22 <div class="VoidProcess" ></div> //全音量進度條 23 <div class="VoidProcessYet" ></div> //當前音量進度條 24 <div class="VoiceFull" ></div>//全音量圖標 25 <div class="ShowMusicList" ></div> //顯示或隱藏媒體文件列表圖標 26 27 </div> 28 29 30 <div class="MusicList"> //媒體文件列表區域 31 <div class="Author"></div> //當前媒體文件的 32 <div class="List"> //媒體文件列表 33 34 <div class="Single" > //單個媒體文件 35 <span class="SongName" KV="Fate" >01.Fate</span> 36 </div> 37 38 </div> 39 </div>
畫好這個結構之后，我們就來寫相應的CSS樣式了：
View Code
頁面的元素和CSS樣式寫完之后，就可以看到一個漂亮的音樂播放器的模型了，如圖：
只是現在的播放器上面的按鈕都是空殼，沒有任何功能。所以，現在我們就來添加這些功能 ， 腳本的頂層框架就用Jquery。
View Code
至此，一款播放器做完了，默認執行的是列表循環播放，包含了上一首，下一首，播放，暫停，播放進度條調整，音量調進度條整，列表選擇等功能。播放的歌曲是固定的寫在列表里面的，我喜歡的ESON的照片也是貼上去的，這些都可以做成動態獲取或則與服務器交互，有興趣的可以去試一下，擴展一下。
本來准備在我們的離線工作系統中添加音頻播放器，后來需求變更，放棄了，所以這個版本不是完善的版本。視頻播放器的功能大同小異，也可以自己試試。
本文源碼下載：CRX_Mail_Audio