add ui sounds
without an audio file.

A UI sound does not need an MP3, a CDN, or a loading state. The Web Audio API can synthesize a click, a toggle, or a notification tone directly in the browser, in a few lines, the instant a user interacts.

open the studio

why generate a sound instead of downloading one?

A downloaded sample is a file: something to host, load, and keep in sync with a design change. A synthesized sound is a function call — there is nothing to fetch before it can play, nothing to re-export when you want it half a tone brighter or ten milliseconds shorter. That is also why it is small: an oscillator and a gain envelope compile to a few hundred bytes of code, not a WAV file.

what does that look like in code?

a click sound, by hand

const ctx = new (window.AudioContext || window.webkitAudioContext)();

function playClick() {
  const osc = ctx.createOscillator();
  const gain = ctx.createGain();

  osc.type = 'sine';
  osc.frequency.setValueAtTime(880, ctx.currentTime);
  osc.frequency.exponentialRampToValueAtTime(220, ctx.currentTime + 0.08);

  gain.gain.setValueAtTime(0.0001, ctx.currentTime);
  gain.gain.exponentialRampToValueAtTime(0.6, ctx.currentTime + 0.005);
  gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 0.12);

  osc.connect(gain).connect(ctx.destination);
  osc.start();
  osc.stop(ctx.currentTime + 0.12);
}

document.querySelector('button').addEventListener('click', playClick);

This is the shape of it done by hand, as an illustration of the technique — not what Blip Blip’s own export button produces. The real export is longer, parameter-driven, and bakes in per-play randomized variation, harmonics, and any filter, drive, delay, or reverb stage as literal constants.

The pattern above is the whole idea: an AudioContext, an OscillatorNode for pitch, a GainNode shaped into an attack-and-decay envelope so the click does not pop, and a single connect chain to the speakers. Swap the frequency ramp and envelope shape and the same four objects become a toggle, a soft tap, or an error buzz.

how do I shape it instead of hand-tuning envelope math?

Blip Blip is a browser-based studio built around exactly this graph — oscillator, filter, envelope, and effects — with faders instead of raw Web Audio parameters. Shape a sound by ear, preview it instantly, then export the finished result as ready-to-paste Web Audio JavaScript: the full version, with per-play variation and any filter, drive, delay, or reverb you added, not just the four-line sketch above. Take the full studio walkthrough to see every mode, or go straight to state-specific sounds like loading, success, and error tones.

the useful details.

Do I need to host an audio file for this to work?

No. Everything above is generated at runtime by the Web Audio API — there is no MP3, WAV, or CDN request involved, and nothing to add to your asset pipeline.

Does the Web Audio API work in every browser?

Yes, all current browsers support it. Older Safari versions needed the webkitAudioContext prefix, which is why the example above checks for both.

Can Blip Blip export this for me instead of writing it by hand?

Yes. Design the sound in the studio with Simple or Pro controls, then export it as ready-to-use Web Audio JavaScript — no account required to try it.

ready to make
some noise?

Open Blip Blip and give it a voice.