簡單介紹HTML5中audio標籤的使用_html5教學技巧

在HTML5標準網頁裡面，我們可以運用audio標籤來完成我們對聲音的呼叫及播放。以下是最常被看到的運用HTML5三種基本格式：

1.最少的代碼

複製代碼

代碼如下:

2.不相容提醒的代碼

複製程式碼

程式碼如下:

3.盡量兼容瀏覽器的寫法

複製代碼

程式碼如下:

瀏覽器和音訊相容性

瀏覽器製造商並非都同意使用某種音訊檔案格式。對於圖像，PNG、JPEG 或 GIF 格式的檔案在任何瀏覽器上都能載入到您的網頁中。遺憾的是，音訊檔案並非如此。表 1 展示了網頁中可以使用的音訊檔案格式，但並非所有格式都能用於所有瀏覽器。例如，Chrome、Internet Explorer 9 (IE9) 和 Safari 瀏覽器不支援 WAV 文件，這是使用非壓縮格式且正在衰敗的標準。

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

沒有一種通用的檔案格式讓每個瀏覽器都使用單一檔案格式意味著至少有 2/5 的瀏覽器無法播放某些聲音。這不是無法在單一音訊標準中達成協議的瀏覽器製造商不妥協的問題，而是涉及專利權和特許權使用費的法律和財務問題。不受軟體專利限制的 OGG 格式旨在一勞永逸地解決這個問題。然而，在撰寫本文時，Opera 和 Safari 都不支援 OGG。與 OGG 格式的文件相比，可用的 WAV 和 MP3 文件數量要更多，因此毫無疑問，瀏覽器製造商考慮到了這一點。 MP3 作為事實的標準是個很好的解決方案。

解決方案：使用三種文件類型和

鑑於目前的狀況，您可能認為目前還不是在 HTML5 頁面上使用音訊的黃金時刻。在某些方面可能的確如此，但是 HTML5 提供了一個解決方案，使您喜歡的瀏覽器能夠找到一種相容的格式。

與

複製程式碼

程式碼如下:

無論訪客使用什麼瀏覽器，它都會自動選擇所讀取的第一個檔案類型，並為您播放聲音。
瀏覽器音頻控制：沒有兩個是完全相同的

一旦您決定要在網站上提供音頻，將面臨一個有趣的設計選擇。每個瀏覽器都有與眾不同的外觀，看起來像是有意識地故意使其與眾不同。

除了 Chrome 瀏覽器外，所有瀏覽器都有開始/暫停控件、進度條、滑桿、播放秒數、音量/靜音控件，還顯示聲音檔案的總秒數。使用HTML5 標準和瀏覽器支持，開發人員可以相信用戶將擁有與 HTML5 音訊類似的體驗，因為瀏覽器控制項是類似的。您也可以使用 Flash 和 Silverlight 等插件來建立控件，但是對於不同的用戶，體驗可能會有所不同。

某些瀏覽器（如 IE9）甚至有自己的聲音控制條，在瀏覽器本身之外運作。當使用者開啟任何有聲音的網站時，他們可以從 Windows 工作列控制聲音，並能夠預覽目前正在播放的聲音。

html代碼(隱藏播放控件)

複製代碼

代碼如下:

 

代碼演示(隱藏播放控件)

複製代碼

代碼如下: