Skip to main content

renderUiSound

Added in 6.5.0

Render the samples of one interface sound. addUiSounds uses it underneath. Call it yourself when you need the audio outside the hub, or want to change it before you add it.

import { renderUiSound } from 'soundhub/ui';

renderUiSound(name: UiSoundName, sampleRate: number): Float32Array;

Parameters​

ParameterTypeDefaultDescription
nameUiSoundNamerequiredOne of the twelve names, such as 'click' or 'success'.
sampleRatenumberrequiredSamples per second, usually the sample rate of your audio context.

Returns​

Float32Array: the samples, mono, between -1 and 1.

Example​

A quieter, slower success sound under an id of your own:

import { SoundHub } from 'soundhub';
import { renderUiSound } from 'soundhub/ui';

const soundHub = new SoundHub();
const context = soundHub.getContext();

const samples = renderUiSound('success', context.sampleRate);
const buffer = context.createBuffer(1, samples.length, context.sampleRate);
buffer.getChannelData(0).set(samples.map((s) => s * 0.5));

soundHub.addBuffer('level-complete', buffer);
soundHub.play('level-complete', { playbackRate: 0.75 });

Good to know​

  • The result is the same on every call and in every browser, for the same name and sample rate.
  • An unknown name throws an error.
  • Every sound starts and ends near silence, so there is no click at either edge.

See also​