Web Audio: Migrate from ScriptProcessor to AudioWorklet

audio-worklet-script-processor.md

Web Audio: Migrate from ScriptProcessor to AudioWorklet

From ScriptProcessor

// script.js
button.onclick = async () => {
  const microphoneStream = await navigator.mediaDevices.getUserMedia({
    audio: true,
  });
  const context = new AudioContext();
  const source = context.createMediaStreamSource(microphoneStream);

  const scriptProcessor = context.createScriptProcessor(1024);
  scriptProcessor.onaudioprocess = ({ inputBuffer, outputBuffer }) => {
    const inputData = inputBuffer.getChannelData(0);
    outputBuffer.copyToChannel(inputData, 0);
  };

  source.connect(scriptProcessor).connect(context.destination);
};

To AudioWorklet

// script.js
button.onclick = async () => {
  const microphoneStream = await navigator.mediaDevices.getUserMedia({
    audio: true,
  });
  const context = new AudioContext();
  const source = context.createMediaStreamSource(microphoneStream);

  await context.audioWorklet.addModule("worklet-processor.js");
  const worklet = new AudioWorkletNode(context, "worklet-processor");

  source.connect(worklet).connect(context.destination);
};

// worklet-processor.js
class WorkletProcessor extends AudioWorkletProcessor {
  process([input], [output]) {
    input[0].forEach((sample, i) => output[0][i] = sample);
    return true;
  }
}

registerProcessor("worklet-processor", WorkletProcessor);

Diff

-  const scriptProcessor = context.createScriptProcessor(1024);
-  scriptProcessor.onaudioprocess = ({ inputBuffer, outputBuffer }) => {
-    const inputData = inputBuffer.getChannelData(0);
-    outputBuffer.copyToChannel(inputData, 0);
-  };
+  await context.audioWorklet.addModule("worklet-processor.js");
+  const worklet = new AudioWorkletNode(context, "worklet-processor");
 
-  source.connect(scriptProcessor).connect(context.destination);
+  source.connect(worklet).connect(context.destination);

+// worklet-processor.js
+class WorkletProcessor extends AudioWorkletProcessor {
+  process([input], [output]) {
+    input[0].forEach((sample, i) => output[0][i] = sample);
+    return true;
+  }
+}
+
+registerProcessor("worklet-processor", WorkletProcessor);

Resources

• 🕹️ https://audio-worklet-script-processor.glitch.me/
• 📝 https://developer.chrome.com/blog/audio-worklet/