Arwes LogotypeArwes Logotext

Bleeps Categories

The bleeps in an application can be configured by predefined categories. Each category can have the audio settings which will be applicable to the bleeps configured in the respective categories. This can allow the user to have different audio settings for the application experience.

An example application with audio settings by categories can look like:

tsx
import React, { FC } from 'react';
import {
BleepsProvider,
BleepsAudioSettings,
BleepsPlayersSettings
} from '@arwes/sounds';
const audio: BleepsAudioSettings = {
common: {
volume: 0.75
},
categories: {
interaction: {
volume: 0.5
},
notification: {
volume: 1
}
}
};
const players: BleepsPlayersSettings = {
click: {
src: ['/path/to/sounds/click.webm']
},
warning: {
src: ['/path/to/sounds/warning.webm']
}
};
const App: FC = ({ children }) => (
<BleepsProvider audio={audio} players={players}>
{children}
</BleepsProvider>
);
export { App };

All bleeps would start with a volume of 0.75. If they are interaction bleeps, volume is 0.5, and if they are notification bleeps, volume is 1.

The categories can also be disabled with disabled: true.

Then the components consuming the bleeps should define their bleeps with their respective categories.

tsx
import React, { FC } from 'react';
import { withBleeps, Bleeps, BleepsSettings } from '@arwes/sounds';
interface ButtonProps {
bleeps: Bleeps
}
const ButtonComponent: FC<ButtonProps> = ({ bleeps, children }) => {
const onClick = () => bleeps.click.play();
return <button onClick={onClick}>{children}</button>;
};
const buttonBleeps: BleepsSettings = {
click: {
player: 'click',
category: 'interaction'
}
};
const Button = withBleeps(buttonBleeps)(ButtonComponent);
export { ButtonProps, Button };

Following the <App/> example, the <Button/> component will have the interaction sound with volume of 0.5.

The following predefined categories are available:

  • background - For components low volume background effects.
  • transition - For animation flow transitions.
  • interaction - For user events such as mouse clicks.
  • notification - For application events such as real-time chat messages.

It is recommended to allow the user to update the audio settings by categories in the application.