clicktone

ClickTone is a lightweight helper for UI sound feedback. It wraps the Web Audio API, giving you instant click‑sounds with volume control, throttling, callbacks, and an iOS resume workaround.

^{1.2kB gzipped}

Demo

➤ Install

1yarn add clicktone

➤ Import

1import ClickTone from 'clicktone';

➤ Usage

1<audio preload="auto">
2  <source id="click-source" src="./click.mp3" type="audio/mpeg" />
3  <source src="./click.ogg" type="audio/ogg" />
4</audio>

1const sound = new ClickTone({
2  // Any of the forms work:
3  // file: './sound.mp3',
4  // file: new URL('./sound.mp3', import.meta.url).href,
5  // file: document.querySelector('#click-source') as HTMLSourceElement,
6  file: { id: 'click-source' },
7
8  volume: 0.7,
9  throttle: 100,
10  callback: () => console.log('done'),
11  debug: true,
12});
13
14button.addEventListener('click', () => click.play());

^{ClickTone uses the Web Audio API, which supports many audio file formats: MP3, WAV, OGG, AAC and others. Note that not all browsers support these formats.
Tip: you can also override the source at call‑time: click.play('./alt.wav').}

➤ Options

Option	Type	Default	Description
file	string | HTMLSourceElement | { id: string }	–	Audio source. Either a direct URL, an actual <source> element, or an object whose id maps to a <source> already in the DOM.
volume	number	1	Playback volume 0–1.
callback	((error?: Error) => void) | null	null	Called after playback ends or if an error occurs.
throttle	number	0	Debounce interval in ms. Playback requests arriving sooner are ignored.
debug	boolean	false	Log internal errors/warnings to the console.

➤ License

clicktone is released under MIT license.