react-use-audio-player - npm Package Compare versions

Comparing version 2.1.1 to 2.2.0

dist/audioPlayerState.d.ts

@@ -46,16 +46,2 @@ import { Howl } from "howler";
 export declare function initStateFromHowl(howl?: Howl): AudioPlayerState;
-export declare function reducer(state: AudioPlayerState, action: Action): AudioPlayerState | {
-    isLoading: boolean;
-    linkMediaSession: boolean;
-    src: string | null;
-    looping: boolean;
-    isReady: boolean;
-    paused: boolean;
-    stopped: boolean;
-    playing: boolean;
-    duration: number;
-    muted: boolean;
-    rate: number;
-    volume: number;
-    error: string | null;
-};
+export declare function reducer(state: AudioPlayerState, action: Action): AudioPlayerState;

dist/react-use-audio-player.cjs.development.js

@@ -85,10 +85,8 @@ 'use strict';
 function reducer(state, action) {
-  var _action$linkMediaSess;
   switch (action.type) {
-    case "START_LOAD":
+    case ActionTypes.START_LOAD:
       return _extends({}, initStateFromHowl(), {
-        isLoading: true,
-        linkMediaSession: (_action$linkMediaSess = action.linkMediaSession) !== null && _action$linkMediaSess !== void 0 ? _action$linkMediaSess : false
+        isLoading: true
       });
-    case "ON_LOAD":
+    case ActionTypes.ON_LOAD:
       // in React 18 there is a weird race condition where ON_LOAD receives a Howl object that has been unloaded
@@ -100,7 +98,7 @@ // if we detect this case just return the existing state to wait for another action
       return initStateFromHowl(action.howl);
-    case "ON_ERROR":
+    case ActionTypes.ON_ERROR:
       return _extends({}, initStateFromHowl(), {
         error: action.message
       });
-    case "ON_PLAY":
+    case ActionTypes.ON_PLAY:
       return _extends({}, state, {
@@ -111,3 +109,3 @@ playing: true,
       });
-    case "ON_PAUSE":
+    case ActionTypes.ON_PAUSE:
       return _extends({}, state, {
@@ -117,3 +115,3 @@ playing: false,
       });
-    case "ON_STOP":
+    case ActionTypes.ON_STOP:
       {
@@ -126,3 +124,3 @@ return _extends({}, state, {
       }
-    case "ON_END":
+    case ActionTypes.ON_END:
       {
@@ -134,3 +132,3 @@ return _extends({}, state, {
       }
-    case "ON_MUTE":
+    case ActionTypes.ON_MUTE:
       {
@@ -142,3 +140,3 @@ var _action$howl$mute;
       }
-    case "ON_RATE":
+    case ActionTypes.ON_RATE:
       {
@@ -150,3 +148,3 @@ var _action$howl$rate, _action$howl;
       }
-    case "ON_VOLUME":
+    case ActionTypes.ON_VOLUME:
       {
@@ -158,3 +156,3 @@ var _action$howl$volume, _action$howl2;
       }
-    case "ON_LOOP":
+    case ActionTypes.ON_LOOP:
       {
@@ -266,3 +264,3 @@ var _action$toggleValue = action.toggleValue,
   var wrappedDispatch = react.useRef(function (action) {
-    if (action.type === "START_LOAD") {
+    if (action.type === ActionTypes.START_LOAD) {
       var howl = action.howl;
@@ -387,8 +385,2 @@ // set up event listening
     dispatch = _useHowlEventSync[1];
-  react.useEffect(function () {
-    // stop/delete the sound object when the hook unmounts
-    return function () {
-      getHowlManager().destroyHowl();
-    };
-  }, []);
   var load = react.useCallback(function () {
@@ -401,2 +393,4 @@ for (var _len = arguments.length, _ref = new Array(_len), _key = 0; _key < _len; _key++) {
       options = _ref$ === void 0 ? {} : _ref$;
+    // TODO investigate: if we try to avoid loading the same sound (existing howl & same src in call)
+    // then there are some bugs like in the MultipleSounds demo, the "play" button will not switch to "pause"
     var howl = getHowlManager().createHowl(_extends({
@@ -498,2 +492,6 @@ src: src
   }, []);
+  var cleanup = react.useCallback(function () {
+    var _getHowlManager;
+    (_getHowlManager = getHowlManager()) === null || _getHowlManager === void 0 ? void 0 : _getHowlManager.destroyHowl();
+  }, []);
   return _extends({}, state, {
@@ -511,3 +509,4 @@ load: load,
     setVolume: setVolume,
-    loop: loop
+    loop: loop,
+    cleanup: cleanup
   });
@@ -550,2 +549,3 @@ };
       options = _ref$ === void 0 ? {} : _ref$;
+    // the HowlInstanceManager will intercept this newly created howl and broadcast it to registered hooks
     howlManager.current.createHowl(_extends({
@@ -552,0 +552,0 @@ src: src

dist/react-use-audio-player.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,o=require("react"),t=require("howler");function n(){return(n=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function l(e){if(void 0===e)return{src:null,isReady:!1,isLoading:!1,looping:!1,duration:0,rate:1,volume:1,muted:!1,playing:!1,paused:!1,stopped:!1,error:null};var o=e.seek(),t=e.playing();return{isReady:"loaded"===e.state(),isLoading:"loading"===e.state(),src:e._src,looping:e.loop(),duration:e.duration(),rate:e.rate(),volume:e.volume(),muted:e.mute(),playing:t,paused:!t,stopped:!t&&0===o,error:null}}function a(e,o){var t;switch(o.type){case"START_LOAD":return n({},l(),{isLoading:!0,linkMediaSession:null!==(t=o.linkMediaSession)&&void 0!==t&&t});case"ON_LOAD":return"unloaded"===o.howl.state()?e:l(o.howl);case"ON_ERROR":return n({},l(),{error:o.message});case"ON_PLAY":return n({},e,{playing:!0,paused:!1,stopped:!1});case"ON_PAUSE":return n({},e,{playing:!1,paused:!0});case"ON_STOP":return n({},e,{playing:!1,paused:!1,stopped:!0});case"ON_END":return n({},e,{playing:e.looping,stopped:!e.looping});case"ON_MUTE":var a;return n({},e,{muted:null!==(a=o.howl.mute())&&void 0!==a&&a});case"ON_RATE":var u,r;return n({},e,{rate:null!==(u=null===(r=o.howl)||void 0===r?void 0:r.rate())&&void 0!==u?u:1});case"ON_VOLUME":var i,s;return n({},e,{volume:null!==(i=null===(s=o.howl)||void 0===s?void 0:s.volume())&&void 0!==i?i:1});case"ON_LOOP":var c=o.toggleValue,v=void 0!==c&&c;return o.howl.loop(v),n({},e,{looping:v});default:return e}}function u(t,n){var l=n[0],a=n[1],u=o.useCallback((function(){var o=t.getHowl();void 0!==o&&a({type:e.ON_LOAD,howl:o})}),[a,t]),r=o.useCallback((function(o,t){a({type:e.ON_ERROR,message:t})}),[a]),i=o.useCallback((function(){var o=t.getHowl();void 0!==o&&a({type:e.ON_PLAY,howl:o})}),[a,t]),s=o.useCallback((function(){var o=t.getHowl();void 0!==o&&a({type:e.ON_PAUSE,howl:o})}),[a,t]),c=o.useCallback((function(){var o=t.getHowl();void 0!==o&&a({type:e.ON_END,howl:o})}),[a,t]),v=o.useCallback((function(){var o=t.getHowl();void 0!==o&&a({type:e.ON_STOP,howl:o})}),[a,t]),f=o.useCallback((function(){var o=t.getHowl();void 0!==o&&a({type:e.ON_MUTE,howl:o})}),[a,t]),d=o.useCallback((function(){var o=t.getHowl();void 0!==o&&a({type:e.ON_VOLUME,howl:o})}),[a,t]),p=o.useCallback((function(){var o=t.getHowl();void 0!==o&&a({type:e.ON_RATE,howl:o})}),[a,t]);return o.useEffect((function(){return function(){var e=t.getHowl();null==e||e.off("loaderror",r),null==e||e.off("playerror",r),null==e||e.off("play",i),null==e||e.off("pause",s),null==e||e.off("end",c),null==e||e.off("stop",v),null==e||e.off("mute",f),null==e||e.off("volume",d),null==e||e.off("rate",p)}}),[]),[l,o.useRef((function(e){if("START_LOAD"===e.type){var o=e.howl;o.once("load",u),o.on("loaderror",r),o.on("playerror",r),o.on("play",i),o.on("pause",s),o.on("end",c),o.on("stop",v),o.on("mute",f),o.on("volume",d),o.on("rate",p)}a(e)})).current]}!function(e){e.START_LOAD="START_LOAD",e.ON_LOAD="ON_LOAD",e.ON_ERROR="ON_ERROR",e.ON_PLAY="ON_PLAY",e.ON_PAUSE="ON_PAUSE",e.ON_STOP="ON_STOP",e.ON_END="ON_END",e.ON_RATE="ON_RATE",e.ON_MUTE="ON_MUTE",e.ON_VOLUME="ON_VOLUME",e.ON_LOOP="ON_LOOP"}(e||(e={}));var r=["initialVolume","initialRate","initialMute"],i=function(){function o(){this.callbacks=new Map,this.howl=void 0,this.options={},this.subscriptionIndex=0}var l=o.prototype;return l.subscribe=function(e){var o=(this.subscriptionIndex++).toString();return this.callbacks.set(o,e),o},l.unsubscribe=function(e){this.callbacks.delete(e)},l.getHowl=function(){return this.howl},l.getNumberOfConnections=function(){return this.callbacks.size},l.createHowl=function(o){this.destroyHowl(),this.options=o;var l=this.options,a=l.initialVolume,u=l.initialRate,i=l.initialMute,s=function(e,o){if(null==e)return{};var t,n,l={},a=Object.keys(e);for(n=0;n<a.length;n++)o.indexOf(t=a[n])>=0||(l[t]=e[t]);return l}(l,r),c=new t.Howl(n({mute:i,volume:a,rate:u},s));return this.callbacks.forEach((function(o){return o({type:e.START_LOAD,howl:c})})),this.howl=c,c},l.destroyHowl=function(){var e,o,t,n,l,a;this.options.onload&&(null===(o=this.howl)||void 0===o||o.off("load",this.options.onload)),this.options.onend&&(null===(t=this.howl)||void 0===t||t.off("end",this.options.onend)),this.options.onplay&&(null===(n=this.howl)||void 0===n||n.off("play",this.options.onplay)),this.options.onpause&&(null===(l=this.howl)||void 0===l||l.off("pause",this.options.onpause)),this.options.onstop&&(null===(a=this.howl)||void 0===a||a.off("stop",this.options.onstop)),null===(e=this.howl)||void 0===e||e.unload()},l.broadcast=function(e){this.callbacks.forEach((function(o){return o(e)}))},o}(),s=function(){function e(){}return e.getInstance=function(){return void 0===this.instance&&(e.instance=new i),e.instance},e}();s.instance=void 0,exports.useAudioPlayer=function(){var t=o.useRef(null);function r(){if(null!==t.current)return t.current;var e=new i;return t.current=e,e}var s=u(r(),o.useReducer(a,r().getHowl(),l)),c=s[0],v=s[1];o.useEffect((function(){return function(){r().destroyHowl()}}),[]);var f=o.useCallback((function(){for(var o=arguments.length,t=new Array(o),l=0;l<o;l++)t[l]=arguments[l];var a=t[0],u=t[1],i=void 0===u?{}:u,s=r().createHowl(n({src:a},i));v({type:e.START_LOAD,howl:s})}),[]),d=o.useCallback((function(e){var o=r().getHowl();void 0!==o&&o.seek(e)}),[]),p=o.useCallback((function(){var e,o=r().getHowl();return void 0===o?0:null!==(e=o.seek())&&void 0!==e?e:0}),[]),O=o.useCallback((function(){var e=r().getHowl();void 0!==e&&e.play()}),[]),w=o.useCallback((function(){var e=r().getHowl();void 0!==e&&e.pause()}),[]),g=o.useCallback((function(){var e=r().getHowl();void 0!==e&&(c.playing?e.pause():e.play())}),[c]),h=o.useCallback((function(){var e=r().getHowl();void 0!==e&&e.stop()}),[]),b=o.useCallback((function(e,o,t){var n=r().getHowl();void 0!==n&&n.fade(e,o,t)}),[]),y=o.useCallback((function(e){var o=r().getHowl();void 0!==o&&o.rate(e)}),[]),_=o.useCallback((function(e){var o=r().getHowl();void 0!==o&&o.volume(e)}),[]),k=o.useCallback((function(e){var o=r().getHowl();void 0!==o&&o.mute(e)}),[]),N=o.useCallback((function(o){var t=r().getHowl();void 0!==t&&v({type:e.ON_LOOP,howl:t,toggleValue:o})}),[]);return n({},c,{load:f,seek:d,getPosition:p,play:O,pause:w,togglePlayPause:g,stop:h,mute:k,fade:b,setRate:y,setVolume:_,loop:N})},exports.useGlobalAudioPlayer=function(){var t=o.useRef(s.getInstance()),r=u(t.current,o.useReducer(a,t.current.getHowl(),l)),i=r[0],c=r[1];o.useEffect((function(){var o=t.current.getHowl();void 0!==o&&(c({type:e.START_LOAD,howl:o}),"loaded"===o.state()&&c({type:e.ON_LOAD,howl:o}));var n=t.current.subscribe((function(e){c(e)}));return function(){t.current.unsubscribe(n)}}),[]);var v=o.useCallback((function(){for(var e=arguments.length,o=new Array(e),l=0;l<e;l++)o[l]=arguments[l];var a=o[0],u=o[1],r=void 0===u?{}:u;t.current.createHowl(n({src:a},r))}),[]),f=o.useCallback((function(e){var o=t.current.getHowl();void 0!==o&&o.seek(e)}),[]),d=o.useCallback((function(){var e,o=t.current.getHowl();return void 0===o?0:null!==(e=o.seek())&&void 0!==e?e:0}),[]),p=o.useCallback((function(){var e=t.current.getHowl();void 0!==e&&e.play()}),[]),O=o.useCallback((function(){var e=t.current.getHowl();void 0!==e&&e.pause()}),[]),w=o.useCallback((function(){var e=t.current.getHowl();void 0!==e&&(i.playing?e.pause():e.play())}),[i]),g=o.useCallback((function(){var e=t.current.getHowl();void 0!==e&&e.stop()}),[]),h=o.useCallback((function(e,o,n){var l=t.current.getHowl();void 0!==l&&l.fade(e,o,n)}),[]),b=o.useCallback((function(e){var o=t.current.getHowl();void 0!==o&&o.rate(e)}),[]),y=o.useCallback((function(e){var o=t.current.getHowl();void 0!==o&&o.volume(e)}),[]),_=o.useCallback((function(e){var o=t.current.getHowl();void 0!==o&&o.mute(e)}),[]),k=o.useCallback((function(o){var n=t.current.getHowl();void 0!==n&&t.current.broadcast({type:e.ON_LOOP,howl:n,toggleValue:o})}),[]);return n({},i,{load:v,seek:f,getPosition:d,play:p,pause:O,togglePlayPause:w,stop:g,mute:_,fade:h,setRate:b,setVolume:y,loop:k})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,o=require("react"),t=require("howler");function n(){return(n=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function l(e){if(void 0===e)return{src:null,isReady:!1,isLoading:!1,looping:!1,duration:0,rate:1,volume:1,muted:!1,playing:!1,paused:!1,stopped:!1,error:null};var o=e.seek(),t=e.playing();return{isReady:"loaded"===e.state(),isLoading:"loading"===e.state(),src:e._src,looping:e.loop(),duration:e.duration(),rate:e.rate(),volume:e.volume(),muted:e.mute(),playing:t,paused:!t,stopped:!t&&0===o,error:null}}function a(o,t){switch(t.type){case e.START_LOAD:return n({},l(),{isLoading:!0});case e.ON_LOAD:return"unloaded"===t.howl.state()?o:l(t.howl);case e.ON_ERROR:return n({},l(),{error:t.message});case e.ON_PLAY:return n({},o,{playing:!0,paused:!1,stopped:!1});case e.ON_PAUSE:return n({},o,{playing:!1,paused:!0});case e.ON_STOP:return n({},o,{playing:!1,paused:!1,stopped:!0});case e.ON_END:return n({},o,{playing:o.looping,stopped:!o.looping});case e.ON_MUTE:var a;return n({},o,{muted:null!==(a=t.howl.mute())&&void 0!==a&&a});case e.ON_RATE:var u,r;return n({},o,{rate:null!==(u=null===(r=t.howl)||void 0===r?void 0:r.rate())&&void 0!==u?u:1});case e.ON_VOLUME:var i,s;return n({},o,{volume:null!==(i=null===(s=t.howl)||void 0===s?void 0:s.volume())&&void 0!==i?i:1});case e.ON_LOOP:var c=t.toggleValue,v=void 0!==c&&c;return t.howl.loop(v),n({},o,{looping:v});default:return o}}function u(t,n){var l=n[0],a=n[1],u=o.useCallback((function(){var o=t.getHowl();void 0!==o&&a({type:e.ON_LOAD,howl:o})}),[a,t]),r=o.useCallback((function(o,t){a({type:e.ON_ERROR,message:t})}),[a]),i=o.useCallback((function(){var o=t.getHowl();void 0!==o&&a({type:e.ON_PLAY,howl:o})}),[a,t]),s=o.useCallback((function(){var o=t.getHowl();void 0!==o&&a({type:e.ON_PAUSE,howl:o})}),[a,t]),c=o.useCallback((function(){var o=t.getHowl();void 0!==o&&a({type:e.ON_END,howl:o})}),[a,t]),v=o.useCallback((function(){var o=t.getHowl();void 0!==o&&a({type:e.ON_STOP,howl:o})}),[a,t]),f=o.useCallback((function(){var o=t.getHowl();void 0!==o&&a({type:e.ON_MUTE,howl:o})}),[a,t]),d=o.useCallback((function(){var o=t.getHowl();void 0!==o&&a({type:e.ON_VOLUME,howl:o})}),[a,t]),p=o.useCallback((function(){var o=t.getHowl();void 0!==o&&a({type:e.ON_RATE,howl:o})}),[a,t]);return o.useEffect((function(){return function(){var e=t.getHowl();null==e||e.off("loaderror",r),null==e||e.off("playerror",r),null==e||e.off("play",i),null==e||e.off("pause",s),null==e||e.off("end",c),null==e||e.off("stop",v),null==e||e.off("mute",f),null==e||e.off("volume",d),null==e||e.off("rate",p)}}),[]),[l,o.useRef((function(o){if(o.type===e.START_LOAD){var t=o.howl;t.once("load",u),t.on("loaderror",r),t.on("playerror",r),t.on("play",i),t.on("pause",s),t.on("end",c),t.on("stop",v),t.on("mute",f),t.on("volume",d),t.on("rate",p)}a(o)})).current]}!function(e){e.START_LOAD="START_LOAD",e.ON_LOAD="ON_LOAD",e.ON_ERROR="ON_ERROR",e.ON_PLAY="ON_PLAY",e.ON_PAUSE="ON_PAUSE",e.ON_STOP="ON_STOP",e.ON_END="ON_END",e.ON_RATE="ON_RATE",e.ON_MUTE="ON_MUTE",e.ON_VOLUME="ON_VOLUME",e.ON_LOOP="ON_LOOP"}(e||(e={}));var r=["initialVolume","initialRate","initialMute"],i=function(){function o(){this.callbacks=new Map,this.howl=void 0,this.options={},this.subscriptionIndex=0}var l=o.prototype;return l.subscribe=function(e){var o=(this.subscriptionIndex++).toString();return this.callbacks.set(o,e),o},l.unsubscribe=function(e){this.callbacks.delete(e)},l.getHowl=function(){return this.howl},l.getNumberOfConnections=function(){return this.callbacks.size},l.createHowl=function(o){this.destroyHowl(),this.options=o;var l=this.options,a=l.initialVolume,u=l.initialRate,i=l.initialMute,s=function(e,o){if(null==e)return{};var t,n,l={},a=Object.keys(e);for(n=0;n<a.length;n++)o.indexOf(t=a[n])>=0||(l[t]=e[t]);return l}(l,r),c=new t.Howl(n({mute:i,volume:a,rate:u},s));return this.callbacks.forEach((function(o){return o({type:e.START_LOAD,howl:c})})),this.howl=c,c},l.destroyHowl=function(){var e,o,t,n,l,a;this.options.onload&&(null===(o=this.howl)||void 0===o||o.off("load",this.options.onload)),this.options.onend&&(null===(t=this.howl)||void 0===t||t.off("end",this.options.onend)),this.options.onplay&&(null===(n=this.howl)||void 0===n||n.off("play",this.options.onplay)),this.options.onpause&&(null===(l=this.howl)||void 0===l||l.off("pause",this.options.onpause)),this.options.onstop&&(null===(a=this.howl)||void 0===a||a.off("stop",this.options.onstop)),null===(e=this.howl)||void 0===e||e.unload()},l.broadcast=function(e){this.callbacks.forEach((function(o){return o(e)}))},o}(),s=function(){function e(){}return e.getInstance=function(){return void 0===this.instance&&(e.instance=new i),e.instance},e}();s.instance=void 0,exports.useAudioPlayer=function(){var t=o.useRef(null);function r(){if(null!==t.current)return t.current;var e=new i;return t.current=e,e}var s=u(r(),o.useReducer(a,r().getHowl(),l)),c=s[0],v=s[1],f=o.useCallback((function(){for(var o=arguments.length,t=new Array(o),l=0;l<o;l++)t[l]=arguments[l];var a=t[0],u=t[1],i=void 0===u?{}:u,s=r().createHowl(n({src:a},i));v({type:e.START_LOAD,howl:s})}),[]),d=o.useCallback((function(e){var o=r().getHowl();void 0!==o&&o.seek(e)}),[]),p=o.useCallback((function(){var e,o=r().getHowl();return void 0===o?0:null!==(e=o.seek())&&void 0!==e?e:0}),[]),O=o.useCallback((function(){var e=r().getHowl();void 0!==e&&e.play()}),[]),w=o.useCallback((function(){var e=r().getHowl();void 0!==e&&e.pause()}),[]),g=o.useCallback((function(){var e=r().getHowl();void 0!==e&&(c.playing?e.pause():e.play())}),[c]),h=o.useCallback((function(){var e=r().getHowl();void 0!==e&&e.stop()}),[]),b=o.useCallback((function(e,o,t){var n=r().getHowl();void 0!==n&&n.fade(e,o,t)}),[]),y=o.useCallback((function(e){var o=r().getHowl();void 0!==o&&o.rate(e)}),[]),_=o.useCallback((function(e){var o=r().getHowl();void 0!==o&&o.volume(e)}),[]),k=o.useCallback((function(e){var o=r().getHowl();void 0!==o&&o.mute(e)}),[]),N=o.useCallback((function(o){var t=r().getHowl();void 0!==t&&v({type:e.ON_LOOP,howl:t,toggleValue:o})}),[]),H=o.useCallback((function(){var e;null===(e=r())||void 0===e||e.destroyHowl()}),[]);return n({},c,{load:f,seek:d,getPosition:p,play:O,pause:w,togglePlayPause:g,stop:h,mute:k,fade:b,setRate:y,setVolume:_,loop:N,cleanup:H})},exports.useGlobalAudioPlayer=function(){var t=o.useRef(s.getInstance()),r=u(t.current,o.useReducer(a,t.current.getHowl(),l)),i=r[0],c=r[1];o.useEffect((function(){var o=t.current.getHowl();void 0!==o&&(c({type:e.START_LOAD,howl:o}),"loaded"===o.state()&&c({type:e.ON_LOAD,howl:o}));var n=t.current.subscribe((function(e){c(e)}));return function(){t.current.unsubscribe(n)}}),[]);var v=o.useCallback((function(){for(var e=arguments.length,o=new Array(e),l=0;l<e;l++)o[l]=arguments[l];var a=o[0],u=o[1],r=void 0===u?{}:u;t.current.createHowl(n({src:a},r))}),[]),f=o.useCallback((function(e){var o=t.current.getHowl();void 0!==o&&o.seek(e)}),[]),d=o.useCallback((function(){var e,o=t.current.getHowl();return void 0===o?0:null!==(e=o.seek())&&void 0!==e?e:0}),[]),p=o.useCallback((function(){var e=t.current.getHowl();void 0!==e&&e.play()}),[]),O=o.useCallback((function(){var e=t.current.getHowl();void 0!==e&&e.pause()}),[]),w=o.useCallback((function(){var e=t.current.getHowl();void 0!==e&&(i.playing?e.pause():e.play())}),[i]),g=o.useCallback((function(){var e=t.current.getHowl();void 0!==e&&e.stop()}),[]),h=o.useCallback((function(e,o,n){var l=t.current.getHowl();void 0!==l&&l.fade(e,o,n)}),[]),b=o.useCallback((function(e){var o=t.current.getHowl();void 0!==o&&o.rate(e)}),[]),y=o.useCallback((function(e){var o=t.current.getHowl();void 0!==o&&o.volume(e)}),[]),_=o.useCallback((function(e){var o=t.current.getHowl();void 0!==o&&o.mute(e)}),[]),k=o.useCallback((function(o){var n=t.current.getHowl();void 0!==n&&t.current.broadcast({type:e.ON_LOOP,howl:n,toggleValue:o})}),[]);return n({},i,{load:v,seek:f,getPosition:d,play:p,pause:O,togglePlayPause:w,stop:g,mute:_,fade:h,setRate:b,setVolume:y,loop:k})};
 //# sourceMappingURL=react-use-audio-player.cjs.production.min.js.map

dist/react-use-audio-player.esm.js

@@ -81,10 +81,8 @@ import { useCallback, useEffect, useRef, useReducer } from 'react';
 function reducer(state, action) {
-  var _action$linkMediaSess;
   switch (action.type) {
-    case "START_LOAD":
+    case ActionTypes.START_LOAD:
       return _extends({}, initStateFromHowl(), {
-        isLoading: true,
-        linkMediaSession: (_action$linkMediaSess = action.linkMediaSession) !== null && _action$linkMediaSess !== void 0 ? _action$linkMediaSess : false
+        isLoading: true
       });
-    case "ON_LOAD":
+    case ActionTypes.ON_LOAD:
       // in React 18 there is a weird race condition where ON_LOAD receives a Howl object that has been unloaded
@@ -96,7 +94,7 @@ // if we detect this case just return the existing state to wait for another action
       return initStateFromHowl(action.howl);
-    case "ON_ERROR":
+    case ActionTypes.ON_ERROR:
       return _extends({}, initStateFromHowl(), {
         error: action.message
       });
-    case "ON_PLAY":
+    case ActionTypes.ON_PLAY:
       return _extends({}, state, {
@@ -107,3 +105,3 @@ playing: true,
       });
-    case "ON_PAUSE":
+    case ActionTypes.ON_PAUSE:
       return _extends({}, state, {
@@ -113,3 +111,3 @@ playing: false,
       });
-    case "ON_STOP":
+    case ActionTypes.ON_STOP:
       {
@@ -122,3 +120,3 @@ return _extends({}, state, {
       }
-    case "ON_END":
+    case ActionTypes.ON_END:
       {
@@ -130,3 +128,3 @@ return _extends({}, state, {
       }
-    case "ON_MUTE":
+    case ActionTypes.ON_MUTE:
       {
@@ -138,3 +136,3 @@ var _action$howl$mute;
       }
-    case "ON_RATE":
+    case ActionTypes.ON_RATE:
       {
@@ -146,3 +144,3 @@ var _action$howl$rate, _action$howl;
       }
-    case "ON_VOLUME":
+    case ActionTypes.ON_VOLUME:
       {
@@ -154,3 +152,3 @@ var _action$howl$volume, _action$howl2;
       }
-    case "ON_LOOP":
+    case ActionTypes.ON_LOOP:
       {
@@ -262,3 +260,3 @@ var _action$toggleValue = action.toggleValue,
   var wrappedDispatch = useRef(function (action) {
-    if (action.type === "START_LOAD") {
+    if (action.type === ActionTypes.START_LOAD) {
       var howl = action.howl;
@@ -383,8 +381,2 @@ // set up event listening
     dispatch = _useHowlEventSync[1];
-  useEffect(function () {
-    // stop/delete the sound object when the hook unmounts
-    return function () {
-      getHowlManager().destroyHowl();
-    };
-  }, []);
   var load = useCallback(function () {
@@ -397,2 +389,4 @@ for (var _len = arguments.length, _ref = new Array(_len), _key = 0; _key < _len; _key++) {
       options = _ref$ === void 0 ? {} : _ref$;
+    // TODO investigate: if we try to avoid loading the same sound (existing howl & same src in call)
+    // then there are some bugs like in the MultipleSounds demo, the "play" button will not switch to "pause"
     var howl = getHowlManager().createHowl(_extends({
@@ -494,2 +488,6 @@ src: src
   }, []);
+  var cleanup = useCallback(function () {
+    var _getHowlManager;
+    (_getHowlManager = getHowlManager()) === null || _getHowlManager === void 0 ? void 0 : _getHowlManager.destroyHowl();
+  }, []);
   return _extends({}, state, {
@@ -507,3 +505,4 @@ load: load,
     setVolume: setVolume,
-    loop: loop
+    loop: loop,
+    cleanup: cleanup
   });
@@ -546,2 +545,3 @@ };
       options = _ref$ === void 0 ? {} : _ref$;
+    // the HowlInstanceManager will intercept this newly created howl and broadcast it to registered hooks
     howlManager.current.createHowl(_extends({
@@ -548,0 +548,0 @@ src: src

dist/useAudioPlayer.d.ts

 import { AudioPlayer } from "./types";
-export declare const useAudioPlayer: () => AudioPlayer;
+export declare const useAudioPlayer: () => AudioPlayer & {
+    cleanup: VoidFunction;
+};

package.json

 {
     "name": "react-use-audio-player",
-    "version": "2.1.1",
+    "version": "2.2.0",
     "description": "React hook for building custom audio playback controls",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -63,3 +63,4 @@ # react-use-audio-player
 
-**Note:** Unlike useGlobalAudioPlayer, when the component which initialized the hook unmounts the sound will stop.
+**Note:** Unlike useGlobalAudioPlayer, useAudioPlayer returns an additional method for cleaning up audio if you wish to stop playing and destroy the sound after some interaction (i.e. component unmount, user navigates to a different route, etc.). 
+Without cleaning up, sounds may live on even after the components that created them unmount possibly leading to memory leaks.
 
@@ -107,3 +108,3 @@ useGlobalAudioPlayer and useAudioPlayer can be used simultaneously without one affecting the other.
 #### fade `(from: number, to: number, duration: number) => void`
-Fades the sound's volume level from the value of the first argument to the value of the second, over a number of seconds as set by the final argument
+Fades the sound's volume level from the value of the first argument to the value of the second, over a number of milliseconds as set by the final argument
 
@@ -110,0 +111,0 @@ #### setRate `(speed: number) => void`

No alert changes

Improved metrics

Total package byte prevSize

175684

1.44%

Number of lines in readme file

253

0.4%

Worsened metrics

Lines of code

1420

-0.84%

No dependency changes