Web Audio API First Practice

After spending a few hours reading articles and researching for ways to generate audio using code, I am starting to think there are a bunch of rabbit holes. Why isn't audio programming more accessible? Simple? Easy to find resources for that both work and make some sense to me?

My goals:

  • Understand how the Web Audio API works

  • Create something of a "Hello World" example (minimum viable example)

  • Figure out what are beginner/fundamental, intermediate, and advanced applications / skills / techniques of Web Audio API, such as:

    • simple sound generation

    • voice generation

    • music composition

    • MIDI playing

    • generating audio effects on the fly using various data inputs)

Note: See bottom of this document for more goals / hopes / intentions.

Using this tutorial, let's try to

  • create some white noise audio

  • create a button

  • enable the white noise audio to be played by the click of the button

const audioContext = new (window.webkitAudioContext || window.AudioContext)();
const SAMPLE_RATE = audioContext.sampleRate;
const whiteNoiseTime = 1; // measured in seconds
const whiteNoiseBuffer = audioContext.createBuffer(
  1,
  SAMPLE_RATE * whiteNoiseTime,
  SAMPLE_RATE
);
const whiteNoiseChannelData = whiteNoiseBuffer.getChannelData(0);
for (let i = 0; i < whiteNoiseBuffer.length; i++) {
  whiteNoiseChannelData[i] = Math.random() * 2 - 1;
}
// Connect all of our audio nodes to this gain node so their volume is lower.
const primaryGainControl = audioContext.createGain();
primaryGainControl.gain.setValueAtTime(0.05, 0);
primaryGainControl.connect(audioContext.destination);
const button = document.createElement("button");
button.innerText = "White Noise";
button.style = "border: 1px solid black; padding: 5px; margin: 5px"
button.addEventListener("click", () => {
  const whiteNoiseSource = audioContext.createBufferSource();
  whiteNoiseSource.buffer = whiteNoiseBuffer;
  whiteNoiseSource.connect(primaryGainControl);
  whiteNoiseSource.start();
});
document.body.appendChild(button);

Great! It works. Here's my question: Can we simplify what is going on in the code in clear, plain language? Let's give it a try.

My Goals Continued

  • Figure out what are synergistic or prerequisite knowledge / skill sets that would make working with audio (editing, creating, analyzing, etc.) easier such as:

    • Maths (such as trig?)

    • Music theory / composition

    • The ability to read music notation (sheet music, chord sheets, etc.)

    • Music performance (instrumental or voice)

    • Audacity or other sound editing software

    • DJ'ing

    • Working with sound / mixing boards

Runtimes (1)