Making Sound with the Web Audio API

The Web Audio API makes sound from nothing, no audio files needed. An AudioContext is the sound engine. An oscillator produces a tone at a frequency measured in hertz (440 is the A that orchestras tune to), and a gain node sets its volume. You connect them in a chain, oscillator to gain to audioCtx.destination, the speakers, then start and stop the oscillator at times measured by audioCtx.currentTime, in seconds.

✦ Sound needs a click first

Browsers won't let a page make sound until the person has interacted with it, so a page can't suddenly blare at you. Create or resume the AudioContext inside a click handler. Once it has been unlocked, code that plays later, such as a timer reaching zero, is allowed to make sound.

A tone that starts and stops instantly makes a click. An envelope fixes that: the gain starts near silence, rises over a few hundredths of a second, then fades away slowly. Exponential ramps sound natural to the ear, and they can't ramp to exactly 0, which is why the quiet end is 0.0001.

Stopping a sound early means keeping hold of what you started. Push each oscillator and gain into an array as you create them; a stop function then calls stop() and disconnect() on each one and empties the array. Repeating a sound, as an alarm does until someone answers it, is a setInterval that plays it again, cleared by the same stop function.