用HTML5 Audio API開(kāi)發(fā)游戲音樂(lè)
注意：本文討論的API尚未最終確定，仍在不斷變化。請(qǐng)?jiān)谧约旱捻?xiàng)目中謹(jǐn)慎使用。
介 紹
音頻在很大程度上使得多媒體體驗(yàn)非常引人注目。如果你曾經(jīng)嘗試在關(guān)閉聲音的情況下看電影，你就很可能已經(jīng)注意到了這一點(diǎn)。
游戲也不例外！我最喜愛(ài)的視頻游戲的回憶里包含了音樂(lè)和聲效。在二十年后的今天，大多情況下，當(dāng)玩我最?lèi)?ài)的游戲時(shí)，我仍然不能把“塞爾達(dá)”里近藤浩二的樂(lè)曲和馬特大氣的暗黑配樂(lè)從我的頭腦里驅(qū)逐掉。這同樣適用于音效，例如魔獸里單位實(shí)時(shí)點(diǎn)擊的響應(yīng)，以及任天堂的經(jīng)典例子。
游戲的音頻提出了一些有趣的挑戰(zhàn)。要?jiǎng)?chuàng)建令人著迷的游戲音樂(lè)，設(shè)計(jì)人員需要調(diào)節(jié)潛在的不可預(yù)知的狀態(tài)。實(shí)際上，部分游戲能持續(xù)未知的時(shí)間長(zhǎng)度，聲音可以與環(huán)境互動(dòng)，并以復(fù)雜的方式混合起來(lái)，例如室內(nèi)效果和相對(duì)聲音定位。最后，可能有大量的一次播放聲效，這需要不錯(cuò)的混合效果和在渲染時(shí)沒(méi)有性能損失。
網(wǎng)頁(yè)上的游戲音頻
簡(jiǎn)單的游戲使用<audio>標(biāo)簽可能就足夠了。然而，許多瀏覽器提供的簡(jiǎn)陋實(shí)現(xiàn)導(dǎo)致音頻毛刺和高延遲的出現(xiàn)。這可能只是暫時(shí)性的問(wèn)題，因?yàn)閺S商們都在努力改進(jìn)各自的實(shí)現(xiàn)。要了解<audio>標(biāo)簽的支持情況，我們可以使用areweplayingyet.org所提供的優(yōu)秀測(cè)試工具。
一旦深入<audio>標(biāo)簽規(guī)范，就會(huì)清楚了解到有很多事情根本不能用它實(shí)現(xiàn)。這并不奇怪，因?yàn)樗饕辉O(shè)計(jì)來(lái)支持多媒體播放。這些限制包括：
- 無(wú)法為聲音信號(hào)使用濾波器
- 無(wú)法訪問(wèn)原始的PCM（宇捷：即WAV）數(shù)據(jù)
- 沒(méi)有來(lái)源和聽(tīng)眾位置、方向的概念
- 沒(méi)有細(xì)粒度的計(jì)時(shí)
在下文中，我將深入介紹一些用WebAudio API編寫(xiě)游戲音頻方面的內(nèi)容。在入門(mén)教程里可以了解到此API的簡(jiǎn)單介紹。
背景音樂(lè)
游戲里往往有循環(huán)播放的背景音樂(lè)。例如，一個(gè)背景音軌如下：
如果你的循環(huán)音樂(lè)很短并且已知，會(huì)相當(dāng)?shù)臒┤恕．?dāng)玩家被困在一個(gè)區(qū)域或者關(guān)卡上，會(huì)同時(shí)連續(xù)播放相同的背景音樂(lè)，我們可能需要逐漸淡出來(lái)防止讓玩家厭煩。另一種策略是，根據(jù)游戲中的上下文，把不同的音效強(qiáng)度通過(guò)逐漸的淡入淡出混合起來(lái)。
如果你的玩家在一個(gè)史詩(shī)般的BOSS關(guān)卡里，可能需要對(duì)幾個(gè)不同的情緒范圍進(jìn)行混音，例如從藝術(shù)氛圍到有心理暗示的氛圍再到激烈的氛圍。音樂(lè)合成軟件通常允許你通過(guò)選擇音軌集合來(lái)導(dǎo)出幾種混音（它們具有同樣長(zhǎng)度）。這樣音軌之間就有某種內(nèi)部一致性，避免出現(xiàn)從一個(gè)音軌切換到另一個(gè)時(shí)出現(xiàn)不和諧的轉(zhuǎn)換過(guò)渡。
然后，利用WebAudio API，你可以使用某些類(lèi)例如BufferLoader通過(guò)XHR導(dǎo)入所有這些音效樣本（這在介紹網(wǎng)絡(luò)音頻API的文章中進(jìn)行了深入介紹）。加載音效需要時(shí)間，所以這些在游戲中使用的音效在每一關(guān)開(kāi)始時(shí)，應(yīng)該在頁(yè)面加載時(shí)同時(shí)載入，或者在播放器播放時(shí)增量加載。
接下來(lái)，你需要為每個(gè)節(jié)點(diǎn)創(chuàng)建一個(gè)源，并為每個(gè)源創(chuàng)建一個(gè)增益節(jié)點(diǎn)，連接圖如下：
完成之后，你可以在一個(gè)循環(huán)中同時(shí)回放這些音效源，因?yàn)樗鼈兌季哂邢嗤拈L(zhǎng)度，WebAudio API將保證它們保持一致。由于最后的BOSS戰(zhàn)時(shí)音效風(fēng)格會(huì)變得相近或更不同，游戲可以使用類(lèi)似于下面的增量算法來(lái)改變鏈中各節(jié)點(diǎn)對(duì)應(yīng)的增益值：
- // Assume gains is an array of AudioGainNode, normVal is the intensity
- // between 0 and 1.
- var value = normVal * (gains.length - 1);
- // First reset gains on all nodes.
- for (var i = 0; i < gains.length; i++) {
- gains[i].gain.value = 0;
- }
- // Decide which two nodes we are currently between, and do an equal
- // power crossfade between them.
- var leftNode = Math.floor(value);
- // Normalize the value between 0 and 1.
- var x = value - leftNode;
- var gain1 = Math.cos(x * 0.5*Math.PI);
- var gain2 = Math.cos((1.0 - x) * 0.5*Math.PI);
- // Set the two gains accordingly.
- gains[leftNode].gain.value = gain1;
- // Check to make sure that there's a right node.
- if (leftNode < gains.length - 1) {
- // If there is, adjust its gain.
- gains[leftNode + 1].gain.value = gain2;
- }
在上述方法中，有兩個(gè)音效源同時(shí)播放，我們使用同等功率的曲線（如介紹所述）從它們之間淡入淡出。下面的示例使用了這一策略，演示的背景音樂(lè)在魔獸爭(zhēng)霸2的主題上逐漸增強(qiáng)：
缺少的環(huán)節(jié)：Web Audio的Audio標(biāo)簽
現(xiàn)在許多游戲開(kāi)發(fā)商為背景音樂(lè)使用<audio>標(biāo)簽，因?yàn)樗浅＿m合流媒體內(nèi)容?，F(xiàn)在你可以通過(guò)<audio>標(biāo)簽把內(nèi)容帶入網(wǎng)絡(luò)音頻的上下文。
<audio>標(biāo)簽支持流媒體相當(dāng)有用，因?yàn)樗梢宰屇懔⒓床シ疟尘耙魳?lè)，而無(wú)須等待下載所有內(nèi)容。在網(wǎng)絡(luò)音頻API支持音頻流之后，你可以操作或分析它們。下面的例子為通過(guò)<audio>標(biāo)簽播放的音樂(lè)使用了一個(gè)低通濾波器：
- var audioElement = document.querySelector('audio');
- var mediaSourceNode = context.createMediaElementSource(audioElement);
- // Create the filter
- var filter = context.createBiquadFilter();
- // Create the audio graph.
- mediaSourceNode.connect(filter);
- filter.connect(context.destination);
關(guān)于<audio>標(biāo)簽和網(wǎng)絡(luò)音頻API整合更多的討論，可以看看這篇短文。
音 效
游戲經(jīng)常在響應(yīng)用戶輸入或者游戲狀態(tài)改變時(shí)播放聲音效果。但是像背景音樂(lè)一樣，音效可以很快的讓用戶厭倦。 為了避免這種情況，最好有一個(gè)音效池放置相似但是不同的音效。 這可以從輕微變化到急劇變化間通過(guò)固定長(zhǎng)度來(lái)過(guò)渡，像魔獸系列里點(diǎn)擊各單位的時(shí)候。
游戲音效的另外一個(gè)關(guān)鍵點(diǎn)是可以同時(shí)有多個(gè)。想象一下，你與多個(gè)演員拍攝槍?xiě)?zhàn)時(shí)。每個(gè)機(jī)槍每秒觸發(fā)多次，造成幾十個(gè)音效同時(shí)播放。從多個(gè)源同時(shí)播放音效，還要對(duì)音效源精確計(jì)時(shí)，是網(wǎng)絡(luò)音頻API真正的亮點(diǎn)。
下面的例子演示了由多個(gè)單獨(dú)子彈樣本組成的機(jī)槍?zhuān)鋭?chuàng)建了多個(gè)播放時(shí)間錯(cuò)開(kāi)的聲源。
- var time = context.currentTime;
- for (var i = 0; i < rounds; i++) {
- var source = this.makeSource(this.buffers[M4A1]);
- source.noteOn(time + i * interval);
- }
下面是這個(gè)代碼的效果：
如果你覺(jué)得聲音太響了，我感到抱歉。我們將在后面的章節(jié)討論測(cè)量和動(dòng)態(tài)壓縮。
現(xiàn)在，如果你游戲里所有的機(jī)槍都像這樣響起，那將相當(dāng)無(wú)聊。當(dāng)然，它們會(huì)基于目標(biāo)的距離和相對(duì)位置而有所差異（稍后討論），但即使這樣做可能還不夠。幸運(yùn)的是，網(wǎng)絡(luò)音頻API提供了對(duì)上面的示例進(jìn)行輕松調(diào)整的方式，主要有兩種：
- 發(fā)射子彈時(shí)間上微妙的變化
- 改變每個(gè)音效的播放速率（同時(shí)改變音高），以更好地模擬現(xiàn)實(shí)世界中的隨機(jī)性。
這兩種方法的效果如下：
對(duì)于這些技術(shù)在現(xiàn)實(shí)生活中的實(shí)際例子，可以看看臺(tái)球桌的演示 ，它采用了隨機(jī)抽樣和變化的播放速率來(lái)表現(xiàn)更有趣的球的碰撞聲。
3D定位音效
游戲往往設(shè)定在一個(gè)2D或者3D的世界里。在這樣的情況下，立體定位的音頻可以大大增加沉浸感的體驗(yàn)。幸運(yùn)的是，網(wǎng)絡(luò)音頻API帶來(lái)了內(nèi)置硬件加速的位置音頻特性，可以直接的使用。 順便說(shuō)一下，你應(yīng)該確保有立體聲揚(yáng)聲器（最好是耳機(jī)）來(lái)運(yùn)行下面的例子。 在下面的示例中，你可以通過(guò)在畫(huà)布上滾動(dòng)鼠標(biāo)滾輪來(lái)更改聲源的角度。
上面的例子中，有一個(gè)監(jiān)聽(tīng)者在畫(huà)布正中（人的圖標(biāo)），同時(shí)鼠標(biāo)控制聲源（喇叭圖標(biāo)）的位置，這是使用AudioPannerNode實(shí)現(xiàn)這種效果的簡(jiǎn)單例子。它的基本思想是通過(guò)設(shè)置音頻信號(hào)源的位置響應(yīng)鼠標(biāo)的移動(dòng)，如下所示：
- PositionSample.prototype.changePosition = function(position) {
- // Position coordinates are in normalized canvas coordinates
- // with -0.5 < x, y < 0.5
- if (position) {
- if (!this.isPlaying) {
- this.play();
- }
- var mul = 2;
- var x = position.x / this.size.width;
- var y = -position.y / this.size.height;
- this.panner.setPosition(x * mul, y * mul, -0.5);
- } else {
- this.stop();
- }
- };
關(guān)于網(wǎng)絡(luò)音頻空間化處理需要了解的事情：
- 監(jiān)聽(tīng)者默認(rèn)在原點(diǎn)（0，0，0）。
- 網(wǎng)絡(luò)音頻位置API沒(méi)有單位，所以我引入了一個(gè)乘數(shù)使得演示的聲效更好。
- 網(wǎng)絡(luò)音頻采用Y-型直角坐標(biāo)系（和大多數(shù)計(jì)算機(jī)圖形系統(tǒng)相反）。 這就是為什么我在上面的代碼片段進(jìn)行了y軸的變換。
高級(jí)：音錐
定位模型非常強(qiáng)大，而且相當(dāng)先進(jìn)，主要基于OpenAL。詳細(xì)信息請(qǐng)查看上述規(guī)范的第3和第4節(jié)。
在有單一的AudioListener連接到網(wǎng)絡(luò)音頻API的情況下，它可以通過(guò)位置和方向配置空間。每個(gè)源可以通過(guò)一個(gè)AudioPannerNode（音頻聲像節(jié)點(diǎn)）來(lái)使得音頻輸入空間化。聲像節(jié)點(diǎn)有位置和方向，以及距離和方向性模型。
距離模型指定的增益取決于和源的接近程度，而方向模型可以通過(guò)指定內(nèi)外錐來(lái)配置，以決定監(jiān)聽(tīng)者在內(nèi)部錐里，在內(nèi)外錐之間，或在外部錐之外時(shí)增益的大?。ㄍǔ樨?fù)值）。
- var panner = context.createPanner();
- panner.coneOuterGain = 0.5;
- panner.coneOuterAngle = 180;
- panner.coneInnerAngle = 0;
雖然我的例子在2D空間，但是這種模式很容易推廣到三維。例如3D聲音空間化的例子可以看看這個(gè)位置演示。另外對(duì)于位置來(lái)說(shuō)，網(wǎng)絡(luò)音頻模型也可以選擇多普勒頻移的速度。這個(gè)例子展示了多普勒效應(yīng)的詳細(xì)信息。
關(guān)于這一主題的更多信息，可以閱讀混合定位音頻和WebGL的詳細(xì)教程 。
室內(nèi)效果和濾波器
在現(xiàn)實(shí)中，聲音被感覺(jué)的方式很大程度上取決于聲音所在的房間。相同吱吱作響的門(mén)在地下室與大型的開(kāi)放式大廳里相比會(huì)發(fā)出相當(dāng)不同的聲音。高產(chǎn)值的游戲?qū)?huì)模仿這些影響，因?yàn)闉槊總€(gè)環(huán)境創(chuàng)建一套獨(dú)立的音效是相當(dāng)昂貴的，并且會(huì)產(chǎn)生相當(dāng)多的材料和大量的游戲數(shù)據(jù)。
嚴(yán)格地說(shuō)，描述原始聲音和現(xiàn)實(shí)中所聽(tīng)到之間不同的音頻術(shù)語(yǔ)是脈沖響應(yīng)。這些脈沖響應(yīng)可以被精心錄制，其實(shí)也有網(wǎng)站為了方便你的使用存放了許多這種預(yù)先錄制的脈沖響應(yīng)文件（作為音頻方式存儲(chǔ)）。
對(duì)于如何從一個(gè)給定的環(huán)境創(chuàng)建脈沖響應(yīng)的更多信息，可以通讀網(wǎng)絡(luò)音頻API規(guī)范卷積部分的“錄音設(shè)置”一節(jié)。
更重要的是針對(duì)我們的目標(biāo)，網(wǎng)絡(luò)音頻API提供了一個(gè)簡(jiǎn)單的方法來(lái)在我們的聲音里應(yīng)用脈沖響應(yīng)，即通過(guò)使用ConvolverNode的方式。
- // Make a source node for the sample.
- var source = context.createBufferSource();
- source.buffer = this.buffer;
- // Make a convolver node for the impulse response.
- var convolver = context.createConvolver();
- convolver.buffer = this.impulseResponseBuffer;
- // Connect the graph.
- source.connect(convolver);
- convolver.connect(context.destination);
下面的示例展示了一些不同脈沖響應(yīng)下的軍事演講：
還可以看看網(wǎng)絡(luò)音頻API規(guī)范頁(yè)面上的房間效果演示，以及這個(gè)讓你控制通過(guò)一個(gè)偉大的爵士標(biāo)準(zhǔn)混合干（原料）和濕（通過(guò)卷積處理）的例子。
最后的倒計(jì)時(shí)
現(xiàn)在你已經(jīng)創(chuàng)建了一個(gè)游戲，添加了位置音頻，而且現(xiàn)在在你的圖里有大量的同時(shí)播放的AudioNodes。 太棒了，但是還有一件事要考慮：
由于多種聲音互相疊加起來(lái)播放，你可能會(huì)發(fā)現(xiàn)在某種情況下，聲音超過(guò)了揚(yáng)聲器的最大承受能力。就像圖像超出了畫(huà)布邊界的情況一樣，聲音也會(huì)在波形超過(guò)最大閾值時(shí)進(jìn)行削波，導(dǎo)致明顯的失真。波形看起來(lái)會(huì)像下面這樣：
這里有一個(gè)真實(shí)削波的例子。波形看起來(lái)相當(dāng)糟糕：
聽(tīng)起來(lái)也很糟糕：
聽(tīng)到像上面這樣嚴(yán)重扭曲的音樂(lè)是很?chē)?yán)重的事，或者與此相反，過(guò)分的混合會(huì)迫使聽(tīng)眾調(diào)大音量。如果你現(xiàn)在有這種情況，你真的需要立即解決它！
檢測(cè)削波
從技術(shù)角度看，削波發(fā)生在任何一個(gè)通道的信號(hào)值超出有效范圍即-1和1之間時(shí)。一旦檢測(cè)到削波反生時(shí)，視覺(jué)反饋會(huì)非常有用。要可靠的實(shí)現(xiàn)這點(diǎn)，可以把JavaScriptAudioNode放到你的圖里。音頻圖將會(huì)按如下進(jìn)行設(shè)置：
- // Assume entire sound output is being piped through the mix node.
- var meter = context.createJavaScriptNode(2048, 1, 1);
- meter.onaudioprocess = processAudio;
- mix.connect(meter);
- meter.connect(context.destination);
同時(shí)通過(guò)下面的processAudio方法可以檢測(cè)到削波：
- function processAudio(e) {
- var buffer = e.inputBuffer.getChannelData(0);
- var isClipping = false;
- // Iterate through buffer to check if any of the |values| exceeds 1.
- for (var i = 0; i < buffer.length; i++) {
- var absValue = Math.abs(buffer[i]);
- if (absValue >= 1) {
- isClipping = true;
- break;
- }
- }
- }
在通常情況下要小心，因?yàn)樾阅芊矫娴脑?，不要過(guò)度的使用JavaScriptAudioNode。 在這種情況下，一種替代的方法是為getByteFrequencyData在音頻圖里加入RealtimeAnalyserNode，在渲染時(shí)通過(guò)requestAnimationFrame來(lái)檢測(cè)。這個(gè)方法更有效，但會(huì)錯(cuò)過(guò)多數(shù)信號(hào)（包括有可能削波的地方），因?yàn)殇秩咀疃喟l(fā)生60次，而音頻信號(hào)的變化更為迅速。
因?yàn)橄鞑ǖ臋z測(cè)非常重要，未來(lái)我們很可能將看到網(wǎng)絡(luò)音頻API節(jié)點(diǎn)內(nèi)置MeterNode。
防止削波
通過(guò)調(diào)整主要AudioGainNode的增益，你可以控制混音的水平來(lái)防止削波。 然而在實(shí)踐中，因?yàn)槟阌螒蛑兴シ诺穆曇艨赡苋Q于大量因素，所以決定主增益值來(lái)防止所有情況下的削波是相當(dāng)困難的。在通常情況下，你應(yīng)該調(diào)整增益來(lái)預(yù)期最壞的情況，但這是一門(mén)藝術(shù)，而不是科學(xué)。
要知道這是具體如何實(shí)現(xiàn)的，下面是一個(gè)示例，在此你可以調(diào)整主增益。如果增益設(shè)置過(guò)高，會(huì)導(dǎo)致聲音削波。監(jiān)視器會(huì)變成紅色來(lái)給出削波的視覺(jué)反饋。下面的音響生態(tài)環(huán)境是Disco Dan的混音作品，原曲是由Yasunori Mitsuda所做的偉大的“超時(shí)空之輪”。
加一點(diǎn)糖
音樂(lè)和游戲制作中經(jīng)常使用效果器來(lái)平滑信號(hào)和控制尖峰。此功能在網(wǎng)絡(luò)音頻世界里可以通過(guò)DynamicsCompressorNode 來(lái)實(shí)現(xiàn)，可以在你的音頻圖加入一個(gè)更響亮，更豐富，更飽滿的音色，這也有利于削波。直接引用規(guī)范里的話，這個(gè)節(jié)點(diǎn)
“...降低了信號(hào)最響亮部分的體積，并提升了最柔軟部分的音量... 尤其重要的是在游戲和音樂(lè)應(yīng)用里，當(dāng)大量獨(dú)立的聲音播放時(shí)，控制信號(hào)整體水平，并有助于避免削波。”
使用動(dòng)態(tài)壓縮通常來(lái)說(shuō)是一個(gè)好主意，尤其是在游戲的設(shè)置里，正如前面所討論的一樣，你并不知道到底此時(shí)什么聲音將會(huì)何時(shí)播放。DinahMoe實(shí)驗(yàn)室的Plink是很好的例子，因?yàn)槁曇舻幕胤磐耆Q于你和其他參與者。效果器在大多數(shù)情況下是有用的，除了一些罕見(jiàn)的情況外，而這種情況下你可以使用已經(jīng)精心調(diào)整過(guò)，并且聽(tīng)起來(lái)“恰到好處”的曲目。
它的實(shí)現(xiàn)是一件簡(jiǎn)單的事情，只需要在你的音頻圖里把DynamicsCompressorNode作為目標(biāo)前的最后一個(gè)節(jié)點(diǎn)添加進(jìn)去。
- // Assume the output is all going through the mix node.
- var compressor = context.createDynamicsCompressor();
- mix.connect(compressor);
- compressor.connect(context.destination);
關(guān)于動(dòng)態(tài)壓縮的更多細(xì)節(jié)，Wikipedia上的這篇文章非常翔實(shí)。
總結(jié)一下，仔細(xì)檢查削波，通過(guò)插入主增益節(jié)點(diǎn)來(lái)防止它的出現(xiàn)。然后使用動(dòng)態(tài)效果器節(jié)點(diǎn)來(lái)收緊整個(gè)混音。你的音頻圖可能看起來(lái)像這樣：
結(jié) 論
以上內(nèi)容涵蓋了我認(rèn)為使用網(wǎng)絡(luò)音頻API來(lái)開(kāi)發(fā)游戲音樂(lè)最重要的方面。有了這些技術(shù)，可以在你的瀏覽器上構(gòu)建真正有吸引力的音頻體驗(yàn)。在我結(jié)束本文之前，給你一個(gè)提示：如果你的瀏覽器標(biāo)簽使用page visibility API切換到了后臺(tái)，一定要讓聲音暫停，否則你會(huì)為用戶提供一個(gè)潛在的令人厭煩的體驗(yàn)。 對(duì)于關(guān)于網(wǎng)絡(luò)音頻的其他信息，需要在入門(mén)的文章進(jìn)行更多了解。如果你有問(wèn)題，看看它是否已經(jīng)在網(wǎng)絡(luò)音頻FAQ里得到解答。最后，如果你有其他問(wèn)題，可以在Stack Overflow上的web-audio標(biāo)簽下提問(wèn)。 在本文結(jié)束前，讓我為你展示網(wǎng)絡(luò)音頻API現(xiàn)在在實(shí)際游戲里的用途：
譯自：http://www.html5rocks.com/en/tutorials/webaudio/games/
原文鏈接：http://blog.csdn.net/hfahe/article/details/7443276
【編輯推薦】
