react-use-audio-player

import * as react_jsx_runtime from 'react/jsx-runtime'; import * as react from 'react'; import { ComponentProps } from 'react'; import { Howl } from 'howler'; declare module "howler" { interface Howl { _html5: boolean; _sounds: Array<{ _node?: HTMLAudioElement; }>; } } /** * Describes the full API of state-mutating actions one can perform on the audio */ interface AudioControls { /** Begins or resumes playback of the audio */ play: () => void; /** Pauses the audio at its current playhead */ pause: () => void; /** Plays/Pauses the audio */ togglePlayPause: () => void; /** Stops the audio, putting thep playhead back at 0 */ stop: () => void; /** Sets the volume of the audio. Takes a float between 0.1 and 1, where 1 is full volume */ setVolume: (volume: number) => void; /** Sets the playback rate of the audio. Takes a floating point number, where 1 is normal speed */ setRate: (speed: number) => void; /** Mutes the audio */ mute: () => void; /** Unmutes the audio */ unmute: () => void; /** Toggle the muted state */ toggleMute: () => void; /** Sets the audio to loop upon completion */ loopOn: () => void; /** Will plut the audio in a stopped state upon completion */ loopOff: () => void; /** Toggle the loop behavior */ toggleLoop: () => void; /** Fades the volume between [startVol] and [endVol] over [durationMs] miliseconds */ fade: (startVol: number, endVol: number, durationMs: number) => void; /** Moves the audio playhead to [seconds] seconds */ seek: (seconds: number) => void; /** Returns the current position of the audio playhead in seconds */ getPosition: () => number; } /** * Represents the options for loading an audio resource. * * This is a wrapper around many of the Howler HowlOptions interface. * For more detailed information, please refer to the Howler [documentation](https://github.com/goldfire/howler.js#documentation) */ interface AudioLoadOptions { /** When true, the audio will loop upon finishing. This may be changed later with the toggleLoop method */ loop?: boolean; /** The starting volume for the newly loaded audio. This may be changed later with the volume() method */ initialVolume?: number; /** When true, the audio will load in the muted state. This may be changed later with the toggleMute() method */ initialMute?: boolean; /** The starting playback rate for the newly loaded audio. This may be changed later with the rate() method */ initialRate?: number; /** Specifies the audio format. Required if an extension is not present in the src argument */ format?: string; /** When true, the audio will begin playback immediately after loading */ autoplay?: boolean; /** When true, an HTML5 Audio tag will be used to load the audio instead of the modern Web Audio API */ html5?: boolean; /** Callback that will be triggered when the audio is stopped */ onstop?: () => void | undefined; /** Callback that will be triggered when the audio is paused */ onpause?: () => void | undefined; /** Callback that will be triggered when the audio is successfully loaded */ onload?: () => void | undefined; /** Callback that will be triggered when the audio reaches its end */ onend?: () => void | undefined; /** Callback that will be triggered when the audio starts playing */ onplay?: () => void | undefined; } /** * The state (snapshot) managed by the store * Mutations to the state will be broadcast to all subscribers. */ type Snapshot = { /** Indicates whether the audio is in an unloaded state. */ readonly isUnloaded: boolean; /** Indicates whether the audio is currently loading. */ readonly isLoading: boolean; /** Indicates whether the audio is loaded and ready to play. */ readonly isReady: boolean; /** Represents the total duration of the audio in seconds. 0 until a sound is loaded */ readonly duration: number; /** The playback rate of the audio. A value of 1 indicates normal playback speed. */ readonly rate: number; /** The volume level of the audio, typically between 0 (muted) and 1 (full volume). */ readonly volume: number; /** An error message, if an issue occurred with the audio. */ readonly error?: string; /** Indicates whether the audio is set to loop after reaching its end. */ readonly isLooping: boolean; /** Indicates whether the audio is currently paused. */ readonly isPaused: boolean; /** Indicates whether the audio is currently stopped. */ readonly isStopped: boolean; /** Indicates whether the audio is currently playing. */ readonly isPlaying: boolean; /** Indicates whether the audio is currently muted. */ readonly isMuted: boolean; }; type AudioPlayer = AudioControls & Snapshot & { /** A reference to the underlying Howl object. * Use as an escape hatch for behavior not provided by useAudioPlayer. Please refer to Howler [documentation](https://github.com/goldfire/howler.js#documentation) * Manipulating the audio directly through the Howl may cause state to desynchronize * */ player: Howl | null; src: string | null; /** A way to explicitly load an audio resource */ load: (...args: [string, AudioLoadOptions | undefined]) => void; /** Removes event listeners, resets state and unloads the internal Howl object */ cleanup: () => void; }; declare function useAudioPlayer(src: string, options?: AudioLoadOptions): Omit<AudioPlayer, "load">; declare function useAudioPlayer(): AudioPlayer; declare const context: react.Context<AudioPlayer | null>; declare const useAudioPlayerContext: () => AudioPlayer; type Props = Omit<ComponentProps<typeof context.Provider>, "value">; declare function AudioPlayerProvider({ children }: Props): react_jsx_runtime.JSX.Element; export { type AudioControls, type AudioLoadOptions, type AudioPlayer, AudioPlayerProvider, context, useAudioPlayer, useAudioPlayerContext };