How to create pink noise with the API?

[timoisalive]

I'm looking for a way to create pink noise with the audio api.

I found this, but wasn't able to make it produce anything! 😅 The examples on the post do not seem to work either...

https://noisehack.com/generate-noise-web-audio-api/

[michalsek]

Hey, thanks for reaching us! :)

instead of using ScriptProcessorNode you can use AudioBufferSourceNode as it is suggested in the white nose section :)

by reusing the values from the tutorial you've linked, we can create something like that:

  const createPinkNoise = () => {
    // aCtx is audio context created f.e. in useEffect hook
    const bufferSize = aCtx.sampleRate * 2; // We want at least two seconds of noise

    const output = new Array<number>(bufferSize);
    let b0, b1, b2, b3, b4, b5, b6;
    b0 = b1 = b2 = b3 = b4 = b5 = b6 = 0.0;

    for (let i = 0; i < bufferSize; i += 1) {
      const white = Math.random() * 2 - 1;

      b0 = 0.99886 * b0 + white * 0.0555179;
      b1 = 0.99332 * b1 + white * 0.0750759;
      b2 = 0.969 * b2 + white * 0.153852;
      b3 = 0.8665 * b3 + white * 0.3104856;
      b4 = 0.55 * b4 + white * 0.5329522;
      b5 = -0.7616 * b5 - white * 0.016898;

      output[i] = 0.11 * (b0 + b1 + b2 + b3 + b4 + b5 + b6 + white * 0.5362);
      b6 = white * 0.115926;
    }

    const noiseBuffer = aCtx.createBuffer(1, bufferSize, aCtx.sampleRate);
    noiseBuffer.copyToChannel(output, 0, 0);
    return noiseBuffer;
  }

You can cache this buffer somewhere (using useRef f.e.) and play it using audio buffer source node:

  const playNoise = () => {
    const absNode = aCtx.createBufferSource();
    absNode.buffer = noiseBuffer;
    absNode.loop = true;

    const tNow = aCtx.currentTime;
    absNode.connect(aCtx.destination);
    absNode.start(tNow);
    absNode.stop(tNow + 10);
  }

[michalsek]

Btw. as for the web environment, ScriptProcessorNode is deprecated and it might not work in some browsers, so you might want to replace it with AudioBufferSourceNode as in example above, or AudioWorklet which is the successor of ScriptProcessorNode (just in case: it is not yet available in react-native-audio-api)

[timoisalive]

Yay! It works, on native as well as web! 🥳 Thanks a bunch! 🙏

[michalsek]

You're welcome :)