分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow

也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

html5 <audio> 是 HTML 5 的新標籤，定義聲音，比如音樂或其他音訊流。

HTML 5 <audio> 標籤

HTML5 audio讓音樂東山再起

HTML5 運用aduio標籤打造音樂播放器

可以在開始標籤和結束標籤之間放置文字內容，這樣老的瀏覽器就可以顯示出不支援該標籤的資訊。

HTML5 Audio標籤能夠支援wav, mp3, ogg, acc, webm等格式，但有個很重要的音樂檔案格式midi(副檔名mid)卻在各大瀏覽器中都沒有內建的支援(詳見此處)。不是所有的瀏覽器都支援MP3 OGG之類的，每個瀏覽器因為版權的問題支援的格式都是不一樣的。 

瀏覽器和音訊相容性

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

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

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

解決方案：使用三種檔案型別和<audio>標籤

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

與 <audio> 標籤結合使用時，<source> 標籤可以巢狀在 <audio> 容器內。假設您是一個瓦格納迷，想在 HTML5 網頁上聽他的歌劇 Ride of the Valkyries（《女武神》）。首先，您需要獲得三種檔案型別的音樂，即 OGG、MP3 和 WAV。將這些音樂檔案與 HTML5 檔案放在同一個資料夾內。然後，將每個檔名放在單獨的 <source> 標籤裡，並且音訊容器中的所有源標籤都由<audio></audio> 構成，如下所示。

<audio controls>
    <source src=”http://demo.mimvp.com/html5/take_you_fly.ogg” />
    <source src=”http://demo.mimvp.com/html5/take_you_fly.mp3″ />
    <source src=”http://demo.mimvp.com/html5/take_you_fly.wav” />
</audio>

無論訪問者使用什麼瀏覽器，它都將自動選擇所讀取的第一個檔案型別，併為您播放聲音。

瀏覽器音訊控制元件：沒有兩個是完全相同的

一旦您決定要在網站上提供音訊，將面臨一個有趣的設計選擇。每個瀏覽器都有與眾不同的外觀，看起來像是有意識地故意使其與眾不同。下面的圖 1 展示了這些瀏覽器控制元件的外觀。

圖1：不同瀏覽器上的音訊控制元件

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

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

html程式碼 (隱藏播放控制元件)

程式碼演示 (隱藏播放控制元件)

演示例項：

http://demo.mimvp.com/html5/audio.html

給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow