| 1 | {"version":3,"file":"use-sound.cjs.production.min.js","sources":["../src/index.ts","../src/use-on-mount.ts"],"sourcesContent":["import React from 'react';\n\nimport useOnMount from './use-on-mount';\n\nimport { HookOptions, PlayOptions, PlayFunction, ReturnedValue } from './types';\n\nexport default function useSound(\n url: string,\n {\n volume = 1,\n playbackRate = 1,\n soundEnabled = true,\n interrupt = false,\n ...delegated\n }: HookOptions = {}\n) {\n const HowlConstructor = React.useRef<HowlStatic | null>(null);\n const [isPlaying, setIsPlaying] = React.useState(false);\n\n const [sound, setSound] = React.useState<Howl | null>(null);\n\n // We want to lazy-load Howler, since sounds can't play on load anyway.\n useOnMount(() => {\n import('howler').then(mod => {\n HowlConstructor.current = mod.Howl;\n\n const sound = new HowlConstructor.current({\n src: [url],\n volume,\n ...delegated,\n });\n\n setSound(sound);\n });\n });\n\n // When the URL changes, we have to do a whole thing where we recreate\n // the Howl instance. This is because Howler doesn't expose a way to\n // tweak the sound\n React.useEffect(() => {\n if (HowlConstructor.current && sound) {\n setSound(\n new HowlConstructor.current({\n src: [url],\n volume,\n ...delegated,\n })\n );\n }\n // The linter wants to run this effect whenever ANYTHING changes,\n // but very specifically I only want to recreate the Howl instance\n // when the `url` changes. Other changes should have no effect.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [url]);\n\n // Whenever volume/playbackRate are changed, change those properties\n // on the sound instance.\n React.useEffect(() => {\n if (sound) {\n sound.volume(volume);\n sound.rate(playbackRate);\n }\n // A weird bug means that including the `sound` here can trigger an\n // error on unmount, where the state loses track of the sprites??\n // No idea, but anyway I don't need to re-run this if only the `sound`\n // changes.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [volume, playbackRate]);\n\n const play: PlayFunction = React.useCallback(\n (options: PlayOptions = {}) => {\n if (!sound || (!soundEnabled && !options.forceSoundEnabled)) {\n return;\n }\n\n if (interrupt) {\n sound.stop();\n }\n\n if (options.playbackRate) {\n sound.rate(options.playbackRate);\n }\n\n sound.play(options.id);\n\n sound.once('end', () => setIsPlaying(false));\n\n setIsPlaying(true);\n },\n [sound, soundEnabled, interrupt]\n );\n\n const stop = React.useCallback(() => {\n if (!sound) {\n return;\n }\n sound.stop();\n setIsPlaying(false);\n }, [sound]);\n\n const returnedValue: ReturnedValue = [\n play,\n {\n sound,\n stop,\n isPlaying,\n },\n ];\n\n return returnedValue;\n}\n","import * as React from 'react';\n\nexport default function useOnMount(callback: React.EffectCallback) {\n React.useEffect(callback, []);\n}\n"],"names":["url","volume","playbackRate","soundEnabled","interrupt","delegated","HowlConstructor","React","useRef","useState","isPlaying","setIsPlaying","sound","setSound","then","mod","current","Howl","src","useEffect","rate","play","useCallback","options","forceSoundEnabled","stop","id","once"],"mappings":"4XAOEA,oBAOiB,YALfC,OAAAA,aAAS,QACTC,aAAAA,aAAe,QACfC,aAAAA,oBACAC,UAAAA,gBACGC,6LAGCC,EAAkBC,EAAMC,OAA0B,QACtBD,EAAME,UAAS,GAA1CC,OAAWC,SAEQJ,EAAME,SAAsB,MAA/CG,OAAOC,OChBdN,aDmBW,yRACF,eAAUO,MAAK,SAAAC,GACpBT,EAAgBU,QAAUD,EAAIE,SAExBL,EAAQ,IAAIN,EAAgBU,WAChCE,IAAK,CAAClB,GACNC,OAAAA,GACGI,IAGLQ,EAASD,QC7Ba,IDoC1BL,EAAMY,WAAU,WACVb,EAAgBU,SAAWJ,GAC7BC,EACE,IAAIP,EAAgBU,WAClBE,IAAK,CAAClB,GACNC,OAAAA,GACGI,OAQR,CAACL,IAIJO,EAAMY,WAAU,WACVP,IACFA,EAAMX,OAAOA,GACbW,EAAMQ,KAAKlB,MAOZ,CAACD,EAAQC,QAENmB,EAAqBd,EAAMe,aAC/B,SAACC,YAAAA,IAAAA,EAAuB,IACjBX,IAAWT,GAAiBoB,EAAQC,qBAIrCpB,GACFQ,EAAMa,OAGJF,EAAQrB,cACVU,EAAMQ,KAAKG,EAAQrB,cAGrBU,EAAMS,KAAKE,EAAQG,IAEnBd,EAAMe,KAAK,OAAO,kBAAMhB,GAAa,MAErCA,GAAa,MAEf,CAACC,EAAOT,EAAcC,IAGlBqB,EAAOlB,EAAMe,aAAY,WACxBV,IAGLA,EAAMa,OACNd,GAAa,MACZ,CAACC,UAEiC,CACnCS,EACA,CACET,MAAAA,EACAa,KAAAA,EACAf,UAAAA"} |