Interface sounds

Added in 6.5.0

soundhub/ui is a separate entry point with twelve interface sounds. They are rendered into buffers in the browser when you add them, so nothing is fetched and there are no files to host or licences to check. The entry point is 1.5 KB gzipped, and it only ends up in your bundle when you import it.

import { SoundHub } from 'soundhub';
import { addUiSounds, uiSounds } from 'soundhub/ui';

const soundHub = new SoundHub();
addUiSounds(soundHub);

saveButton.onclick = () => soundHub.play(uiSounds.success);

After addUiSounds they are ordinary sounds in the hub, with ids such as 'ui.click' and 'ui.success'. Volume, mute, groups, ducking and the event bus all work on them.

Try it

Try it

Twelve sounds, no files

Idle

Every button plays one of the interface sounds. They are rendered in your browser when the page opens.

volume of every sound

0.60

Last soundnone yet

Files loaded0

Click a button several times quickly: the sounds overlap instead of cutting each other off.

Code

Your clicks show up here as soundhub calls

The sounds

Name	Id with the default prefix	What it sounds like	Length
click	ui.click	A short, bright tick	23 ms
tap	ui.tap	A soft, falling blip	55 ms
toggleOn	ui.toggleOn	Two notes going up	145 ms
toggleOff	ui.toggleOff	The same two notes going down	145 ms
success	ui.success	A rising major chord, one note after the other	515 ms
error	ui.error	Two low, buzzy notes going down	345 ms
warning	ui.warning	The same note twice	265 ms
notify	ui.notify	A two note chime	615 ms
pop	ui.pop	A quick upward pop	65 ms
swipe	ui.swipe	A soft whoosh of noise	165 ms
delete	ui.delete	A falling sweep	185 ms
type	ui.type	A key press, for typing	13 ms

What the entry point exports

import {
  addUiSounds,     // render the sounds and add them to a hub
  uiSounds,        // the ids with the default prefix: uiSounds.click is 'ui.click'
  UI_SOUND_NAMES,  // every name, in the order of the table above
  renderUiSound,   // the raw samples of one sound
  type UiSoundName,     // 'click' | 'tap' | ... | 'type'
  type UiSoundsOptions, // the options for addUiSounds
} from 'soundhub/ui';

Export	Type	Description
addUiSounds	function	Render the sounds and add them to a hub.
uiSounds	Readonly<Record<UiSoundName, string>>	The ids addUiSounds gives the sounds with the default prefix. With a prefix of your own, use the ids addUiSounds returns.
UI_SOUND_NAMES	readonly UiSoundName[]	All twelve names.
renderUiSound	function	The samples of one sound, for your own use.
UiSoundName	type	The union of the twelve names.
UiSoundsOptions	type	The options of addUiSounds.

Muting them all

Put them in a group, and one call reaches all of them:

import { addUiSounds, uiSounds } from 'soundhub/ui';

addUiSounds(soundHub, { groupId: 'interface', volume: 0.4 });

soundHub.play(uiSounds.click);

// A "sounds off" switch in the settings
soundHub.getGroup('interface')!.sounds.forEach((id) => soundHub.mute(id));

Good to know

• The sounds are the same on every load and in every browser. The noise in click, swipe and type comes from a fixed seed.
• They overlap by default, so a fast typist or a double click does not cut the previous sound off.
• Rendering takes a moment of CPU on the main thread and no network. Adding them before the first user gesture is fine, the context only has to run when they play.
• Your own synthesised audio takes the same route through addBuffer.
• The entry point uses the soundhub package you already have, it does not carry a copy of it.