ऑडियो वर्कलेट की सुविधा अब डिफ़ॉल्ट रूप से उपलब्ध है

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

बैकग्राउंड: ScriptProcessorNode

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

इस डिज़ाइन में दो समस्याएं हैं: डिज़ाइन के हिसाब से, इवेंट मैनेजमेंट असाइनोक्रोनस होता है और कोड का एक्ज़ीक्यूशन मुख्य थ्रेड पर होता है. पहले मामले में, रिस्पॉन्स में देरी होती है और दूसरे मामले में, मुख्य थ्रेड पर दबाव पड़ता है. आम तौर पर, मुख्य थ्रेड में यूज़र इंटरफ़ेस (यूआई) और डीओएम से जुड़े कई टास्क होते हैं. इनकी वजह से, यूआई में "गड़बड़ी" या ऑडियो में "गड़बड़ी" होती है. डिज़ाइन में इस बुनियादी गड़बड़ी की वजह से, ScriptProcessorNode को स्पेसिफ़िकेशन से हटा दिया गया है और इसे AudioWorklet से बदल दिया गया है.

कॉन्सेप्ट

ऑडियो वर्कलेट, उपयोगकर्ता से मिले JavaScript कोड को ऑडियो प्रोसेसिंग थ्रेड में ही रखता है. इसका मतलब है कि ऑडियो को प्रोसेस करने के लिए, उसे मुख्य धागे पर जाने की ज़रूरत नहीं है. इसका मतलब है कि उपयोगकर्ता की ओर से दिया गया स्क्रिप्ट कोड, ऑडियो रेंडरिंग थ्रेड (AudioWorkletGlobalScope) के साथ-साथ, पहले से मौजूद AudioNodes पर भी चलता है. इससे, रेंडरिंग में कोई अतिरिक्त देरी नहीं होती और रेंडरिंग सिंक रहती है.

रजिस्टर करना और इंस्टैंशिएट करना

ऑडियो वर्कलेट का इस्तेमाल करने के दो तरीके हैं: AudioWorkletProcessor और AudioWorkletNode. यह ScriptProcessorNode का इस्तेमाल करने से ज़्यादा मुश्किल है, लेकिन डेवलपर को कस्टम ऑडियो प्रोसेसिंग के लिए, कम-लेवल की सुविधा देने के लिए यह ज़रूरी है. AudioWorkletProcessor, JavaScript कोड में लिखे गए ऑडियो प्रोसेसर को दिखाता है. यह AudioWorkletGlobalScope में मौजूद होता है. AudioWorkletNode, AudioWorkletProcessor का दूसरा हिस्सा है. यह मुख्य थ्रेड में, AudioNodes से और AudioNodes में कनेक्शन को मैनेज करता है. यह मुख्य ग्लोबल स्कोप में एक्सपोज़ किया जाता है और यह एक सामान्य AudioNode की तरह काम करता है.

यहां दो कोड स्निपेट दिए गए हैं, जिनमें रजिस्ट्रेशन और इंस्टैंशिएशन के बारे में बताया गया है.

// The code in the main global scope.
class MyWorkletNode extends AudioWorkletNode {
  constructor(context) {
    super(context, 'my-worklet-processor');
  }
}

let context = new AudioContext();

context.audioWorklet.addModule('processors.js').then(() => {
  let node = new MyWorkletNode(context);
});

AudioWorkletNode बनाने के लिए, आपको AudioContext ऑब्जेक्ट और प्रोसेसर का नाम स्ट्रिंग के तौर पर जोड़ना होगा. प्रोसेसर की परिभाषा को, नए ऑडियो वर्कलेट ऑब्जेक्ट के addModule() कॉल से लोड और रजिस्टर किया जा सकता है. ऑडियो वर्कलेट के साथ-साथ, वर्कलेट एपीआई सिर्फ़ सुरक्षित कॉन्टेक्स्ट में उपलब्ध होते हैं. इसलिए, इनका इस्तेमाल करने वाले पेज को एचटीटीपीएस पर दिखाया जाना चाहिए. हालांकि, http://localhost को लोकल टेस्टिंग के लिए सुरक्षित माना जाता है.

AudioWorkletNode का सबक्लास तय करके, वर्कलेट पर चल रहे प्रोसेसर की मदद से, कस्टम नोड तय किया जा सकता है.

// This is the "processors.js" file, evaluated in AudioWorkletGlobalScope
// upon audioWorklet.addModule() call in the main global scope.
class MyWorkletProcessor extends AudioWorkletProcessor {
  constructor() {
    super();
  }

  process(inputs, outputs, parameters) {
    // audio processing code here.
  }
}

registerProcessor('my-worklet-processor', MyWorkletProcessor);

AudioWorkletGlobalScope में मौजूद registerProcessor() तरीका, रजिस्टर किए जाने वाले प्रोसेसर के नाम और क्लास की परिभाषा के लिए एक स्ट्रिंग लेता है. ग्लोबल स्कोप में स्क्रिप्ट कोड का आकलन पूरा होने के बाद, AudioWorklet.addModule() से मिले प्रॉमिस को रिज़ॉल्व कर दिया जाएगा. साथ ही, उपयोगकर्ताओं को सूचना दी जाएगी कि क्लास की परिभाषा, मुख्य ग्लोबल स्कोप में इस्तेमाल के लिए तैयार है.

कस्टम ऑडियो पैरामीटर

AudioNodes की एक ज़रूरी सुविधा, AudioParam की मदद से शेड्यूल किए जा सकने वाले पैरामीटर ऑटोमेशन है. AudioWorkletNodes, एक्सपोज़ किए गए ऐसे पैरामीटर पाने के लिए इनका इस्तेमाल कर सकते हैं जिन्हें ऑडियो रेट पर अपने-आप कंट्रोल किया जा सकता है.

उपयोगकर्ता के तय किए गए ऑडियो पैरामीटर, AudioWorkletProcessor के सेट को सेट अप करके, AudioWorkletProcessor क्लास की परिभाषा में बताए जा सकते हैं.AudioParamDescriptor इसके लिए, WebAudio इंजन, AudioWorkletNode बनाने के दौरान यह जानकारी लेता है. इसके बाद, वह नोड के हिसाब से AudioParam ऑब्जेक्ट बनाता है और उन्हें लिंक करता है.

/* A separate script file, like "my-worklet-processor.js" */
class MyWorkletProcessor extends AudioWorkletProcessor {

  // Static getter to define AudioParam objects in this custom processor.
  static get parameterDescriptors() {
    return [{
      name: 'myParam',
      defaultValue: 0.707
    }];
  }

  constructor() { super(); }

  process(inputs, outputs, parameters) {
    // |myParamValues| is a Float32Array of either 1 or 128 audio samples
    // calculated by WebAudio engine from regular AudioParam operations.
    // (automation methods, setter) Without any AudioParam change, this array
    // would be a single value of 0.707.
    const myParamValues = parameters.myParam;

    if (myParamValues.length === 1) {
      // |myParam| has been a constant value for the current render quantum,
      // which can be accessed by |myParamValues[0]|.
    } else {
      // |myParam| has been changed and |myParamValues| has 128 values.
    }
  }
}

AudioWorkletProcessor.process() तरीका

ऑडियो की असल प्रोसेसिंग, AudioWorkletProcessor में process() कॉलबैक वाले तरीके से होती है. इसे क्लास की परिभाषा में उपयोगकर्ता को लागू करना होगा. WebAudio इंजन, इनपुट और पैरामीटर को फ़ीड करने और आउटपुट फ़ेच करने के लिए, इस फ़ंक्शन को एक साथ शुरू करता है.

/* AudioWorkletProcessor.process() method */
process(inputs, outputs, parameters) {
  // The processor may have multiple inputs and outputs. Get the first input and
  // output.
  const input = inputs[0];
  const output = outputs[0];

  // Each input or output may have multiple channels. Get the first channel.
  const inputChannel0 = input[0];
  const outputChannel0 = output[0];

  // Get the parameter value array.
  const myParamValues = parameters.myParam;

  // if |myParam| has been a constant value during this render quantum, the
  // length of the array would be 1.
  if (myParamValues.length === 1) {
    // Simple gain (multiplication) processing over a render quantum
    // (128 samples). This processor only supports the mono channel.
    for (let i = 0; i < inputChannel0.length; ++i) {
      outputChannel0[i] = inputChannel0[i] * myParamValues[0];
    }
  } else {
    for (let i = 0; i < inputChannel0.length; ++i) {
      outputChannel0[i] = inputChannel0[i] * myParamValues[i];
    }
  }

  // To keep this processor alive.
  return true;
}

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

MessagePort की मदद से, दोनों तरफ़ से कम्यूनिकेशन

कभी-कभी, कस्टम AudioWorkletNode ऐसे कंट्रोल दिखाना चाहता है जो AudioParam पर मैप नहीं होते. जैसे, कस्टम फ़िल्टर को कंट्रोल करने के लिए इस्तेमाल किया जाने वाला स्ट्रिंग-आधारित type एट्रिब्यूट. इस और अन्य कामों के लिए, AudioWorkletNode और AudioWorkletProcessor में, दोनों तरफ़ से कम्यूनिकेशन के लिए MessagePort है. इस चैनल की मदद से, मनमुताबिक बनाया गया कोई भी डेटा शेयर किया जा सकता है.

MessagePort को नोड और प्रोसेसर, दोनों पर .port एट्रिब्यूट की मदद से ऐक्सेस किया जा सकता है. नोड का port.postMessage() तरीका, उससे जुड़े प्रोसेसर के port.onmessage हैंडलर को मैसेज भेजता है. साथ ही, यह मैसेज, हैंडलर से नोड पर भी भेजा जाता है.

/* The code in the main global scope. */
context.audioWorklet.addModule('processors.js').then(() => {
  let node = new AudioWorkletNode(context, 'port-processor');
  node.port.onmessage = (event) => {
    // Handling data from the processor.
    console.log(event.data);
  };

  node.port.postMessage('Hello!');
});

/* "processors.js" file. */
class PortProcessor extends AudioWorkletProcessor {
  constructor() {
    super();
    this.port.onmessage = (event) => {
      // Handling data from the node.
      console.log(event.data);
    };

    this.port.postMessage('Hi!');
  }

  process(inputs, outputs, parameters) {
    // Do nothing, producing silent output.
    return true;
  }
}

registerProcessor('port-processor', PortProcessor);

MessagePort, ट्रांसफ़र किए जा सकने वाले डेटा के साथ काम करता है. इसकी मदद से, थ्रेड की सीमा के पार डेटा स्टोरेज या WASM मॉड्यूल ट्रांसफ़र किया जा सकता है. इससे, ऑडियो वर्कलेट सिस्टम के इस्तेमाल के अनगिनत तरीके मिलते हैं.

गाइड: GainNode बनाना

यहां AudioWorkletNode और AudioWorkletProcessor के ऊपर बनाए गए GainNode का पूरा उदाहरण दिया गया है.

index.html फ़ाइल:

<!doctype html>
<html>
<script>
  const context = new AudioContext();

  // Loads module script with AudioWorklet.
  context.audioWorklet.addModule('gain-processor.js').then(() => {
    let oscillator = new OscillatorNode(context);

    // After the resolution of module loading, an AudioWorkletNode can be
    // constructed.
    let gainWorkletNode = new AudioWorkletNode(context, 'gain-processor');

    // AudioWorkletNode can be interoperable with other native AudioNodes.
    oscillator.connect(gainWorkletNode).connect(context.destination);
    oscillator.start();
  });
</script>
</html>

gain-processor.js फ़ाइल:

class GainProcessor extends AudioWorkletProcessor {

  // Custom AudioParams can be defined with this static getter.
  static get parameterDescriptors() {
    return [{ name: 'gain', defaultValue: 1 }];
  }

  constructor() {
    // The super constructor call is required.
    super();
  }

  process(inputs, outputs, parameters) {
    const input = inputs[0];
    const output = outputs[0];
    const gain = parameters.gain;
    for (let channel = 0; channel < input.length; ++channel) {
      const inputChannel = input[channel];
      const outputChannel = output[channel];
      if (gain.length === 1) {
        for (let i = 0; i < inputChannel.length; ++i)
          outputChannel[i] = inputChannel[i] * gain[0];
      } else {
        for (let i = 0; i < inputChannel.length; ++i)
          outputChannel[i] = inputChannel[i] * gain[i];
      }
    }

    return true;
  }
}

registerProcessor('gain-processor', GainProcessor);

इसमें ऑडियो वर्कलेट सिस्टम के बुनियादी सिद्धांतों के बारे में बताया गया है. लाइव डेमो, Chrome WebAudio टीम के GitHub रिपॉज़िटरी पर उपलब्ध हैं.

सुविधा का ट्रांज़िशन: एक्सपेरिमेंट के तौर पर उपलब्ध से स्टेबल

ऑडियो वर्कलेट, Chrome 66 या उसके बाद के वर्शन के लिए डिफ़ॉल्ट रूप से चालू होता है. Chrome 64 और 65 में, यह सुविधा एक्सपेरिमेंट के तौर पर उपलब्ध थी.