@mrmartineau/use-sound/dist/index.mjs

The web needs more (tasteful) sounds!

// src/index.ts
import React2 from "react";

// src/use-on-mount.ts
import * as React from "react";
function useOnMount(callback) {
  React.useEffect(callback, []);
}

// src/index.ts
function useSound(src, {
  id,
  volume = 1,
  playbackRate = 1,
  soundEnabled = true,
  interrupt = false,
  onload,
  ...delegated
} = {}) {
  const HowlConstructor = React2.useRef(null);
  const howlerGlobalRef = React2.useRef(null);
  const isHowlerLoaded = React2.useRef(false);
  const latestLoadId = React2.useRef(0);
  const activeSoundRef = React2.useRef(null);
  const activeSpritePlaybackIds = React2.useRef(
    /* @__PURE__ */ new Map()
  );
  const isMounted = React2.useRef(false);
  const hasSprite = Boolean(delegated.sprite);
  const [duration, setDuration] = React2.useState(null);
  const [isReady, setIsReady] = React2.useState(false);
  const [sound, setSound] = React2.useState(null);
  useOnMount(() => {
    isMounted.current = true;
    import("howler").then((mod) => {
      if (!isMounted.current) {
        return;
      }
      HowlConstructor.current = mod.Howl ?? mod.default.Howl;
      howlerGlobalRef.current = mod.Howler ?? mod.default.Howler;
      isHowlerLoaded.current = true;
      setIsReady(true);
    });
    return () => {
      isMounted.current = false;
      isHowlerLoaded.current = false;
      latestLoadId.current += 1;
      if (activeSoundRef.current) {
        activeSoundRef.current.stop();
        activeSoundRef.current.unload();
        activeSoundRef.current = null;
      }
      activeSpritePlaybackIds.current.clear();
    };
  });
  React2.useEffect(() => {
    if (!HowlConstructor.current || !isHowlerLoaded.current) {
      return;
    }
    const currentLoadId = latestLoadId.current + 1;
    latestLoadId.current = currentLoadId;
    const handleLoad = function() {
      if (typeof onload === "function") {
        onload.call(this);
      }
      if (!isMounted.current || currentLoadId !== latestLoadId.current) {
        return;
      }
      setDuration(this.duration() * 1e3);
    };
    const nextSound = new HowlConstructor.current({
      src: Array.isArray(src) ? src : [src],
      volume,
      rate: playbackRate,
      onload: handleLoad,
      ...delegated
    });
    const previousSound = activeSoundRef.current;
    if (previousSound) {
      previousSound.stop();
      previousSound.unload();
    }
    activeSpritePlaybackIds.current.clear();
    setSound(nextSound);
    activeSoundRef.current = nextSound;
  }, [JSON.stringify(src), isReady]);
  React2.useEffect(() => {
    if (sound) {
      sound.volume(volume);
      if (!hasSprite) {
        sound.rate(playbackRate);
      }
    }
  }, [sound, volume, playbackRate, hasSprite]);
  const play = React2.useCallback(
    (options) => {
      if (typeof options === "undefined") {
        options = {};
      }
      if (!sound || !soundEnabled && !options.forceSoundEnabled) {
        return;
      }
      if (interrupt) {
        sound.stop();
        activeSpritePlaybackIds.current.clear();
      }
      if (typeof options.playbackRate !== "undefined" && !hasSprite) {
        sound.rate(options.playbackRate);
      }
      const spriteKey = options.id ?? id;
      const playbackId = sound.play(spriteKey);
      if (typeof spriteKey === "string" && typeof playbackId === "number") {
        const playbackIdsForKey = activeSpritePlaybackIds.current.get(spriteKey) ?? /* @__PURE__ */ new Set();
        playbackIdsForKey.add(playbackId);
        activeSpritePlaybackIds.current.set(spriteKey, playbackIdsForKey);
        sound.once(
          "end",
          () => {
            const ids = activeSpritePlaybackIds.current.get(spriteKey);
            if (!ids) {
              return;
            }
            ids.delete(playbackId);
            if (ids.size === 0) {
              activeSpritePlaybackIds.current.delete(spriteKey);
            }
          },
          playbackId
        );
      }
    },
    [sound, soundEnabled, interrupt, hasSprite, id]
  );
  const stop = React2.useCallback(
    (id2) => {
      if (!sound) {
        return;
      }
      if (typeof id2 === "string") {
        const playbackIds = activeSpritePlaybackIds.current.get(id2);
        if (playbackIds && playbackIds.size > 0) {
          playbackIds.forEach((playbackId) => {
            sound.stop(playbackId);
          });
          activeSpritePlaybackIds.current.delete(id2);
          return;
        }
      }
      sound.stop(id2);
      if (typeof id2 === "undefined") {
        activeSpritePlaybackIds.current.clear();
      }
    },
    [sound]
  );
  const pause = React2.useCallback(
    (id2) => {
      if (!sound) {
        return;
      }
      if (typeof id2 === "string") {
        const playbackIds = activeSpritePlaybackIds.current.get(id2);
        if (playbackIds && playbackIds.size > 0) {
          playbackIds.forEach((playbackId) => {
            sound.pause(playbackId);
          });
          return;
        }
      }
      sound.pause(id2);
    },
    [sound]
  );
  const unlock = React2.useCallback(() => {
    if (!howlerGlobalRef.current || !howlerGlobalRef.current.ctx) {
      return;
    }
    if (howlerGlobalRef.current.ctx.state === "suspended") {
      try {
        void howlerGlobalRef.current.ctx.resume().catch(() => {
        });
      } catch {
      }
    }
  }, []);
  const returnedValue = [
    play,
    {
      sound,
      stop,
      pause,
      unlock,
      duration
    }
  ];
  return returnedValue;
}
export {
  useSound as default,
  useSound
};
//# sourceMappingURL=index.mjs.map