在HTML5的新特性<audio>標簽出現以前，Flash或是其他的瀏覽器插件是唯一能讓網(wǎng)絡(luò )世界有聲的方法。雖然現在我們不再需要依賴(lài)插件，但是新的方法卻給華麗的游戲和交互式應用帶來(lái)了很大的麻煩。
Web Audio API是Javascript中主要用于在網(wǎng)頁(yè)應用中處理音頻請求的一個(gè)高級應用接口，這個(gè)API目的是用于讓最新技術(shù)與傳統的游戲音頻引擎的綜合處理相兼容，也即盡力提供一些桌面音頻處理程序的要求。那么接下來(lái)就是對這個(gè)API的一個(gè)簡(jiǎn)單介紹。
AudioContext（W3C）是一種管理、播放聲音的對象。要讓W(xué)eb Audio API播放聲音或是使一個(gè)甚至更多的音頻源連接到AudioContext實(shí)例上，我們并不需要直接去操作該對象，而是可以通過(guò)任意數量的處理元，也就是AudioNodes?（W3C）來(lái)模塊化地處理音頻信號。這一過(guò)程【英文原文（W3C）】已經(jīng)被詳細地在Web Audio specification（原文）一文中介紹。
幾行簡(jiǎn)單的代碼創(chuàng )建一個(gè)AudioContext就可以支持聲音輸出和音頻波形的合成，那么于是就像下面這一段那樣，一個(gè)AudioContext對象就創(chuàng )建好了。
var context;window.addEventListener('load', init, false);function init() {try {context = new webkitAudioContext();}catch(e) {alert('您當前的瀏覽器不支持Web Audio API ');}}對于WebKit核心的瀏覽器，你需要加上一個(gè)webkit前綴，也就是使用webkitAudioContext。
值得一提的是，好多很有意思的Web Audio API功能，比如說(shuō)創(chuàng )建AudioNodes 或者是解碼音頻文件，都是AudioContext的方法。
Web Audio API使用AudioBuffer方法來(lái)緩沖中小型的音頻文件。而最簡(jiǎn)單的請求音頻文件的方法是通過(guò)XMLHttpRequest（W3C）來(lái)實(shí)現的。
Web Audio API支持多種格式的音頻文件，比如常見(jiàn)的WAV MP3 AAC OGG，以及其他的一些（Wikipedia）。值得一提的是，不同瀏覽器支持的文件格式是不同的。
下面是一個(gè)載入音頻文件的范例。
var dogBarkingBuffer = null;var context = new webkitAudioContext(); function loadDogSound(url) {var request = new XMLHttpRequest();request.open('GET', url, true);request.responseType = 'arraybuffer'; // 異步解碼request.onload = function() {context.decodeAudioData(request.response, function(buffer) {dogBarkingBuffer = buffer;}, onError);}request.send();}音頻文件是二進(jìn)制文件而非文本，所以我們需要將responseType設置成’arraybuffer’。如果想要對ArrayBuffers這個(gè)東西做一點(diǎn)了解的話(huà)，來(lái)看一下這篇關(guān)于XHR2的文章吧。
接收音頻文件之后，接下來(lái)要做的就是通過(guò)AudioContext的decodeAudioData()方法解碼文件。這一方法將ArrayBuffer獲取的音頻文件異步解碼（并不打斷Javascript的主進(jìn)程）。
當decodeAudioData()結束后，此函數會(huì )調用一個(gè)回調函數返回包含未壓縮的PCM格式AudioBuffer實(shí)例來(lái)存放解壓后的音頻。
一個(gè)簡(jiǎn)單的音頻圖表
當AudioBuffer載入完畢之后，就可以開(kāi)始播放音頻了。為了方便敘述，讓我們假設我們剛剛載入并處理了一個(gè)AudioBuffer實(shí)例，里面有一段小狗的叫聲。那么我們就可以通過(guò)下面的代碼來(lái)播放它。
var context = new webkitAudioContext(); function playSound(buffer) {var source = context.createBufferSource(); // 創(chuàng )建一個(gè)聲音源source.buffer = buffer; // 告訴該源播放何物source.connect(context.destination); //將該源與硬件相連source.noteOn(0); // 現在播放該實(shí)例}playSound()函數可以在任何情況下調用，比如說(shuō)用戶(hù)的按鍵或是鼠標單擊。
而函數noteOn(time)可以讓我們方便地控制音頻播放的時(shí)間。不過(guò)，正常播放的前提是你要正常緩沖好要播放的實(shí)例。
當然了，如果能有一個(gè)像函數一樣的東西來(lái)讓我們不用硬編碼地址到源碼中直接播放聲音就好了。 以載入文件為例，我們有很多辦法來(lái)直接調函數讀取文件，比如使用BufferLoader 類(lèi)。
下面這個(gè)例子是這個(gè)類(lèi)的使用方法。讓我們創(chuàng )建兩個(gè)AudioBuffer，一旦載入完成，就將它們回放出來(lái)。
window.onload = init;var context;var bufferLoader;function init() {context = new webkitAudioContext();bufferLoader = new BufferLoader(context,['../sounds/hyper-reality/br-jam-loop.wav','../sounds/hyper-reality/laughter.wav',],finishedLoading);bufferLoader.load();}function finishedLoading(bufferList) {//創(chuàng )建兩個(gè)實(shí)例并同時(shí)播放之var source1 = context.createBufferSource();var source2 = context.createBufferSource();source1.buffer = bufferList[0];source2.buffer = bufferList[1];source1.connect(context.destination);source2.connect(context.destination);source1.noteOn(0);source2.noteOn(0);}Web Audio API提供了精確的時(shí)間回放函數給開(kāi)發(fā)者，為了介紹這一特性，讓我們來(lái)設定一個(gè)簡(jiǎn)單的回放音軌。首先來(lái)看一個(gè)常見(jiàn)的鼓點(diǎn)節奏：
一個(gè)簡(jiǎn)單的鼓點(diǎn)節奏
一個(gè)鼓點(diǎn)在每個(gè)八分點(diǎn)上敲擊，每四分之一小節有一個(gè)音符。
如果要實(shí)現這個(gè)樂(lè )譜，下面的代碼可以實(shí)現：
for (var bar = 0; bar < 2; bar++) {var time = startTime + bar * 8 * eighthNoteTime;// 在鼓點(diǎn)1、5上播放playSound(kick, time);playSound(kick, time + 4 * eighthNoteTime);// 在3、7上播放另一音效playSound(snare, time + 2 * eighthNoteTime);playSound(snare, time + 6 * eighthNoteTime);//每8點(diǎn)播放一次for (var i = 0; i < 8; ++i) {playSound(hihat, time + i * eighthNoteTime);}}就這樣，我們播放了音樂(lè )。下面給出的函數playSound()可以提供一種播放指定次數音樂(lè )的方法。
function playSound(buffer, time) {var source = context.createBufferSource();source.buffer = buffer;source.connect(context.destination);source.noteOn(time);}放出聲音了之后，我們還要對之進(jìn)行控制，比如說(shuō)調節播放的音量。使用Web Audio API，我們可以使用AudioGainNode（W3C）來(lái)控制整個(gè)音樂(lè )。
這個(gè)連接過(guò)程可以用如下方法實(shí)現：
// 創(chuàng )建一個(gè)gain nodevar gainNode = context.createGainNode();// 將實(shí)例與gain node相連source.connect(gainNode);// 將gain node與播放設備連接gainNode.connect(context.destination);一旦設定完成之后，你就可以通過(guò)改變值之后來(lái)控制音量了。//減少音量gainNode.gain.value = 0.5;
接下來(lái)這個(gè)范例介紹了一個(gè)音量控制組件，音量切換用的是這個(gè)元素：
現在讓我們設想一個(gè)更復雜的情況，我們希望播放多個(gè)音頻，并在其間交叉混合。這是一個(gè)像是DJ控制臺的應用程序，比如說(shuō)我們有兩個(gè)聲音源，并希望在它們之間切換。
其控制的圖示是這樣的：
一張含有兩個(gè)通過(guò)gain nodes連接的音頻源的音頻路徑圖
要設定這個(gè)樣子，我們只需要創(chuàng )建兩個(gè)AudioGainNodes（W3C），并將每個(gè)源連接起來(lái)，就像下面這個(gè)函數一樣。
function createSource(buffer) {var source = context.createBufferSource();// 創(chuàng )建一個(gè) gain node.var gainNode = context.createGainNode();source.buffer = buffer;// 啟動(dòng)循環(huán)source.loop = true;// 將源與gain相連接source.connect(gainNode);// 將gain與目標相連接gainNode.connect(context.destination);return {source: source,gainNode: gainNode};}簡(jiǎn)單的線(xiàn)性混響通過(guò)改變實(shí)例音量來(lái)切換音樂(lè )。
這個(gè)方案看上去簡(jiǎn)單，但是會(huì )帶來(lái)一些不自然的情況。為了解決這個(gè)問(wèn)題，我們使用一個(gè)平衡功率曲線(xiàn)來(lái)取代這個(gè)圖形。這一非線(xiàn)性曲線(xiàn)相交于更高的位置，在不同層次的地方交叉混響，就可以最大限度地減少驟降。
下面的例子使用了<input type=”range”>控件來(lái)調節兩個(gè)音樂(lè )實(shí)例的混響音量。
另外一種需要聲音交叉的程序就是音樂(lè )播放器了。當一首音樂(lè )結束，我們需要將它淡出，并漸入下一首曲目。只有這樣，我們才能避免掉播放音樂(lè )之前的不自然。要實(shí)現交叉淡入淡出，我們可以使用setTimeout來(lái)完成任務(wù)，但這卻不能精確地達到我們想要的效果?，F在，有了Web Audio API，我們可以調整AudioGainNode的增益值（位于AudioParam（W3C）接口中）來(lái)更好地實(shí)現我們的效果。
那么，還是范例。給出一個(gè)播放列表，在當前曲目即將播放完成時(shí)，降低正在播放的曲目的增益值，并將下一首歌的增益值調高：
function playHelper(bufferNow, bufferLater) {var playNow = createSource(bufferNow);var source = playNow.source;var gainNode = playNow.gainNode;var duration = bufferNow.duration;var currTime = context.currentTime;// 淡入下一首曲目gainNode.gain.linearRampToValueAtTime(0, currTime);gainNode.gain.linearRampToValueAtTime(1, currTime + ctx.FADE_TIME);// 播放當前曲目source.noteOn(0);// 在曲子快要結束時(shí)，淡出之gainNode.gain.linearRampToValueAtTime(1, currTime + duration-ctx.FADE_TIME);gainNode.gain.linearRampToValueAtTime(0, currTime + duration);// 附加一個(gè)表來(lái)跟蹤播放列表中的順序曲目var recurse = arguments.callee;ctx.timer = setTimeout(function() { recurse(bufferLater, bufferNow);}, (duration - ctx.FADE_TIME) * 1000);}除此以外，Web Audio API還通過(guò)一系列的RampToValue方法提供了使屬性值指數漸變的方法，比如linearRampToValueAtTime和exponentialRampToValueAtTime。
如上的幾個(gè)例子（線(xiàn)性、指數）提供的音量漸變都是內置的，您還可以通過(guò)使用setValueCurveAtTime函數來(lái)自定義你自己的增益值漸變曲線(xiàn)。
下面這個(gè)演示展示了上面給出的函數的一個(gè)應用。
通過(guò)BiquadFilterNode處理過(guò)的一個(gè)音頻播放實(shí)例
Web Audio API允許你通過(guò)管道將音頻實(shí)例連接起來(lái)，并組成一個(gè)混音組來(lái)給音頻實(shí)例增加一些特效。
而連接起來(lái)的辦法有很多，比如上圖所示的通過(guò)BiquadFilterNode（W3C）。這一方法可以為你的音頻源增加許多低優(yōu)先級的圖形聲效或是效果，比如調整每一個(gè)頻率區間的增益度。
它支持的濾波器有如下這些：
每一個(gè)濾波器都含有一定量的，作用于不同頻率的增益和質(zhì)量控制選項。低通濾波器保證低頻率的頻寬，同時(shí)丟棄高頻譜段的聲波。間斷點(diǎn)取決于頻率值，但是Q點(diǎn)確是不確定的。我們只能說(shuō)Q點(diǎn)由波形決定，卻不知道在哪兒。增益僅僅影響幾個(gè)確定的濾波器，比如像低架濾波器和峰值濾波器，卻不能影響低通濾波器。
下面這個(gè)例子使用低通濾波器來(lái)將音頻實(shí)例中的低音部分過(guò)濾出來(lái)。
// 創(chuàng )建濾波器var filter = context.createBiquadFilter();// 創(chuàng )建音頻混音組source.connect(filter);filter.connect(context.destination);// 設定低通濾波器filter.type = 0; // 低通濾波器。請參閱手冊filter.frequency.value = 440; // 設定頻率為440Hz// 播放聲音source.noteOn(0);
慣例，下面的演示是上面代碼的應用。不同的是一個(gè)開(kāi)關(guān)可以控制是否打開(kāi)濾波器，兩個(gè)滑條可以控制濾波器效果。
在一般情況下，頻率控制需要進(jìn)行調整。因為對數函數控制的規模因人而異（A4是440Hz，A5是880Hz）。想知道詳細的控制方法，請參考上面演示的源碼。
最后的最后，請注意這個(gè)是否打開(kāi)濾波器的開(kāi)關(guān)。因為這個(gè)開(kāi)關(guān)可以動(dòng)態(tài)地改變混音組的組成。我們調用node.disconnect(outputNumber)來(lái)斷開(kāi)與實(shí)例的鏈接。如果斷開(kāi)后希望重連，那么我們可以這么做：
// 將濾波器與實(shí)例斷開(kāi)source.disconnect(0);filter.disconnect(0);// 直接與實(shí)例相連source.connect(context.destination);
我們已經(jīng)將API的概況介紹的差不多了，從最基礎的載入播放到特效都有。那么，是時(shí)間開(kāi)始試試做自己的網(wǎng)頁(yè)音頻應用了。
如果你在尋找靈感，許多設計師已經(jīng)通過(guò)此API創(chuàng )造了許多優(yōu)秀的作品。舉幾個(gè)例子吧：
聯(lián)系客服
