UNPKG

react-use-audio-player

Version:

React hook for building custom audio playback controls

2 lines 6.47 kB
var y=Object.defineProperty,b=Object.defineProperties;var S=Object.getOwnPropertyDescriptors;var p=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable;var f=(l,e,t)=>e in l?y(l,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):l[e]=t,o=(l,e)=>{for(var t in e||(e={}))g.call(e,t)&&f(l,t,e[t]);if(p)for(var t of p(e))P.call(e,t)&&f(l,t,e[t]);return l},s=(l,e)=>b(l,S(e));import{createContext as C,useContext as _}from"react";import{useCallback as A,useEffect as x,useRef as O,useSyncExternalStore as F}from"react";import{Howl as H}from"howler";var d=class{constructor(){this._cache=new Map}create(e){let t=e.src;if(this._cache.has(t))return this._cache.get(t);let a=new H(e);return this._cache.set(t,a),a}set(e,t){this._cache.set(e,t)}get(e){return this._cache.get(e)}clear(e){this._cache.delete(e)}destroy(e){let t=this.get(e);t&&(t.unload(),this.clear(e))}reset(){this._cache.values().forEach(e=>e.unload()),this._cache.clear()}},v=new d,c=v;var n={isUnloaded:!0,isLoading:!1,isReady:!1,isLooping:!1,isPlaying:!1,isStopped:!1,isPaused:!1,duration:0,rate:1,volume:1,isMuted:!1,error:void 0},h=class{updateSnapshot(e){this.snapshot=o(o({},this.snapshot),e),this.subscriptions.forEach(t=>t())}updateSnapshotFromHowlState(e){this.updateSnapshot(o({},this.getSnapshotFromHowl(e)))}initHowl(e){var a,u;let t=c.create(e);this.src=e.src,this.howl=t,this.updateSnapshot(s(o({},this.getSnapshotFromHowl(t)),{error:void 0})),t._html5&&((a=t._sounds[0])!=null&&a._node)&&((u=t._sounds[0])==null?void 0:u._node).addEventListener("canplaythrough",()=>{this.updateSnapshotFromHowlState(t)}),t.on("load",()=>this.updateSnapshotFromHowlState(t)),t.on("play",()=>this.updateSnapshotFromHowlState(t)),t.on("end",()=>this.updateSnapshotFromHowlState(t)),t.on("pause",()=>this.updateSnapshotFromHowlState(t)),t.on("stop",()=>this.updateSnapshotFromHowlState(t)),t.on("mute",()=>this.updateSnapshotFromHowlState(t)),t.on("volume",()=>this.updateSnapshotFromHowlState(t)),t.on("rate",()=>this.updateSnapshotFromHowlState(t)),t.on("seek",()=>this.updateSnapshotFromHowlState(t)),t.on("fade",()=>this.updateSnapshotFromHowlState(t)),t.on("loaderror",(i,r)=>{console.error(`Howl load error: ${r}`),this.updateSnapshotFromHowlState(t),this.updateSnapshot({error:"Failed to load audio source"})}),t.on("playerror",(i,r)=>{console.error(`Howl playback error: ${r}`),this.updateSnapshotFromHowlState(t),this.updateSnapshot({error:"Failed to play audio source"})})}getSnapshotFromHowl(e){if(e.state()==="unloaded")return n;let t=e.state(),a=e.playing(),u=e.mute();return{isUnloaded:t==="unloaded",isLoading:t==="loading",isReady:t==="loaded",isLooping:e.loop(),isPlaying:a,isStopped:!a&&e.seek()===0,isPaused:!a&&e.seek()>0,duration:e.duration(),rate:e.rate(),volume:e.volume(),isMuted:typeof u=="object"?!1:u}}constructor(e){this.howl=null,this.src=null,this.subscriptions=new Set,this.snapshot=n,e!==void 0&&this.initHowl(e)}load(e){this.howl!==null&&this.destroy(),this.initHowl(e)}destroy(){this.src&&this.howl&&(this.howl.off("load"),this.howl.off("play"),this.howl.off("end"),this.howl.off("pause"),this.howl.off("stop"),this.howl.off("mute"),this.howl.off("volume"),this.howl.off("rate"),this.howl.off("seek"),this.howl.off("fade"),this.howl.off("loaderror"),this.howl.off("playerror"),c.destroy(this.src),this.src=null,this.howl=null)}subscribe(e){return this.subscriptions.add(e),()=>this.subscriptions.delete(e)}getSnapshot(){return this.snapshot}play(){if(this.howl){if(this.howl.playing())return;this.howl.play()}}pause(){this.howl&&this.howl.pause()}togglePlayPause(){this.snapshot.isPlaying?this.pause():this.play()}stop(){this.howl&&this.howl.stop()}setVolume(e){this.howl&&this.howl.volume(e)}setRate(e){this.howl&&this.howl.rate(e)}loopOn(){this.howl&&(this.howl.loop(!0),this.updateSnapshotFromHowlState(this.howl))}loopOff(){this.howl&&(this.howl.loop(!1),this.updateSnapshotFromHowlState(this.howl))}toggleLoop(){this.snapshot.isLooping?this.loopOff():this.loopOn()}mute(){this.howl&&this.howl.mute(!0)}unmute(){this.howl&&this.howl.mute(!1)}toggleMute(){this.snapshot.isMuted?this.unmute():this.mute()}seek(e){this.howl&&this.snapshot.duration!==1/0&&this.howl.seek(e)}getPosition(){return this.howl?this.howl.seek():0}fade(e,t,a){this.howl&&this.howl.fade(e,t,a)}};function m(l,e){let t=O(new h);l&&t.current&&l!==t.current.src&&t.current.load(o({src:l,format:e==null?void 0:e.format,html5:e==null?void 0:e.html5,autoplay:e==null?void 0:e.autoplay,loop:e==null?void 0:e.loop,volume:e==null?void 0:e.initialVolume,mute:e==null?void 0:e.initialMute,rate:e==null?void 0:e.initialRate},e));let a=F(t.current.subscribe.bind(t.current),t.current.getSnapshot.bind(t.current),()=>n);x(()=>(l&&t.current.src===null&&t.current.load(o({src:l,format:e==null?void 0:e.format,html5:e==null?void 0:e.html5,autoplay:e==null?void 0:e.autoplay,loop:e==null?void 0:e.loop,volume:e==null?void 0:e.initialVolume,mute:e==null?void 0:e.initialMute,rate:e==null?void 0:e.initialRate},e)),()=>{t.current&&t.current.destroy()}),[]);let u=A((i,r)=>{t.current.load(o({src:i,format:r==null?void 0:r.format,html5:r==null?void 0:r.html5,autoplay:r==null?void 0:r.autoplay,loop:r==null?void 0:r.loop,volume:r==null?void 0:r.initialVolume,mute:r==null?void 0:r.initialMute,rate:r==null?void 0:r.initialRate},r))},[]);return s(o({},a),{player:t.current.howl,src:t.current.src,load:l?void 0:u,play:t.current.play.bind(t.current),pause:t.current.pause.bind(t.current),togglePlayPause:t.current.togglePlayPause.bind(t.current),stop:t.current.stop.bind(t.current),setVolume:t.current.setVolume.bind(t.current),fade:t.current.fade.bind(t.current),mute:t.current.mute.bind(t.current),unmute:t.current.unmute.bind(t.current),toggleMute:t.current.toggleMute.bind(t.current),setRate:t.current.setRate.bind(t.current),seek:t.current.seek.bind(t.current),loopOn:t.current.loopOn.bind(t.current),loopOff:t.current.loopOff.bind(t.current),toggleLoop:t.current.toggleLoop.bind(t.current),getPosition:t.current.getPosition.bind(t.current),cleanup:t.current.destroy.bind(t.current)})}import{jsx as L}from"react/jsx-runtime";var w=C(null),z=()=>{let l=_(w);if(l===null)throw new Error("useAudioPlayerContext must be used within an AudioPlayerProvider");return l};function D({children:l}){let e=m();return L(w.Provider,{value:e,children:l})}export{D as AudioPlayerProvider,w as context,m as useAudioPlayer,z as useAudioPlayerContext}; //# sourceMappingURL=index.js.map