簡介
過去幾年，開發人員一直都在制造完善的交互體驗，努力使其可以在瀏覽器中正確運行。這樣的站點通常需要使用瀏覽器插件 (Flash)。隨著智能手機和平板電腦的推出，交互體驗看似與新的小部件能夠完美匹配。但是，由于移動設備的處理能力有限，瀏覽器插件不再是一種可行的開發平臺。
HTML5 已經添加了大量無需額外插件的使用的工具。W3C 的 HTML5 規范仍在開發之中，但是在規范開發過程中，瀏覽器已經開始提供支持。
HTML5 音頻是一個巨大的進步，它允許在瀏覽器中嵌入聲音，尤其是在移動設備中，比如 iOS 的移動版 Safari 瀏覽器上。盡管 HTML5 音頻是一個新特性，但已提供了 iOS 支持。根據流行的移動應用程序 Instapaper 的開發人員報導，2011 年 11 月，其 iOS 用戶中有 98.8% 都在使用 iOS 4 或更高版本（請參閱 參考資料）。由于 HTML5 音頻是在 iOS 3 中引入到移動版 Safari 中的，所以您可以放心，iOS 平臺為 HTML5 音頻提供了廣泛的支持。
在文本中，您將了解 HTML5 在桌面上和移動版 Safari 內的局限性，并嘗試采用一些解決方案來創建交互的聲音效果。本文涵蓋的其他內容包括：不受支持的事件、audio sprite 以及如何使用 directCanvas 和 multiSound 加速 HTML5 游戲性能。
有一點非常值得關注：對于 iOS 6，Apple 已經添加了對 Web Audio API（討論如下）的支持，因此不再需要使用本文中所討論的許多變通方法。不過，iOS 6 剛剛面世不到幾周時間，所以 iOS 5 仍然是市場的主流。本文中所討論的問題以及所提供的變通方式仍有效，應該在為移動版 Safari 開發聲頻時考慮使用它們。
HTML5 音頻的局限性
在討論移動版 Safari 中的局限性之前，有必要理解 HTML 音頻在桌面上的局限性。HTML5 音頻雖然很健壯，但有其局限性，這主要取決于它的實現。對于音樂播放器（點唱機播放器）或簡單的聲音效果，它很有效，但是對于聲音密集的應用程序如游戲，它的表現不是很理想。
格式支持
不幸的是，并不是所有瀏覽器都支持相同的視頻文件格式。如表 1 所示，目前有四種主要格式：MP3、OGG、WAV 和 AAC。
表 1. HTML5 視頻格式支持
為了涵蓋所有瀏覽器，最好是讓所有的視頻流都具有 Ogg Vorbis 和 AAC 兩種格式。
為什么沒有包括 MP3？MP3 在進行商業傳播時需要支付繁重的版稅。MP3 的授權要求對于所有超過 $100K 的數據收取 2% 的傳播費。出于這個原因，我更傾向于使用 AAC 而非 MP3。AAC 也并非完全免版稅的，但它對于免費傳播的許可沒有那么嚴格。AAC 還提供了更好的壓縮，文件可以更小，它是 Web 領域的福音。
Ogg Vorbis 之所以壓倒性地獲得了我的喜愛是因為它是開源的、無專利費并且免版稅的。不過，只有 Firefox 支持它。
清單 1 顯示了跨瀏覽器兼容 HTML 標記。
清單 1. 音頻元素的 HTML 標記
<audio>
// AAC file (Chrome/Safari/IE9)
<source src="sound.m4a" type="audio/mpeg" />
// Ogg Vorbis (Firefox)
<source src="http://pic.html5code.netsound.ogg" type="audio/ogg" />
</audio>
處理和效果
在處理音頻時，一個強大的特性是處理聲音的能力。無論動態合成聲音、處理聲音效果、應用環境效果，還是進行基本的立體聲平移，HTML5 音頻缺乏所有這些處理能力。您加載的視頻就是將要播放的視頻。
Web Audio API (Chrome) 和 Audio Data API (Firefox) 無需任何瀏覽器插件即可進行合成和動態處理音頻的能力幫助您解決了特性缺失的問題。這兩種 API 均在開發當中，僅在 Chrome 14+ 和 Firefox 4+ 中受支持。不幸的是，在實現方面這二者差異很大。目前有一些表現不錯的庫可用來使支持正規化，比如 audiolibjs（請參閱 參考資料）。Chrome 的 Web Audio API 就是通過 W3C 推廣的標準。
單音頻層（多音的）
要重復播放聲音本身，必須實例化此聲音的一個單獨的音頻對象。在標記和能夠播放的音頻之間存在 1:1 的對應。對于當前狀態的 HTML5 音頻，是無法分層的。其他平臺，比如 Flash，可以分出一個單獨的音頻對象，無需創建一個新的音頻對象。
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。