Skip to main content

addUiSounds

Added in 6.5.0

Render the interface sounds and add them to a hub. It comes from the soundhub/ui entry point, not from the hub itself.

import { addUiSounds } from 'soundhub/ui';

addUiSounds(hub: SoundHub, options?: UiSoundsOptions): Record<UiSoundName, string>;

Parameters​

ParameterTypeDefaultDescription
hubSoundHubrequiredThe hub to add the sounds to.
optionsUiSoundsOptions{}See below.

UiSoundsOptions​

PropertyTypeDefaultDescription
prefixstring'ui.'Put in front of every name, so click becomes 'ui.click'.
volumenumber0.6Volume of every sound, from 0 to 1. Interface sounds should sit under the content.
onlyUiSoundName[]all twelveAdd only these sounds.
groupIdstringnoneA group to put the sounds in. It is created when it does not exist yet.

Returns​

Record<UiSoundName, string>: the id of every sound it added, keyed by name. With only, the object holds just those names.

Example​

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

const soundHub = new SoundHub();
addUiSounds(soundHub, { volume: 0.5 });

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

A prefix, a subset and a group​

const ids = addUiSounds(soundHub, {
  prefix: 'fx-',
  only: ['success', 'error'],
  groupId: 'interface',
});

ids.success; // 'fx-success'
soundHub.play(ids.error);

With a prefix of your own, use the ids it returns. uiSounds only holds the ids for the default prefix.

Good to know​

  • Every sound gets overlap: true, so a double click or a fast typist does not cut the previous one off.
  • It is safe to call again. The sounds are rendered anew and replace the ones with the same ids.
  • The sounds are added with addBuffer, so each one dispatches a loaded event.
  • It uses the hub's audio context to create the buffers, which works before the first user gesture.

See also​