rehowl/lib/Play.d.ts

Opinionated React wrapper for Howler.js

/// <reference types="react" />
/// <reference types="howler" />
interface ISoundInfo {
    playing: () => boolean;
    duration: () => number;
    seek: () => number;
    volume: () => number;
}
interface Props {
    /** Instance of Howl to play sounds from. */
    howl: null | Howl;
    /** If specified, play a sprite instead of the entire source. */
    sprite?: string;
    children?: (props: ISoundInfo) => JSX.Element;
    /**
     * Pause playback.
     *
     * @default false
     */
    pause?: boolean;
    /**
     * Control playback volume, from 0 to 1.
     *
     * @default 1
     */
    volume?: number;
    /**
     * Mute playback.
     *
     * @default false
     */
    mute?: boolean;
    /**
     * While true, playback will be stopped.
     *
     * Stopping sets seek to 0 and allows Howl to garbage collect the sound.
     *
     * Consider setting pause to true and seek to 0 instead if you're playing many sounds at once.
     *
     * @default false
     */
    stop?: boolean;
    /**
     * The time to seek this sound to in seconds.
     *
     * The seek only applies once per value change.
     **/
    seek?: number;
    /**
     * Set the rate of playback, from 0.5 to 4.
     *
     * @default 1
     */
    rate?: number;
    /**
     * Whether to loop the track or sprite on play end.
     *
     * @default false
     */
    loop?: boolean;
    /**
     * Fade a currently playing sound between two volumes.
     *
     * Values are [from, to, duration].
     */
    fade?: [number, number, number];
    /**
     * Listen for play events.
     *
     * Fires once when <Play /> is mounted even if the sound starts in a stopped or paused state.
     */
    onPlay?: () => void;
    /**
     * Fires when play fails and provides the error message or code.
     */
    onPlayError?: (message: string) => void;
    /**
     * Fires when play ends, meaning the sound reached its end, including every time a loop has finished.
     */
    onEnd?: () => void;
    /**
     * Fires when this sound is paused, including on <Play /> mount if `pause` or `stop` is true.
     */
    onPause?: () => void;
    /**
     * Fires when the sound is stopped.
     */
    onStop?: () => void;
    /**
     * Fires when the sound is muted or unmuted.
     */
    onMute?: () => void;
    /**
     * Fires when the sound's volume is set, including on <Play /> mount if `volume` is set.
     */
    onVolume?: () => void;
    /**
     * Fires when the sound is seeked.
     */
    onSeek?: () => void;
    /**
     * Fires when this sound's fade is complete.
     */
    onFade?: () => void;
    /**
     * Fires when the rate of playback for this sound is changed.
     */
    onRate?: () => void;
}
/**
 * Plays and controls sounds from a Howl.
 *
 * The Howl instance, provided by the `howl` prop, can come from `useHowl`,
 * `<Rehowl />`, or provided from your own use of howler.js
 *
 * You can render **multiple `<Play />` components** for a single
 * Howl instance in order to play multiple sounds or sprites at once.
 *
 * Event handlers fire only for the `<Play />` that they correspond to,
 * and not for every sound playing off of the Howl instance like in howler.js
 */
export declare function Play(props: Props): JSX.Element | null;
export {};