Sonify Elements
What if form elements had sounds?
What A zero-dependency Web Audio library that attaches subtle, synthesized sound feedback to native HTML form elements. No audio files — just real-time synthesis. Text inputs click as you type. Range sliders tick at pitch-mapped intervals. Checkboxes pop on and off. Number inputs play DTMF phone tones.
Why Form interactions are visually rich but sonically dead. Every button looks different but sounds the same: silent. Sound is an underused feedback channel that can make interfaces feel more responsive and tactile without adding visual noise.
How Every sound is shaped by six parameters — frequency, gain, duration, attack, type, and waveform. Pitch encodes direction: adding goes up, removing goes down. Volume tracks importance: one-time actions are loud, repeated actions disappear. Five profiles multiply the same parameters into different textures.
An exercise in AI-driven prototyping. Exploring how far you can go when the code writes itself and you focus entirely on the idea.
Try It
Same form, side by side. Left is silent. Right has sound. Switch profiles to hear the difference.
Design Thoughts
The six parameters
Every sound is shaped by six values:
| Parameter | Range | What it controls |
|---|---|---|
| Frequency | 260–880 Hz | Pitch. Higher feels lighter, lower feels heavier. |
| Gain | 0.04–0.45 | Volume. Not all interactions deserve the same loudness. |
| Duration | 20–180 ms | How long a sound rings before it fades. |
| Attack | 1–15 ms | How quickly the sound reaches peak volume. |
| Type | 4 types | Tick, two-note pair, double-tap, or DTMF dual-tone. |
| Waveform | 2 shapes | Sine for nearly everything. Triangle for error. |
Pitch tells you what happened
Adding something uses higher pitch. Removing something drops lower. The direction registers on its own. Typing at 700 Hz, checking at 880 Hz, deleting at 500 Hz, destructive actions at 260 Hz.
Paired sounds
Binary elements share a timbre family. One direction goes up, the other goes down. Toggle on rises, toggle off falls. Focus ascends, blur descends.
Volume tracks importance
Actions you do once should be clear. Actions you repeat should disappear. A button click is the loudest at 0.45. A checkbox is 0.40. Typing is 0.15. Textarea typing is 0.06. Select hover is 0.04 — barely there.
Silence is intentional
Rest, hover, disabled: all silent. Sound only fires on direct user action.
Sound Profiles
Five profiles ship built-in. Each defines a complete set of synthesizer parameters — oscillator waveform, attack/decay envelope, frequency range, and filter cutoff. Switching profiles changes the entire sonic character.
Clean, neutral sine-wave tones. The baseline — works in any context without drawing attention.
Barely-there feedback. Extremely short envelopes and low gain. For interfaces where sound should be felt more than heard.
Playful, rounded tones with longer decay. Frequency sweeps on interactions give a bouncy, responsive feel.
Snappy, percussive hits. Short attack, fast decay. For interfaces that need crisp, decisive feedback.
Sci-fi electric tones. Square and sawtooth waveforms with filter sweeps. For when you want the interface to sound like a control panel.
Examples of Elements Covered
+ textarea, file input, password, number (DTMF), details/summary — explore all on the project page