Make better example in "Worklet.addModule()" doc

[ryan-mcclue]

MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/Worklet/addModule

What information was incorrect, unhelpful, or incomplete?

Usage of await keyword

Specific section or headline?

AudioWorklet example

What did you expect to see?

No SyntaxError

Did you test this? If so, how?

Yes. On Firefox 84.0.1, Windows 10, x86_64. Ran example:let cxt = new AudioContext(); await cxt.audioWorklet.addModule("example.js"); on localhost https (example.js is pre-existing worklet file). Console returned: Uncaught SyntaxError: await is only valid in async functions and async generators

MDN Content page report details

* Folder: `en-us/web/api/worklet/addmodule` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/Worklet/addModule * GitHub URL: https://github.com/mdn/content/blob/master/files/en-us/web/api/worklet/addmodule/index.html * Report started: 2021-01-04T06:19:57.861Z

[sideshowbarker]

I can’t reproduce this in Firefox 84.0.1 on macOS; I get no SyntaxError for the following:

const audioCtx = new AudioContext();
const audioWorklet = audioCtx.audioWorklet;
await audioWorklet.addModule('foo.js', {
  credentials: 'omit',
});

[ryan-mcclue]

This is my code that creates the SyntaxError: syn.js

let octave_base_frequency = 110;
let twelfth_root_of_two = Math.pow(2, 1 / 12);

const audio_cxt = new AudioContext();
const audioWorklet = audio_cxt.audioWorklet;
await audioWorklet.addModule("syn-worklet.js", {credentials: "omit"});

let audio_worklet = new AudioWorkletNode(audio_cxt, "synthesiser");
let frequency_param = audio_worklet.parameters.get("frequency"); 
audio_worklet.connect(audio_cxt.destination);

document.addEventListener("keydown", (evt) => {
  for (let key = 0; key < 5; key++) {
    if (evt.code == "Key" + "ASDFG"[key]) {
      frequency_param.setValueAtTime(octave_base_frequency * Math.pow(twelfth_root_of_two, key), audio_cxt.currentTime);
    }
  }
});

document.addEventListener("keyup", (evt) => {
  frequency_param.setValueAtTime(0.0, audio_cxt.currentTime);
});

syn-worklet.js

class Synthesiser extends AudioWorkletProcessor {
  static get parameterDescriptors() {
    return [{
      name: "frequency",
      defaultValue: 0.0
    }];
  }

  constructor() {
    super();
  }

  process(inputs, outputs, parameters) {
    let sound_output_setup = outputs[0];

    let frequency = parameters["frequency"];

    for (let channel_num = 0; channel_num < sound_output_setup.length; channel_num++) {
      let channel_pcm = sound_output_setup[channel_num];
      for (let pcm_i = 0; pcm_i < channel_pcm.length; pcm_i++) {
        let sin_value = 0.1 * Math.sin(frequency * Math.PI * 2 * currentTime);
        if (sin_value > 0.0) {
          channel_pcm[pcm_i] = 0.01;
        } else {
          channel_pcm[pcm_i] = -0.01;
        }

      }
    }

    return true;
  }
}

registerProcessor("synthesiser", Synthesiser);

[ryan-mcclue]

The issue was with my misunderstanding of the await keyword. I thought it could be used for any async function whatever the scope. In reality it can be used for any async function INSIDE an async scope. So, perhaps change example to mention this?

(async() => {
  const audioCtx = new AudioContext();
  const audioWorklet = audioCtx.audioWorklet;
  await audioWorklet.addModule('foo.js', {
    credentials: 'omit',
  });
})();