使用HTML5的Audio標籤打造WEB音頻播放器，html5audio

使用HTML5的Audio標籤打造WEB音頻播放器，html5audio

目前，WEB頁面上沒有標準的方式來播放音頻檔案，大多數的音頻檔案是使用外掛程式來播放，而眾多瀏覽器都使用了不同的外掛程式。而HTML5的到來，給我們提供了一個標準的方式來播放WEB中的音頻檔案，使用者不再為瀏覽器升級諸如Adobe Flash、Apple QuickTime等播放外掛程式，只需使用現代瀏覽器就可以聆聽任何可以發出聲音的WEB網站。

WEB中的Audio標籤

HTML5定義了一個新的元素用來指定標準的方式來插入音頻檔案到web頁面中：<audio>標籤。使用audio標籤可以控制音訊播放與停止，迴圈播放與播放次數設定，以及播放位置等等，詳情請看下錶。

屬性	值	描述
autoplay	true | false	如果是 true，則音頻在就緒後馬上播放。
controls	true | false	如果是 true，則向使用者顯示控制項，比如播放按鈕。
end	numeric value	定義播放器在音頻流中的何處停止播放。預設地，聲音會播放至結尾。
loopend	numeric value	定義在音頻流中迴圈播放停止的位置，預設是 end 屬性的值。
loopstart	numeric value	定義在音頻流中迴圈播放的開始位置。預設是 start 屬性的值。
playcount	numeric value	定義音頻片斷播放多少次。預設是 1。
src	url	所播放音訊 url。
start	numeric value	定義播放器在音頻流中開始播放的位置。預設地，聲音在開頭進行播放。

目前支援audio標籤的瀏覽器有：

IE9，Firefox， Opera，Chrome和Safari都支援<audio>標籤。

注意：IE8和更早的版本，不支援<audio>標籤。

如何使用Audio

要在HTML5中播放音頻，需要在body中插入以下代碼：

2. <audio controls="controls">
3. <source src="music.ogg" />
4. <source src="music.mp3" />
5. <source src="music.wav" />
6. </audio>

你可以在<audio>和</audio>標籤之間插入文字內容，這樣如果瀏覽器不支援audio，那麼會顯示這些文字。

也許你會問auto中怎麼會包含3個source標籤呢？這是為了瀏覽器和音頻格式的相容性，瀏覽器製造商並非都同意使用某一種音頻檔案格式。例如，Chrome、Internet Explorer 9 (IE9) 和 Safari 瀏覽器不支援 WAV 檔案，這是一種使用非壓縮格式且正在衰敗的標準。我們將每個視頻檔案名稱放在單獨的 <source> 標籤裡，並且音頻容器中的所有源標籤都由<audio></audio> 構成，如下所示。那麼，無論訪問者使用什麼瀏覽器，它都將自動選擇所讀取的第一個檔案類型，並為您播放聲音。

HTML5瀏覽器和音頻格式相容性

音頻格式	Chrome	Firefox	IE9	Opera	Safari
OGG	支援	支援	支援	不支援	不支援
MP3	支援	不支援	支援	不支援	支援
WAV	不支援	支援	不支援	支援	不支援

此外，不同瀏覽器音頻空間外觀也不一樣。

HTML5 讓開發人員可以更輕鬆地提供大量WEB體驗。<audio>標籤是令人興奮的新添內容，不再需要外部音樂播放器，使音訊提供像顯示映像一樣簡單。有了基於標準的音頻控制項和讓使用者更易於與聲音進行互動的新瀏覽器功能，你可以輕鬆的在WEB頁面上定製MP3播放器了。