useAudio

Hook that manages audio playback with sprite support

browser

test coverage

Last changed: 3 days ago

TIP

This hook uses Audio browser api to provide enhanced functionality. Make sure to check for compatibility with different browsers when using this api

Installation

Library

CLI

Manual

import { useAudio } from '@siberiacancode/reactuse';

Usage

const audio = useAudio("/path/to/sound.mp3");

Demo

source

Api

Parameters

Name	Type	Default	Note
url	string	-	The URL of the audio file to play
options?	UseAudioOptions	-	Audio configuration options
options.volume?	number	1	Initial volume level (0 to 1)
options.playbackRate?	number	1	Initial playback speed (0.5 to 2)
options.interrupt?	boolean	false	Whether to stop current playback when starting a new one
options.soundEnabled?	boolean	true	Whether audio playback is initially enabled
options.sprite?	SpriteMap	-	Map of named audio segments for sprite-based playback

Returns

UseAudioReturn

Type declaration

export interface SpriteMap {
  /** [start time in seconds, end time in seconds] */
  [key: string]: [number, number];
}

export interface UseAudioOptions {
  /** Whether audio playback is initially enabled */
  immediately?: boolean;
  /** Whether to stop current playback when starting a new one */
  interrupt?: boolean;
  /** Initial playback speed (0.5 to 2) */
  playbackRate?: number;
  /** Map of named audio segments for sprite-based playback */
  sprite?: SpriteMap;
  /** Initial volume level (0 to 1) */
  volume?: number;
}

export interface UseAudioReturn {
  /** Current playback speed (0.5 to 2) */
  playbackRate: number;
  /** Whether audio is currently playing */
  playing: boolean;
  /** Current volume level (0 to 1) */
  volume: number;
  /** Set playback speed (0.5 to 2) */
  changePlaybackRate: (value: number) => void;
  /** Pause audio playback at current position */
  pause: () => void;
  /** Start audio playback from the beginning or specified sprite segment */
  play: (sprite?: string) => Promise<void>;
  /** Set audio volume level (0 to 1) */
  setVolume: (value: number) => void;
  /** Stop audio playback and reset position to start */
  stop: () => void;
}

Source

Source • Demo

Contributors

D

debabin