UI Sound Generator

Design clicks, pops, chimes and error buzzes, hear them, and download the WAV or the Web Audio code.

Processed locally — nothing is uploaded

Waveform

Pitch1200 HzPitch end400 HzLength0.06 sAttack0.002 sLow-pass6000 HzNoise0.15Volume0.50Repeats1

0.06 s · 2,646 samples · 44.1 kHz mono

// Plays the sound with the Web Audio API. Call from a user gesture (click, keypress).
export function playSound() {
  const ctx = new AudioContext();
  const t0 = ctx.currentTime;
  for (let i = 0; i < 1; i++) {
    const start = t0 + i * 0.11;
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();
    const filter = ctx.createBiquadFilter();
    osc.type = "square";
    osc.frequency.setValueAtTime(1200, start);
    osc.frequency.exponentialRampToValueAtTime(400, start + 0.06);
    filter.type = "lowpass";
    filter.frequency.value = 6000;
    gain.gain.setValueAtTime(0.0001, start);
    gain.gain.linearRampToValueAtTime(0.5, start + 0.002);
    gain.gain.exponentialRampToValueAtTime(0.0001, start + 0.06);
    osc.connect(filter).connect(gain).connect(ctx.destination);
    osc.start(start);
    osc.stop(start + 0.06);
  }
}

Sound only plays after you press Play — browsers require a gesture, and so does good manners. The WAV is the exact samples drawn above.

About UI Sound Generator

The sound you hear and the file you download are the same samples: everything is synthesised as plain numbers in the page — one oscillator with a pitch glide, an attack-then-decay envelope, a low-pass filter and a measure of noise — rather than by a second audio engine that might differ. Eight presets cover the interface sounds apps actually need; the sliders are the same eight parameters underneath.

Interface sounds are tiny: a click lasts sixty milliseconds, a notification a quarter of a second. What makes them feel right is not the waveform so much as the envelope — how fast the sound arrives and how it dies away — and the pitch movement inside it. A click is a high tone falling fast under a hard envelope; a pop is a low sine dropping an octave; a success chime rises. This generator gives you exactly those controls: waveform, start and end pitch, length, attack, a low-pass filter to soften the top end, a noise mix for texture, and a repeat count with a gap for double pings.

Everything is synthesised as samples in the page. Press Play and the numbers are handed to your browser's audio output; press WAV and the same numbers are written into a sixteen-bit mono file. There is no rendering engine in between, so what you approved in the preview is what lands in the project, and the waveform drawn under the buttons is the actual signal rather than a decoration.

The Web Audio export is for apps that would rather synthesise than ship a file. It writes a small function that recreates the sound with an oscillator, a gain envelope and a filter using the same parameters — a few hundred bytes instead of an audio asset, with no decode on first play. It leaves out the noise component, which needs a buffer source and doubles the code for a small effect; for noise-heavy sounds like a whoosh, take the WAV.

Playback waits for a click. Browsers refuse to start audio without a user gesture, and an interface that makes a noise when a page loads is one people leave. The same rule applies to how these sounds should be used: on a deliberate action, at a volume below the content, and never as a substitute for a visible confirmation.

Learn how this works

Generating What You Need: QR Codes, Passwords, IDs & FilesA practical guide to generating QR codes, strong passwords, UUIDs, barcodes and PDFs — all free and fully in your browser.8 min read

Frequently asked questions

Why does the sound not play?

Audio needs a click first — the Play button is that click, and the browser opens its audio output on it. If it still stays silent, the tab may be muted at the browser level, or the volume slider may be at zero; the WAV download works regardless, so open that to check the sound itself.

WAV or the Web Audio code?

The WAV is the exact sound and plays anywhere, from a game engine to an email client; it is the choice for anything that is not a web page. The code is for web apps: it recreates the sound at runtime with no asset to load, and the parameters are plain numbers you can tune in place. It omits the noise layer.

How do I make it sound less harsh?

Lower the low-pass cutoff — it removes the high frequencies that read as harsh — and lengthen the attack by a few milliseconds so the sound does not start with a click. A sine or triangle waveform is gentler than square or sawtooth. Most interface sounds sit under 4,000 Hz with a short attack and a fast decay.

Can I make a two-note chime?

Set repeats to two with a short gap and a rising pitch glide; each hit glides from the start pitch to the end pitch, which reads as two rising notes. For two distinct pitches, generate two sounds and place them in sequence in your app, or in an editor.

Is anything sent to a server?

No. Everything runs locally in your browser using standard web APIs — your text, files and inputs are never uploaded to a server, so the tool works even offline once the page has loaded.

Is it free?

Completely. There is no sign-up, no account, no watermark and no usage limit. The tool is supported by unobtrusive ads, not by selling or processing your data.

Pro Tips

→Keep interface sounds under a quarter of a second; anything longer competes with the next thing the user does.
→Match the sound to the motion: a rising pitch for something appearing or succeeding, a falling one for dismissal or failure.
→Use the same waveform family across an app so the sounds feel related; vary pitch and envelope, not timbre.
→Set volume around 0.4 to 0.5 in the generator and leave headroom; a sound that peaks at full scale clips on cheap speakers.
→For a game, export the WAV at the pitch you want and let the engine vary playback rate for variety instead of making ten files.

Common Use Cases

•Button, toggle and notification sounds for a web or mobile app.
•Success and error feedback for a form or a checkout.
•Sound effects for a small game or a prototype before a sound designer is involved.
•A consistent set of alert tones for a dashboard or monitoring screen.
•Teaching what attack, decay and low-pass filtering actually do, by ear.

How It Compares

jsfxr and its ancestor sfxr are the classic generators, with more waveform and modulation options and a retro character this tool does not try to match; freesound.org has recorded sounds under open licences for when synthesis is not the answer. This tool is narrower on purpose — the eight parameters that interface sounds actually vary — and adds the Web Audio code export and a shareable link, so a sound can be handed to a developer as a few numbers.