rehowl/lib/useHowl.js

Opinionated React wrapper for Howler.js

import { useState, useEffect } from 'react';
import { Howl } from 'howler';
/**
 * A hook to get a Howl instance for use with `<Play />`.
 *
 * Recommended when using Rehowl from a function component. If you're
 * using a class component, you'll need to use `<Rehowl />`.
 */
export function useHowl(howlOptions) {
    var src = howlOptions.src, sprite = howlOptions.sprite, format = howlOptions.format, html5 = howlOptions.html5, preload = howlOptions.preload, xhr = howlOptions.xhr, _a = howlOptions.defaultVolume, defaultVolume = _a === void 0 ? 0 : _a;
    var _b = useState(null), howl = _b[0], setHowl = _b[1];
    // Force rerender on load state changes.
    var _c = useState('unloaded'), setState = _c[1];
    // Force rerender on unlock.
    var _d = useState(true), setLocked = _d[1];
    var _e = useState(null), error = _e[0], setError = _e[1];
    useEffect(function () {
        var newHowl = new Howl({
            autoplay: false,
            format: format,
            html5: html5,
            onload: function () { return setState('loaded'); },
            onloaderror: function (id, message) { return setError({ id: id, message: message }); },
            onunlock: function () {
                setLocked(false);
            },
            preload: preload,
            sprite: sprite,
            src: src,
            volume: defaultVolume,
            xhr: xhr,
        });
        setHowl(newHowl);
        return function () {
            setHowl(null);
            setState('unloaded');
            setLocked(true);
            setError(null);
            if (!newHowl)
                return;
            newHowl.off();
            newHowl.stop();
            newHowl.unload();
        };
    }, [JSON.stringify(src), JSON.stringify(sprite), JSON.stringify(format), html5, xhr, preload, defaultVolume]);
    if (!howl) {
        return {
            howl: null,
            error: null,
            state: 'unloaded',
            load: function () { },
        };
    }
    var state = howl.state();
    return {
        howl: howl,
        error: error,
        state: state,
        load: state === 'unloaded'
            ? function () {
                howl && howl.load();
                setState('loading');
            }
            : function () { },
    };
}