Web Audio API के साथ गेम ऑडियो डेवलप करना

परिचय

ऑडियो, मल्टीमीडिया अनुभवों को शानदार बनाने में अहम भूमिका निभाता है. अगर आपने कभी बिना आवाज़ के कोई फ़िल्म देखने की कोशिश की है, तो शायद आपने इस पर ध्यान दिया होगा.

गेम भी इससे अलग नहीं हैं! वीडियो गेम से जुड़ी मेरी सबसे अच्छी यादें, संगीत और साउंड इफ़ेक्ट की हैं. अब, कई मामलों में, अपने पसंदीदा गेम खेलने के करीब दो दशक बाद भी, मुझे कोजी कोंडो के ज़ेल्डा कंपोज़िशन और मैट उएलमेन के शानदार डियाब्लो साउंडट्रैक की याद आती है. साउंड इफ़ेक्ट के लिए भी यही बात लागू होती है. जैसे, Warcraft में यूनिट पर क्लिक करने पर मिलने वाले रिस्पॉन्स और Nintendo के क्लासिक गेम के सैंपल.

गेम के ऑडियो से जुड़ी कुछ दिलचस्प चुनौतियां होती हैं. गेम के लिए बेहतरीन संगीत बनाने के लिए, डिज़ाइनर को गेम की ऐसी स्थिति के हिसाब से संगीत को अडजस्ट करना पड़ता है जिसका अंदाज़ा लगाना मुश्किल हो. असल में, गेम के कुछ हिस्से अनिश्चित समय तक चल सकते हैं. साथ ही, आवाज़ें आस-पास के माहौल के साथ इंटरैक्ट कर सकती हैं और कई तरीकों से मिक्स हो सकती हैं. जैसे, कमरे के इफ़ेक्ट और रिलेटिव साउंड पोज़िशनिंग. आखिर में, एक साथ कई आवाज़ें चलाई जा सकती हैं. इन सभी आवाज़ों को एक साथ अच्छी तरह से सुना जाना चाहिए और परफ़ॉर्मेंस पर असर डाले बिना रेंडर किया जाना चाहिए.

वेब पर गेम का ऑडियो

आसान गेम के लिए, <audio> टैग का इस्तेमाल करना काफ़ी हो सकता है. हालांकि, कई ब्राउज़र में इसे ठीक से लागू नहीं किया जाता है. इस वजह से, ऑडियो में गड़बड़ियां और ज़्यादा इंतज़ार का समय जैसी समस्याएं आती हैं. उम्मीद है कि यह समस्या कुछ समय के लिए है, क्योंकि वेंडर अपने-अपने सिस्टम को बेहतर बनाने के लिए कड़ी मेहनत कर रहे हैं. <audio> टैग की स्थिति के बारे में जानने के लिए, areweplayingyet.org पर एक अच्छा टेस्ट सुइट मौजूद है.

हालांकि, <audio> टैग की खास जानकारी को गहराई से देखने पर, यह साफ़ हो जाता है कि इससे कई चीज़ें नहीं की जा सकतीं. इसमें हैरान होने की कोई बात नहीं है, क्योंकि इसे मीडिया प्लेबैक के लिए डिज़ाइन किया गया था. इनमें ये पाबंदियां शामिल हैं:

  • साउंड सिग्नल पर फ़िल्टर लागू करने की सुविधा नहीं है
  • रॉ पीसीएम डेटा को ऐक्सेस करने का कोई तरीका नहीं है
  • सोर्स और लिसनर की पोज़िशन और डायरेक्शन का कोई कॉन्सेप्ट नहीं होता
  • हर एक के लिए अलग समय तय नहीं किया जा सकता.

इस लेख के बाकी हिस्से में, मैं इनमें से कुछ विषयों के बारे में ज़्यादा जानकारी दूंगा. ये विषय, Web Audio API की मदद से लिखे गए गेम ऑडियो के बारे में हैं. इस एपीआई के बारे में कम शब्दों में जानकारी पाने के लिए, इस्तेमाल शुरू करने से जुड़ा ट्यूटोरियल देखें.

बैकग्राउंड संगीत

गेम में अक्सर बैकग्राउंड संगीत लूप में चलता है.

अगर आपका लूप छोटा है और उसका अंदाज़ा लगाया जा सकता है, तो यह बहुत परेशान करने वाला हो सकता है. अगर कोई खिलाड़ी किसी लेवल या जगह पर अटक जाता है और बैकग्राउंड में एक ही सैंपल लगातार चलता रहता है, तो ट्रैक को धीरे-धीरे फ़ेड आउट करना बेहतर हो सकता है. इससे खिलाड़ी को परेशानी नहीं होगी. एक और रणनीति यह है कि अलग-अलग इंटेंसिटी के मिक्स हों, जो गेम के कॉन्टेक्स्ट के हिसाब से धीरे-धीरे एक-दूसरे में क्रॉसफ़ेड होते हों.

उदाहरण के लिए, अगर आपका प्लेयर किसी ऐसे ज़ोन में है जहां उसे किसी बॉस से लड़ना है, तो आपके पास कई तरह के मिक्स हो सकते हैं. इनमें अलग-अलग तरह के इमोशन शामिल हो सकते हैं. जैसे, माहौल के हिसाब से, आने वाले खतरे का अंदाज़ा देने वाले या इंटेंस. म्यूज़िक सिंथेसिस सॉफ़्टवेयर की मदद से, अक्सर किसी गाने के कई मिक्स (एक ही अवधि के) एक्सपोर्ट किए जा सकते हैं. इसके लिए, एक्सपोर्ट में इस्तेमाल किए जाने वाले ट्रैक का सेट चुनना होता है. इससे, आपके वीडियो में एक जैसा संगीत बना रहता है. साथ ही, एक ट्रैक से दूसरे ट्रैक पर क्रॉस-फ़ेड करते समय, संगीत में अचानक होने वाले बदलावों से बचा जा सकता है.

Garageband

इसके बाद, Web Audio API का इस्तेमाल करके, इन सभी सैंपल को XHR के ज़रिए BufferLoader क्लास जैसी किसी चीज़ का इस्तेमाल करके इंपोर्ट किया जा सकता है. इसके बारे में, Web Audio API के बारे में जानकारी देने वाले लेख में ज़्यादा जानकारी दी गई है. साउंड लोड होने में समय लगता है. इसलिए, गेम में इस्तेमाल की जाने वाली ऐसेट को पेज लोड होने पर, लेवल की शुरुआत में या फिर गेम खेलते समय धीरे-धीरे लोड किया जाना चाहिए.

इसके बाद, हर नोड के लिए एक सोर्स और हर सोर्स के लिए एक गेन नोड बनाएं. साथ ही, ग्राफ़ को कनेक्ट करें.

ऐसा करने के बाद, इन सभी सोर्स को एक साथ लूप में चलाया जा सकता है. साथ ही, इन सभी की अवधि एक जैसी होने की वजह से, Web Audio API यह पक्का करेगा कि वे अलाइन रहें. जैसे-जैसे किरदार, फ़ाइनल बॉस बैटल के करीब या दूर जाता है, गेम चेन में मौजूद हर नोड के लिए गेन वैल्यू को बदल सकता है. इसके लिए, गेन अमाउंट एल्गोरिदम का इस्तेमाल किया जा सकता है. जैसे:

// 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;
}

ऊपर दिए गए तरीके में, दो सोर्स एक साथ चलते हैं. हम इक्वल पावर कर्व का इस्तेमाल करके, उनके बीच क्रॉसफ़ेड करते हैं. इसके बारे में शुरुआती जानकारी में बताया गया है.

आज-कल कई गेम डेवलपर, बैकग्राउंड म्यूज़िक के लिए <audio> टैग का इस्तेमाल करते हैं. इसकी वजह यह है कि यह टैग, स्ट्रीमिंग कॉन्टेंट के लिए काफ़ी सही है. अब <audio> टैग से कॉन्टेंट को वेब ऑडियो कॉन्टेक्स्ट में लाया जा सकता है.

यह तकनीक काफ़ी काम की हो सकती है, क्योंकि <audio> टैग, स्ट्रीमिंग कॉन्टेंट के साथ काम कर सकता है. इससे बैकग्राउंड म्यूज़िक को तुरंत चलाया जा सकता है. इसके लिए, आपको पूरा म्यूज़िक डाउनलोड होने का इंतज़ार नहीं करना पड़ता. स्ट्रीम को Web Audio API में लाकर, उसमें बदलाव किया जा सकता है या उसका विश्लेषण किया जा सकता है. नीचे दिए गए उदाहरण में, <audio> टैग की मदद से चलाए गए संगीत पर लो पास फ़िल्टर लागू किया गया है:

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);

<audio> टैग को वेब ऑडियो एपीआई के साथ इंटिग्रेट करने के बारे में ज़्यादा जानने के लिए, यह छोटा लेख पढ़ें.

साउंड इफ़ेक्ट

गेम में अक्सर उपयोगकर्ता के इनपुट या गेम की स्थिति में बदलाव के जवाब में, साउंड इफ़ेक्ट चलाए जाते हैं. हालांकि, बैकग्राउंड म्यूज़िक की तरह ही, साउंड इफ़ेक्ट भी जल्दी ही परेशान करने वाले हो सकते हैं. इससे बचने के लिए, अक्सर एक जैसी लेकिन अलग-अलग आवाज़ों का पूल होना फ़ायदेमंद होता है. यह पैरों की आवाज़ के सैंपल में मामूली बदलावों से लेकर, बड़े बदलावों तक हो सकता है. जैसा कि Warcraft सीरीज़ में यूनिट पर क्लिक करने पर दिखता है.

गेम में साउंड इफ़ेक्ट की एक और खास बात यह है कि एक साथ कई साउंड इफ़ेक्ट हो सकते हैं. मान लीजिए कि आप एक गनफ़ाइट के बीच में हैं, जहां कई कलाकार मशीन गन से गोलियां चला रहे हैं. हर मशीन गन से एक सेकंड में कई बार गोलियां चलती हैं. इस वजह से, एक ही समय पर कई साउंड इफ़ेक्ट सुनाई देते हैं. एक साथ कई सोर्स से, सटीक समय पर साउंड चलाना, Web Audio API की एक बेहतरीन सुविधा है.

नीचे दिए गए उदाहरण में, कई अलग-अलग बुलेट सैंपल से मशीन गन राउंड बनाया गया है. इसके लिए, कई साउंड सोर्स बनाए गए हैं, जिनका प्लेबैक समय के हिसाब से अलग-अलग है.

var time = context.currentTime;
for (var i = 0; i < rounds; i++) {
    var source = this.makeSource(this.buffers[M4A1]);
    source.noteOn(time + i - interval);
}

अब अगर आपके गेम में सभी मशीन गन की आवाज़ बिलकुल ऐसी ही हो, तो यह काफ़ी बोरिंग होगा. बेशक, टारगेट से दूरी और रिलेटिव पोज़िशन के हिसाब से आवाज़ अलग-अलग होगी. इस बारे में हम बाद में बात करेंगे. हालांकि, इतना ही काफ़ी नहीं है. खुशकिस्मती से, Web Audio API की मदद से, ऊपर दिए गए उदाहरण में दो तरीकों से बदलाव किया जा सकता है:

  1. With a subtle shift in time between bullets firing
  2. हर सैंपल के playbackRate में बदलाव करके (पिच में भी बदलाव करके), असल दुनिया में होने वाली रैंडमनेस को बेहतर तरीके से सिम्युलेट किया जा सकता है.

इन तकनीकों को असल ज़िंदगी में इस्तेमाल करने का उदाहरण देखने के लिए, पूल टेबल का डेमो देखें. इसमें रैंडम सैंपलिंग का इस्तेमाल किया गया है. साथ ही, गेंद के टकराने की आवाज़ को ज़्यादा दिलचस्प बनाने के लिए, playbackRate में बदलाव किया गया है.

3D पोज़िशनल साउंड

गेम अक्सर 2D या 3D में, कुछ ज्यामितीय प्रॉपर्टी वाली दुनिया में सेट किए जाते हैं. अगर ऐसा है, तो स्टीरियो साउंड की सुविधा से, वीडियो देखने का अनुभव काफ़ी बेहतर हो सकता है. खुशकिस्मती से, Web Audio API में हार्डवेयर से तेज़ी लाने वाली, पोज़िशनल ऑडियो की सुविधाएं पहले से मौजूद होती हैं. इन्हें इस्तेमाल करना काफ़ी आसान है. वैसे, आपको यह पक्का करना चाहिए कि आपके पास स्टीरियो स्पीकर (खास तौर पर हेडफ़ोन) हों, ताकि नीचे दिए गए उदाहरण को समझा जा सके.

ऊपर दिए गए उदाहरण में, कैनवस के बीच में एक लिसनर (व्यक्ति का आइकॉन) है. साथ ही, माउस से सोर्स (स्पीकर का आइकॉन) की पोज़िशन पर असर पड़ता है. ऊपर दिया गया उदाहरण, इस तरह का इफ़ेक्ट पाने के लिए AudioPannerNode का इस्तेमाल करने का एक आसान उदाहरण है. ऊपर दिए गए सैंपल का मुख्य मकसद, ऑडियो सोर्स की पोज़िशन सेट करके माउस के मूवमेंट का जवाब देना है. इसके लिए, यह तरीका अपनाएं:

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();
    }
};

वेब ऑडियो में स्पेशलाइज़ेशन के बारे में ज़रूरी बातें:

  • डिफ़ॉल्ट रूप से, सुनने वाला व्यक्ति ओरिजिन (0, 0, 0) पर होता है.
  • Web Audio positional API में कोई यूनिट नहीं होती. इसलिए, मैंने डेमो को बेहतर बनाने के लिए, एक मल्टीप्लायर का इस्तेमाल किया.
  • वेब ऑडियो, y-is-up कार्टेशियन कोऑर्डिनेट का इस्तेमाल करता है. यह ज़्यादातर कंप्यूटर ग्राफ़िक्स सिस्टम के उलट होता है. इसलिए, मैं ऊपर दिए गए स्निपेट में y-ऐक्सिस को बदल रहा हूं

ऐडवांस: साउंड कोन

पोज़िशनल मॉडल काफ़ी असरदार और ऐडवांस है. यह काफ़ी हद तक OpenAL पर आधारित है. ज़्यादा जानकारी के लिए, ऊपर लिंक की गई खास जानकारी का सेक्शन 3 और 4 देखें.

पोज़िशन मॉडल

वेब ऑडियो एपीआई कॉन्टेक्स्ट से एक AudioListener जुड़ा होता है. इसे पोज़िशन और ओरिएंटेशन के ज़रिए स्पेस में कॉन्फ़िगर किया जा सकता है. हर सोर्स को AudioPannerNode से पास किया जा सकता है. यह इनपुट ऑडियो को स्पेशलाइज़ करता है. पैनर नोड में पोज़िशन और ओरिएंटेशन के साथ-साथ, दूरी और दिशा का मॉडल भी होता है.

डिस्टेंस मॉडल, सोर्स से दूरी के हिसाब से गेन की मात्रा तय करता है. वहीं, डायरेक्शनल मॉडल को इनर और आउटर कोन तय करके कॉन्फ़िगर किया जा सकता है. इससे गेन की मात्रा (आम तौर पर नेगेटिव) तय होती है. ऐसा तब होता है, जब सुनने वाला व्यक्ति इनर कोन के अंदर, इनर और आउटर कोन के बीच या आउटर कोन के बाहर हो.

var panner = context.createPanner();
panner.coneOuterGain = 0.5;
panner.coneOuterAngle = 180;
panner.coneInnerAngle = 0;

हालांकि, मेरा उदाहरण 2D में है, लेकिन यह मॉडल तीसरे डाइमेंशन में आसानी से सामान्य हो जाता है. 3D में साउंड को स्पैशलाइज़ करने का उदाहरण देखने के लिए, यह पोज़िशनल सैंपल देखें. जगह के अलावा, वेब ऑडियो साउंड मॉडल में डॉपलर शिफ़्ट के लिए वेलोसिटी भी शामिल होती है. हालांकि, यह ज़रूरी नहीं है. इस उदाहरण में, डॉप्लर इफ़ेक्ट के बारे में ज़्यादा जानकारी दी गई है.

इस विषय के बारे में ज़्यादा जानकारी के लिए, [पोज़िशनल ऑडियो और WebGL को मिक्स करने][webgl] के बारे में यह ट्यूटोरियल पढ़ें.

रूम इफ़ेक्ट और फ़िल्टर

असल में, आवाज़ कैसी सुनाई देती है, यह काफ़ी हद तक उस कमरे पर निर्भर करता है जिसमें वह आवाज़ सुनी जा रही है. दरवाज़े की चरमराने की आवाज़, बेसमेंट में अलग सुनाई देगी और बड़े हॉल में अलग. जिन गेम को बनाने में ज़्यादा खर्च आता है वे इन इफ़ेक्ट को कॉपी करना चाहेंगे. ऐसा इसलिए, क्योंकि हर एनवायरमेंट के लिए सैंपल का अलग सेट बनाना बहुत महंगा होता है. साथ ही, इससे ज़्यादा ऐसेट और गेम का ज़्यादा डेटा जनरेट होगा.

आसान शब्दों में कहें, तो रॉ साउंड और असल साउंड के बीच के अंतर को ऑडियो की भाषा में इंपल्स रिस्पॉन्स कहते हैं. इन इंपल्स रिस्पॉन्स को रिकॉर्ड करना मुश्किल हो सकता है. हालांकि, ऐसी साइटें हैं जो आपकी सुविधा के लिए, पहले से रिकॉर्ड की गई कई इंपल्स रिस्पॉन्स फ़ाइलों को होस्ट करती हैं. ये फ़ाइलें ऑडियो के तौर पर सेव की जाती हैं.

किसी दिए गए एनवायरमेंट से इंपल्स रिस्पॉन्स बनाने के तरीके के बारे में ज़्यादा जानकारी के लिए, Web Audio API की खास जानकारी के कॉन्वोल्यूशन सेक्शन में "रिकॉर्डिंग सेटअप" पढ़ें.

हमारे मकसद के लिए सबसे अहम बात यह है कि वेब ऑडियो एपीआई, 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);

Web Audio API के स्पेसिफ़िकेशन पेज पर, रूम इफ़ेक्ट का यह डेमो भी देखें. साथ ही, यह उदाहरण भी देखें. इसमें आपको जैज़ स्टैंडर्ड के ड्राई (रॉ) और वेट (कॉन्वॉल्वर के ज़रिए प्रोसेस किए गए) मिक्सिंग को कंट्रोल करने का विकल्प मिलता है.

The final countdown

आपने एक गेम बनाया है और उसमें पोज़िशनल ऑडियो को कॉन्फ़िगर किया है. अब आपके ग्राफ़ में कई AudioNodes हैं और सभी एक साथ चल रहे हैं. बहुत बढ़िया, लेकिन एक और बात का ध्यान रखना ज़रूरी है:

एक से ज़्यादा आवाज़ें एक-दूसरे के ऊपर ओवरलैप होती हैं और उन्हें नॉर्मलाइज़ नहीं किया जाता. इसलिए, ऐसा हो सकता है कि आवाज़ें आपके स्पीकर की क्षमता से ज़्यादा हों. जिस तरह कैनवस की सीमाओं से बाहर जाने पर इमेज कट जाती हैं, उसी तरह वेवफ़ॉर्म के अपनी तय सीमा से ज़्यादा होने पर आवाज़ें भी कट सकती हैं. इससे आवाज़ में साफ़ तौर पर खराबी सुनाई देती है. वेवफ़ॉर्म कुछ ऐसा दिखता है:

क्लिपिंग

यहां क्लिपिंग की सुविधा इस्तेमाल करने का एक उदाहरण दिया गया है. वेवफ़ॉर्म खराब दिख रहा है:

क्लिपिंग

यह ज़रूरी है कि आप ऊपर दिए गए उदाहरण की तरह, आवाज़ में होने वाली तेज़ डिस्टॉर्शन को सुनें. इसके अलावा, बहुत ज़्यादा दबी हुई आवाज़ों को भी सुनें, जिनकी वजह से आपके दर्शकों को आवाज़ बढ़ानी पड़ती है. अगर आप इस स्थिति में हैं, तो आपको इसे ठीक करना होगा!

क्लिपिंग का पता लगाना

तकनीकी तौर पर, क्लिपिंग तब होती है, जब किसी चैनल में सिग्नल की वैल्यू, मान्य रेंज से ज़्यादा हो जाती है. जैसे, -1 और 1 के बीच. इसका पता चलने के बाद, विज़ुअल फ़ीडबैक देना मददगार होता है कि ऐसा हो रहा है. ऐसा करने के लिए, अपने ग्राफ़ में JavaScriptAudioNode डालें. ऑडियो ग्राफ़ को इस तरह सेट अप किया जाएगा:

// 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);

साथ ही, इस processAudio हैंडलर में क्लिपिंग का पता लगाया जा सकता है:

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;
    }
    }
}

आम तौर पर, परफ़ॉर्मेंस को बेहतर बनाए रखने के लिए, JavaScriptAudioNode का ज़्यादा इस्तेमाल न करें. इस मामले में, मीटरिंग को लागू करने का एक अन्य तरीका, रेंडर होने के समय getByteFrequencyData के लिए ऑडियो ग्राफ़ में RealtimeAnalyserNode को पोल कर सकता है. ऐसा requestAnimationFrame के हिसाब से तय किया जाता है. यह तरीका ज़्यादा असरदार है, लेकिन इसमें ज़्यादातर सिग्नल छूट जाते हैं. इनमें वे जगहें भी शामिल हैं जहां यह संभावित रूप से क्लिप करता है. ऐसा इसलिए होता है, क्योंकि रेंडरिंग एक सेकंड में ज़्यादा से ज़्यादा 60 बार होती है, जबकि ऑडियो सिग्नल बहुत तेज़ी से बदलता है.

क्लिप का पता लगाना बहुत ज़रूरी है. इसलिए, ऐसा हो सकता है कि आने वाले समय में हमें पहले से मौजूद MeterNode Web Audio API नोड देखने को मिले.

क्लिपिंग रोकना

मास्टर AudioGainNode पर गेन को अडजस्ट करके, अपने मिक्स को उस लेवल तक कम किया जा सकता है जिससे क्लिपिंग को रोका जा सके. हालांकि, गेम में सुनाई देने वाली आवाज़ें कई बातों पर निर्भर करती हैं. इसलिए, मास्टर गेन की ऐसी वैल्यू तय करना मुश्किल हो सकता है जिससे सभी स्थितियों में क्लिपिंग को रोका जा सके. आम तौर पर, आपको सबसे खराब स्थिति का अनुमान लगाने के लिए, गेन में बदलाव करना चाहिए. हालांकि, यह विज्ञान से ज़्यादा कला है.

थोड़ी सी चीनी डालें

कंप्रेसर का इस्तेमाल आम तौर पर संगीत और गेम प्रोडक्शन में किया जाता है, ताकि सिग्नल को स्मूद किया जा सके और पूरे सिग्नल में स्पाइक को कंट्रोल किया जा सके. यह सुविधा, वेब ऑडियो की दुनिया में DynamicsCompressorNode के ज़रिए उपलब्ध है. इसे आपके ऑडियो ग्राफ़ में शामिल किया जा सकता है, ताकि आवाज़ को ज़्यादा तेज़, बेहतर, और साफ़ बनाया जा सके. साथ ही, इससे क्लिपिंग में भी मदद मिलती है. स्पेसिफ़िकेशन को सीधे तौर पर कोट करते हुए, यह नोड

आम तौर पर, डाइनैमिक कंप्रेशन का इस्तेमाल करना एक अच्छा आइडिया है. खास तौर पर, गेम सेटिंग में. जैसा कि पहले बताया गया है, आपको यह नहीं पता होता कि कौनसी आवाज़ें कब सुनाई देंगी. DinahMoe labs का Plink इसका एक बेहतरीन उदाहरण है. इसमें जो आवाज़ें सुनाई देती हैं वे पूरी तरह से आप पर और इसमें हिस्सा लेने वाले अन्य लोगों पर निर्भर करती हैं. ज़्यादातर मामलों में कंप्रेसर का इस्तेमाल करना फ़ायदेमंद होता है. हालांकि, कुछ मामलों में ऐसा नहीं होता. जैसे, जब आपको ऐसे ट्रैक पर काम करना हो जिन्हें पहले से ही "सही" आवाज़ के लिए ट्यून किया गया हो.

इसे लागू करने के लिए, आपको अपने ऑडियो ग्राफ़ में DynamicsCompressorNode को शामिल करना होगा. आम तौर पर, इसे डेस्टिनेशन से पहले आखिरी नोड के तौर पर शामिल किया जाता है.:

// Assume the output is all going through the mix node.
var compressor = context.createDynamicsCompressor();
mix.connect(compressor);
compressor.connect(context.destination);

डाइनैमिक कंप्रेशन के बारे में ज़्यादा जानकारी के लिए, Wikipedia का यह लेख पढ़ें. इसमें काफ़ी जानकारी दी गई है.

संक्षेप में, क्लिपिंग को ध्यान से सुनें और मास्टर गेन नोड डालकर इसे रोकें. इसके बाद, डायनैमिक कंप्रेसर नोड का इस्तेमाल करके, पूरे मिक्स को बेहतर बनाया जाता है. आपका ऑडियो ग्राफ़ कुछ ऐसा दिख सकता है:

आखिरी नतीजा

नतीजा

इसमें वे सभी ज़रूरी बातें शामिल हैं जो Web Audio API का इस्तेमाल करके, गेम के ऑडियो को डेवलप करने के लिए ज़रूरी हैं. इन तकनीकों की मदद से, सीधे अपने ब्राउज़र में ऑडियो का शानदार अनुभव तैयार किया जा सकता है. जाने से पहले, मैं आपको ब्राउज़र से जुड़ी एक सलाह देना चाहूंगा: अगर आपका टैब पेज विज़िबिलिटी एपीआई का इस्तेमाल करके बैकग्राउंड में चला जाता है, तो आवाज़ को रोकना न भूलें. ऐसा न करने पर, आपके उपयोगकर्ता को खराब अनुभव मिल सकता है.

वेब ऑडियो के बारे में ज़्यादा जानकारी के लिए, शुरू करने से जुड़ा लेख पढ़ें. अगर आपका कोई सवाल है, तो देखें कि क्या वेब ऑडियो के बारे में अक्सर पूछे जाने वाले सवालों में उसका जवाब पहले से मौजूद है. आखिर में, अगर आपको कुछ और पूछना है, तो Stack Overflow पर web-audio टैग का इस्तेमाल करके सवाल पूछें.

जाने से पहले, मैं आपको आज के असल गेम में Web Audio API के कुछ शानदार इस्तेमाल के बारे में बताना चाहूंगा:

  • Field Runners, और कुछ तकनीकी जानकारी के बारे में एक लेख.
  • Angry Birds ने हाल ही में Web Audio API का इस्तेमाल करना शुरू किया है. ज़्यादा जानकारी के लिए, यह लेख पढ़ें.
  • Skid Racer, जिसमें स्पेशल ऑडियो का बेहतरीन इस्तेमाल किया गया है.