audio-buffer/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Web Audio API: AudioBuffer</title>
  </head>

  <body>
    <h1>Web Audio API: AudioBuffer</h1>
    <button>Make white noise</button>
  </body>
  <script>
    const button = document.querySelector("button");

    let audioCtx;

    // Stereo
    let channels = 2;

    function init() {
      audioCtx = new AudioContext();
    }

    button.onclick = () => {
      if (!audioCtx) {
        init();
      }

      // Create an empty two second stereo buffer at the
      // sample rate of the AudioContext
      const frameCount = audioCtx.sampleRate * 2.0;

      const buffer = new AudioBuffer({
        numberOfChannels: channels,
        length: frameCount,
        sampleRate: audioCtx.sampleRate,
      });

      // Fill the buffer with white noise;
      // just random values between -1.0 and 1.0
      for (let channel = 0; channel < channels; channel++) {
        // This gives us the actual array that contains the data
        const nowBuffering = buffer.getChannelData(channel);
        for (let i = 0; i < frameCount; i++) {
          // Math.random() is in [0; 1.0]
          // audio needs to be in [-1.0; 1.0]
          nowBuffering[i] = Math.random() * 2 - 1;
        }
      }

      // Get an AudioBufferSourceNode.
      // This is the AudioNode to use when we want to play an AudioBuffer
      const source = audioCtx.createBufferSource();
      // Set the buffer in the AudioBufferSourceNode
      source.buffer = buffer;
      // Connect the AudioBufferSourceNode to the
      // destination so we can hear the sound
      source.connect(audioCtx.destination);
      // start the source playing
      source.start();

      source.onended = () => {
        console.log("White noise finished.");
      };
    };
  </script>
</html>