UI Sound Generator

How it works#

Most interface sounds are a fraction of a second long, so they don't need audio files. The browser's Web Audio API can synthesize them from a few nodes joined into a chain:

The generated code is that chain, written out. It has no dependencies and adds less to a page than a single sound file would.

What the controls change

• Wave sets the character. sine is pure and soft, triangle is a little brighter, square sounds hollow and retro, and saw is the harshest.
• Pitch sweep slides the note while it plays. Going up feels positive or like opening something, and going down feels like closing or finishing. That's the difference between "toggle on" and "toggle off" here.
• Attack is how quickly the sound reaches full volume, and decay is how long it takes to fade. Short decays read as clicks and long ones as chimes.
• Notes, interval and gap play a short sequence. Rising intervals tend to sound like success, and falling ones like a problem.
• Noise mixes in hiss, which gives a click its physical, tactile edge.
• Filter removes everything above a frequency, and resonance boosts the area around that point.

The details that are easy to get wrong

Browsers won't play audio on their own. Under the autoplay policy, an AudioContext stays suspended until the user has interacted with the page. Call the sound from a click or key press, and call resume() first.

A volume can't fade exponentially to zero. Exponential curves never reach 0, and exponentialRampToValueAtTime(0, …) throws an error. The usual target is a tiny value such as 0.0001, which is inaudible.

Sudden jumps click. If the volume goes from 0 to full in a single sample, the speaker hears a sharp edge. That's why even "0ms" attack is really 1ms here.

Reuse one context. Browsers limit how many audio contexts can be open, so create one the first time it's needed and keep it. Oscillators are the opposite: they're single-use, and you make a new one for every sound.

Using sound well

Sound is the easiest way to make an interface annoying. A few rules help:

• Keep it rare. Save it for moments that matter, such as a completed payment or a message arriving, and not every hover.
• Keep it quiet and short. People hear it over their music, in meetings and on trains. Listen to it twenty times in a row before shipping, using the example controls above.
• Always give a way to turn it off, and remember the choice.
• Never let sound carry the only signal. Some people can't hear it and many have their device muted, so every sound needs a visual state alongside it.