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 respective bleeps. 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,
  BleepsSettings
} from '@arwes/sounds';
const audioSettings: BleepsAudioSettings = {
  common: {
    volume: 0.75
  },
  categories: {
    interaction: {
      volume: 0.5
    },
    notification: {
      volume: 1
    }
  }
};
const playersSettings: BleepsPlayersSettings = {
  click: {
    src: ['/path/to/sounds/click.webm']
  },
  warning: {
    src: ['/path/to/sounds/warning.webm']
  }
};
const bleepsSettings: BleepsSettings = {
  click: {
    player: 'click',
    category: 'interaction'
  },
  warning: {
    player: 'warning',
    category: 'notification'
  }
};
const App: FC = ({ children }) => (
  <BleepsProvider
    audioSettings={audioSettings}
    playersSettings={playersSettings}
    bleepsSettings={bleepsSettings}
  >
    {children}
  </BleepsProvider>
);

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.

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.