Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Passing a function from global scope to AudioWorkletProcessor

See original GitHub issue

Apologies if this question is unclear or overly basic, I’m new to using audio worklets and the syntax is quite unfamiliar to me. I managed to get a simple example working of an audioWorkletNode firing up an audioWorkletProcessor.

HTML:

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

// Loads module script via AudioWorklet.
audio.audioWorklet.addModule('audio-processor.js').then(() => {
  let sound = new AudioWorkletNode(audio, 'audio-processor');
  sound.connect(audio.destination);
});

</script>
</html>

Javascript:

class AudioProcessor extends AudioWorkletProcessor {

  constructor(options) {
    super(options);
  }

  process(inputs, outputs, parameters) {
    let input = inputs[0][0];
    let output = outputs[0][0];
    let numSamples = output.length;

    loop(input, output, numSamples);

    return true;
  }
}

registerProcessor('audio-processor', AudioProcessor);

function loop(input, output, numSamples) {
  let amplitude = 0.1;
  for (let i = 0; i < output.length; ++i) {
    output[i] = 2 * (Math.random() - 0.5) * amplitude;
  }
}

Now I’d like to define a function in the global scope that can be passed to / accessed by the audioWorkletProcessor. e.g. I’d like to define the loop function in my main javascript code instead, and pass it to the audioWorklet. How can I do this?

Issue Analytics

State:
Created 5 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

hochcommented, Jun 8, 2018

If that satisfies your purpose, nothing stops you from doing that. However, I would not say it is a pretty thing to look at.

By using async/await, you can precisely sequence the module loading with better readability.

1reaction

aatishbcommented, Jun 8, 2018

Thanks, this is very helpful! I’ll give it a try.

After some digging online, I managed to get things working using template literals, but it felt a bit hacky and I’m not sure if this was the right way to go about out:

<html>
<script>

fetch('loop.js')
  .then(response => response.text())
  .then((data) => {

    const userCode = data;

    const moduleDataUrl = `data:text/javascript;utf8,

		${userCode}

		class AudioProcessor extends AudioWorkletProcessor {

		  constructor(options) {
		    super(options);
		  }

		  process(inputs, outputs, parameters) {
		    let input = inputs[0][0];
		    let output = outputs[0][0];
		    let numSamples = output.length;

		    loop(input, output, numSamples);

		    return true;
		  }
		}

		registerProcessor('audio-processor', AudioProcessor);
		`;

    const audio = new AudioContext();

    // Loads module script via AudioWorklet.
    audio.audioWorklet.addModule(moduleDataUrl).then(() => {
      let sound = new AudioWorkletNode(audio, 'audio-processor');
      sound.connect(audio.destination);
    });
  });

</script>
</html>