UI Click

Listen & Download

What Is This Sound?

This is a synthesized UI click — a short, crisp sound designed to provide tactile audio feedback when a user interacts with a button, toggle, or other interface element. It lasts approximately 30 milliseconds, just long enough to register as a satisfying “click” without lingering or drawing attention away from the task.

Click sounds are a cornerstone of user interface design. They bridge the gap between the physical world, where pressing a button produces a tangible click, and the digital world, where interactions are silent by default. A well-designed click sound makes an interface feel responsive, polished, and alive.

How Is a Click Sound Created with Code?

The key to a convincing click is an ultra-short transient — a tone that appears almost instantly and disappears just as fast. This is achieved using a sine wave oscillator with a very aggressive amplitude envelope.

The Complete Signal Chain

import * as Tone from "tone";

// Create a synth with a very tight envelope
const synth = new Tone.Synth({
  oscillator: { type: "sine" },
  envelope: {
    attack: 0.001,   // 1ms — nearly instant onset
    decay: 0.04,     // 40ms — rapid fade
    sustain: 0,      // No sustained portion
    release: 0.01,   // 10ms — clean cutoff
  },
});

synth.toDestination();

// Trigger a very short note at C6
synth.triggerAttackRelease("C6", "0.03");

Breaking Down the Envelope

The amplitude envelope is what makes this sound a click rather than a tone:

• Attack (0.001s): The sound reaches full volume in just 1 millisecond. This near-instantaneous onset creates the sharp transient that our ears perceive as a “click.”
• Decay (0.04s): The volume drops to zero over 40 milliseconds. This is fast enough to feel instantaneous but slow enough to avoid an unpleasant digital artifact.
• Sustain (0): There is no sustained portion. The sound is pure transient — it hits and immediately begins fading.
• Release (0.01s): A 10-millisecond release ensures the sound ends cleanly without a pop or click artifact from an abrupt cutoff.

The note C6 (1046.5 Hz) is chosen because higher frequencies are perceived as sharper and more precise, which reinforces the impression of a crisp mechanical action.

The Science Behind Click Sounds

Transient Perception

Human hearing is remarkably sensitive to transients — sudden changes in amplitude. Our auditory system evolved to detect the snap of a twig or the crack of a branch as potential threats, so we process sharp onsets faster than any other aspect of sound. A UI click exploits this sensitivity: by concentrating all the sound energy into a few milliseconds, we create maximum perceptual impact with minimum audio content.

Frequency Choice and Tactile Feedback

Higher-pitched clicks (above 1kHz) tend to sound crisper and more “digital,” while lower-pitched clicks sound heavier and more mechanical. The C6 frequency at 1046.5 Hz sits in a sweet spot — high enough to feel sharp and precise, but not so high that it becomes piercing or annoying during repeated interactions.

Research in haptic audio design has shown that click frequencies between 800Hz and 2kHz paired with durations under 50ms produce the strongest sensation of tactile feedback. This aligns perfectly with the parameters used in this synthesis.

Psychoacoustics of Satisfaction

The brief, complete arc of a click sound (instant onset, rapid decay, clean ending) triggers what psychoacousticians call a “closure” response. The sound begins and resolves so quickly that the brain registers it as a complete event — like the satisfying click of a physical button. This completeness is what distinguishes a well-designed click from an annoying beep.

Common Uses

• Web Applications — Button presses, toggle switches, checkbox interactions, and menu selections
• Mobile Apps — Keyboard typing feedback, navigation taps, and gesture confirmations
• Game UI — Menu navigation, inventory management, and selection confirmations
• Accessibility — Audio confirmation that an interaction was registered, especially important for touch interfaces
• Prototyping — Adding audio feedback to UI mockups and interactive prototypes
• Hardware Products — Embedded UI sounds for appliances, automotive interfaces, and IoT devices

Technical Details

Frequently Asked Questions

Can I adjust the pitch to match my app’s sound design?

Yes. Change the note value from “C6” to any other pitch. Lower notes like “A4” will produce a softer, more mechanical click. Higher notes like “E7” will sound thinner and more digital. Experiment to find the right fit for your interface.

Why use a sine wave instead of a more complex waveform?

Sine waves produce a pure, clean tone with no harmonics. For a short click, this purity prevents the sound from feeling harsh or buzzy. If you want a slightly richer click, try a triangle wave — it adds subtle odd harmonics without the aggression of a square or sawtooth wave.

How do I integrate this into a web application?

Download the WAV file and play it using the HTML5 Audio API or any JavaScript audio library. For real-time generation, copy the Tone.js code above into your project. Trigger synth.triggerAttackRelease("C6", "0.03") on each button click event.

Will this sound be annoying if triggered repeatedly?

The 30-millisecond duration and sine waveform are specifically chosen to be non-fatiguing during rapid repeated use. That said, always give users the option to adjust or mute UI sounds — audio preferences are deeply personal.