@cher-ami/audio-manager - npm Package Compare versions

Comparing version 0.1.9 to 0.2.0

dist/AudioManager.d.ts

 import { TDeferredPromise } from "@wbe/deferred-promise";
+import { Howl } from "howler";
 /**
@@ -10,14 +11,21 @@ * Global Signal state
 export interface IAudioManagerOptions {
+    id?: string;
     volume?: number;
+    autoplay?: boolean;
     loop?: boolean;
-    id?: string;
+    preload?: boolean;
+    html5?: boolean;
+    delay?: number;
 }
+/**
+ * AudioManager controls a single audio instance, a single sound
+ *
+ * @dep @wbe/debug https://www.npmjs.com/package/@wbe/debug
+ * @dep @wbe/deferred-promise https://www.npmjs.com/package/@wbe/deferred-promise
+ * @dep @solid-js/signal https://www.npmjs.com/package/@solid-js/signal
+ */
 export declare class AudioManager {
-    protected audioFileUrl: string;
+    protected url: string;
     protected options: IAudioManagerOptions;
-    protected audioCtx: AudioContext;
-    protected panner: StereoPannerNode;
-    protected listener: AudioListener;
-    protected $audio: HTMLAudioElement;
-    protected track: MediaElementAudioSourceNode;
+    sound: Howl;
     isLoading: boolean;
@@ -29,45 +37,19 @@ isLoaded: boolean;
     canplayPromise: TDeferredPromise<void>;
+    endedPromise: TDeferredPromise<void>;
     constructor(audioFileUrl: string, options?: IAudioManagerOptions);
     protected load(): void;
-    protected initEvent(): void;
-    protected handleCanplay: () => void;
+    protected initEvents(): void;
+    destroy(): void;
+    protected handleMuteAll: (mute: boolean) => void;
     protected handleEnded: () => void;
-    protected handleMuteAll: (mute: boolean) => void;
     play(): Promise<void>;
     pause(): void;
-    stop(): void;
+    stop(): Promise<void>;
     replay(): void;
+    loop(): Promise<void>;
     mute(): void;
     unmute(): void;
-    enableLoop(): void;
-    disableLoop(): void;
-    /**
-     * pan
-     * Used to place the sound on a device supporting stereo sound.
-     * If using -1 to 1 range. -1 would be far left & 1 far right.
-     *
-     * @param vPan Value of pan, idealy from -1 to 1
-     */
-    pan(vPan: number): void;
-    /**
-     * fade
-     * Process fade between 2 points
-     * @param from 1 = 100%, 0 = 0%
-     * @param to 1 = 100%, 0 = 0%
-     * @param duration In second
-     */
-    fade(from: number, to: number, duration?: number, ease?: string): Promise<any>;
-    fadeIn(duration?: number, ease?: string): Promise<any>;
-    fadeOut(duration?: number, ease?: string): Promise<any>;
-    destroy(): void;
-    protected _volumeIsInProcess: boolean;
-    /**
-     * process volume mutation
-     * @param from
-     * @param to
-     * @param duration
-     * @param ease
-     * @returns
-     */
-    protected processVolume(from: number, to: number, duration?: number, ease?: string): Promise<unknown>;
+    fade(from: number, to: number, duration?: number): Promise<void>;
+    fadeIn(duration?: number): Promise<void>;
+    fadeOut(duration?: number): Promise<void>;
 }

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(i,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@zouloux/signal"),require("@wbe/deferred-promise"),require("@wbe/debug"),require("gsap"),require("react")):"function"==typeof define&&define.amd?define(["exports","@zouloux/signal","@wbe/deferred-promise","@wbe/debug","gsap","react"],e):e((i||self).audioManager={},i.signal,i.deferredPromise,i.debug,i.gsap,i.react)}(this,function(i,e,t,o,n,s){function a(i){return i&&"object"==typeof i&&"default"in i?i:{default:i}}var d=/*#__PURE__*/a(o);function u(){return u=Object.assign?Object.assign.bind():function(i){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(i[o]=t[o])}return i},u.apply(this,arguments)}var r=d.default("AudioManager"),l=e.StateSignal(!1),h=0,c=/*#__PURE__*/function(){function i(i,e){var o,n,s=this;void 0===e&&(e={}),this.audioFileUrl=void 0,this.options=void 0,this.audioCtx=void 0,this.panner=void 0,this.listener=void 0,this.$audio=void 0,this.track=void 0,this.isLoading=void 0,this.isLoaded=void 0,this.isPlaying=void 0,this.isMuted=void 0,this.id=void 0,this.canplayPromise=void 0,this.handleCanplay=function(){r(s.id,"canplay handler, audio is ready"),s.canplayPromise.resolve(),s.isLoading=!1,s.isLoaded=!0},this.handleEnded=function(){r(s.id,"ended"),s.isPlaying=!1,s.options.loop&&s.play()},this.handleMuteAll=function(i){i?s.mute():s.unmute()},this._volumeIsInProcess=void 0,this.audioFileUrl=i,this.options=u({},{volume:1,loop:!1},e),h++,this.id=[h+".",(null==(o=this.options)?void 0:o.id)&&(null==(n=this.options)?void 0:n.id)+"__",i.split("/")[i.split("/").length-1]," - "].filter(function(i){return i}).join(""),r(this.id,"options",this.options),this.isPlaying=!1,this.isLoading=!0,this.isLoaded=!1,this.isMuted=!1,this.canplayPromise=t.deferredPromise(),this.load(),this.initEvent()}var e=i.prototype;return e.load=function(){var i=window.AudioContext||window.webkitAudioContext;this.audioCtx=new i,this.panner=new StereoPannerNode(this.audioCtx,{pan:0}),this.$audio=new Audio(this.audioFileUrl),this.$audio.crossOrigin="anonymous",this.$audio.volume=this.options.volume,this.track=this.audioCtx.createMediaElementSource(this.$audio),this.track.connect(this.panner).connect(this.audioCtx.destination)},e.initEvent=function(){this.$audio&&(this.$audio.addEventListener("canplay",this.handleCanplay),this.$audio.addEventListener("ended",this.handleEnded),l.add(this.handleMuteAll),this.$audio.load())},e.play=function(){try{var i=this;return r(i.id,"waiting for canplayPromise..."),Promise.resolve(i.canplayPromise.promise).then(function(){r(i.id,"play",i.options),"suspended"===i.audioCtx.state&&i.audioCtx.resume(),i.isPlaying?r(i.id,"play > is already playIn, return"):(i.$audio.play(),i.isPlaying=!0)})}catch(i){return Promise.reject(i)}},e.pause=function(){this.isPlaying&&(this.$audio.pause(),this.isPlaying=!1)},e.stop=function(){r(this.id,"stop"),this.$audio.pause(),this.$audio.currentTime=0,this.isPlaying=!1},e.replay=function(){r(this.id,"replay"),this.stop(),this.play()},e.mute=function(){r(this.id,"mute",this.$audio.volume),this.isMuted||(this.$audio.volume=0,this.isMuted=!0)},e.unmute=function(){r(this.id,"unmute",this.$audio.volume),this.isMuted&&(this.$audio.volume=this.options.volume,this.isMuted=!1)},e.enableLoop=function(){r(this.id,"loop"),this.options.loop=!0},e.disableLoop=function(){r(this.id,"disable loop"),this.options.loop=!1},e.pan=function(i){r(this.id,"pan",i),this.panner.pan.value=i},e.fade=function(i,e,t,o){void 0===t&&(t=1),void 0===o&&(o="none");try{var n=this;return r(n.id,"fade >",i,e,n.options),n.isPlaying||n.play(),Promise.resolve(n.processVolume(i,e,t,o)).then(function(){r(n.id,"fade ended!",n.$audio.volume)})}catch(i){return Promise.reject(i)}},e.fadeIn=function(i,e){void 0===i&&(i=1),void 0===e&&(e="none");try{var t=this;return r(t.id,"fadeIn"),t.play(),Promise.resolve(t.processVolume(0,t.options.volume,i,e)).then(function(){r(t.id,"fadeIn ended!")})}catch(i){return Promise.reject(i)}},e.fadeOut=function(i,e){void 0===i&&(i=1),void 0===e&&(e="none");try{var t=this;return r(t.id,"fadeOut"),Promise.resolve(t.processVolume(t.options.volume,0,i,e)).then(function(){r(t.id,"fadeOut ended!")})}catch(i){return Promise.reject(i)}},e.destroy=function(){var i,e,t;r(this.id,"destroy"),this.pause(),null==(i=this.track)||i.disconnect(),this.$audio=null,null==(e=this.$audio)||e.removeEventListener("canplay",this.handleCanplay),null==(t=this.$audio)||t.removeEventListener("ended",this.handleEnded),l.remove(this.handleMuteAll)},e.processVolume=function(i,e,t,o){var s=this;void 0===t&&(t=1),void 0===o&&(o="none");var a=Math.max(0,Math.min(i,1)),d=Math.max(0,Math.min(e,1));return new Promise(function(i){n.gsap.fromTo(s.$audio,{volume:s._volumeIsInProcess?s.$audio.volume:a},{volume:d,overwrite:!0,ease:o,duration:t,onUpdate:function(){s._volumeIsInProcess=!0,r(s.id,"this.$audio.volume",s.$audio.volume)},onComplete:function(){s._volumeIsInProcess=!1,i()}})})},i}();d.default("AudioManager:hooks");var p={};i.AudioManager=c,i.MUTE_AUDIO_SIGNAL=l,i.useAudio=function(i,e,t){void 0===t&&(t=[]);var o=s.useMemo(function(){return[null!=e&&e.id?"__"+e.id+"__":null,i.split("/")[i.split("/").length-1].replaceAll(" ","/")].filter(function(i){return i}).join("")},[i,e]),n=s.useState(function(){var t;return null!=(t=null==p?void 0:p[o])?t:new c(i,e)})[0];return s.useEffect(function(){p[o]||(p[o]=n)},t),n},i.useMuteAllAudio=function(){var i=s.useState(l.state),e=i[0],t=i[1];return s.useEffect(function(){return l.add(function(i){t(i)})},[]),[e,function(i){l.dispatch(i)}]}});
+!function(e,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("@zouloux/signal"),require("@wbe/deferred-promise"),require("howler"),require("@wbe/debug"),require("react")):"function"==typeof define&&define.amd?define(["exports","@zouloux/signal","@wbe/deferred-promise","howler","@wbe/debug","react"],i):i((e||self).audioManager={},e.signal,e.deferredPromise,e.howler,e.debug,e.react)}(this,function(e,i,t,n,o,s){function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=/*#__PURE__*/r(o);function d(){return d=Object.assign?Object.assign.bind():function(e){for(var i=1;i<arguments.length;i++){var t=arguments[i];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},d.apply(this,arguments)}var a=u.default("AudioManager"),l=i.StateSignal(!1),f=/*#__PURE__*/function(){function e(e,i){var n=this;void 0===i&&(i={}),this.url=void 0,this.options=void 0,this.sound=void 0,this.isLoading=void 0,this.isLoaded=void 0,this.isPlaying=void 0,this.isMuted=void 0,this.id=null,this.canplayPromise=void 0,this.endedPromise=void 0,this.handleMuteAll=function(e){e?n.mute():n.unmute()},this.handleEnded=function(){a(n.id,"ended"),n.isPlaying=!1,n.endedPromise.resolve()},this.url=e,this.options=d({},{volume:1,autoplay:!1,loop:!1,preload:!0,html5:!1,delay:0},i),this.isPlaying=!1,this.isLoading=!0,this.isLoaded=!1,this.isMuted=!1,this.canplayPromise=t.deferredPromise(),this.endedPromise=t.deferredPromise(),this.load(),this.initEvents()}var i=e.prototype;return i.load=function(){var e=this;this.sound=new n.Howl(d({src:[this.url]},this.options,{onload:function(){a(e.id,"canplay handler, audio is ready"),e.isLoaded=!0,e.canplayPromise.resolve(),e.isLoading=!1,e.isLoaded=!0,e.isMuted&&e.mute()}}))},i.initEvents=function(){l.add(this.handleMuteAll),this.sound.on("end",this.handleEnded)},i.destroy=function(){a(this.id,"destroy"),this.sound.unload(),l.remove(this.handleMuteAll)},i.play=function(){try{var e=this;return a(e.id,"waiting for canplayPromise..."),Promise.resolve(e.canplayPromise.promise).then(function(){return e.endedPromise=t.deferredPromise(),a(e.id,"play",e.options),Promise.resolve(new Promise(function(i){return setTimeout(i,e.options.delay)})).then(function(){return e.id=e.sound.play(),e.isPlaying=!0,e.endedPromise.promise})})}catch(e){return Promise.reject(e)}},i.pause=function(){this.isPlaying&&this.isLoaded&&this.sound.pause()},i.stop=function(){try{var e=this;return a(e.id,"stop"),e.sound.stop(e.id),e.isPlaying=!1,Promise.resolve()}catch(e){return Promise.reject(e)}},i.replay=function(){a(this.id,"replay"),this.stop(),this.play()},i.loop=function(){try{return this.sound.loop(!0),this.isPlaying=!0,Promise.resolve()}catch(e){return Promise.reject(e)}},i.mute=function(){a(this.id,"mute"),this.isMuted||(this.sound.mute(!0),this.isMuted=!0)},i.unmute=function(){a(this.id,"unmute"),this.isMuted&&(this.sound.mute(!1),this.isMuted=!1)},i.fade=function(e,i,t){void 0===t&&(t=1e3);try{var n=this;return a(n.id,"fade >",e,i,n.options),n.isPlaying||n.play(),n.sound.fade(e,i,t),Promise.resolve(new Promise(function(e){return setTimeout(e,t)}))}catch(e){return Promise.reject(e)}},i.fadeIn=function(e){void 0===e&&(e=1e3);try{var i=this;return i.id=i.sound.play(),a(i.id,"fadeIn 0 -> "+i.options.volume),i.isPlaying=!0,i.sound.fade(0,i.options.volume,e),Promise.resolve(new Promise(function(t){return setTimeout(function(){a(i.id,"fadeIn ended"),t()},e)}))}catch(e){return Promise.reject(e)}},i.fadeOut=function(e){void 0===e&&(e=1e3);try{var i=this;return a(i.id,"fadeOut "+i.options.volume+" -> 0"),i.sound.fade(i.options.volume,0,e),Promise.resolve(new Promise(function(t){return setTimeout(function(){a(i.id,"fadeOut ended"),i.stop(),t()},e)}))}catch(e){return Promise.reject(e)}},e}();u.default("AudioManager:hooks");var h={};e.AudioManager=f,e.MUTE_AUDIO_SIGNAL=l,e.useAudio=function(e,i,t){void 0===t&&(t=[]);var n=s.useMemo(function(){return[null!=i&&i.id?"__"+i.id+"__":null,e.split("/")[e.split("/").length-1].replaceAll(" ","/")].filter(function(e){return e}).join("")},[e,i]),o=s.useState(function(){var t;return null!=(t=null==h?void 0:h[n])?t:new f(e,i)})[0];return s.useEffect(function(){h[n]||(h[n]=o)},t),o},e.useMuteAllAudio=function(){var e=s.useState(l.state),i=e[0],t=e[1];return s.useEffect(function(){return l.add(function(e){t(e)})},[]),[i,function(e){l.dispatch(e)}]}});
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "@cher-ami/audio-manager",
   "description": "A simple web audio manager",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "author": "cher-ami",
   "license": "MIT",
-  "main": "dist/index.js",
+  "type": "module",
   "source": "src/index.ts",
-  "sideEffects": false,
+  "main": "dist/index.cjs",
+  "module": "./dist/index.module.js",
+  "unpkg": "./dist/index.umd.js",
+  "private": false,
   "repository": {
@@ -23,9 +26,8 @@ "type": "git",
   "scripts": {
-    "dev:example": "vite",
-    "dev": "microbundle --watch --jsx React.createElement",
+    "dev:basic": "pnpm --filter ./examples/basic run dev",
+    "build:watch": "microbundle watch --no-sourcemap --format esm --jsx React.createElement",
     "build": "npm run clean && microbundle --jsx React.createElement",
-    "serve": "vite preview",
     "clean": "rm -rf ./dist && rm -rf tsconfig.tsbuildinfo",
-    "size": "size-limit",
-    "pre-publish": "npm run clean && npm run build && npm run size"
+    "pre-publish": "npm run clean && npm run build && npm run size",
+    "size": "size-limit"
   },
@@ -40,22 +42,25 @@ "size-limit": [
     "@wbe/debug": "^1.0.0",
-    "gsap": "^3.11.0",
     "@wbe/deferred-promise": "^2.4.0",
-    "@zouloux/signal": "^0.2.4"
+    "@zouloux/signal": "^0.2.4",
+    "howler": "^2.2.3"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^>=16.8.0",
+    "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "microbundle": "^0.15.1",
-    "@size-limit/file": "^8.0.1",
-    "@types/node": "^18.7.9",
-    "@types/react": "^18.0.17",
+    "@size-limit/file": "^8.1.0",
+    "@types/node": "^18.7.16",
+    "@types/react": "^18.0.19",
     "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^2.0.1",
+    "@vitejs/plugin-react": "^2.1.0",
     "less": "^4.1.3",
+    "microbundle": "^0.15.1",
     "prettier": "^2.7.1",
-    "typescript": "^4.7.4",
-    "vite": "^3.0.9"
+    "typescript": "^4.8.3",
+    "vite": "^3.1.0"
+  },
+  "prettier": {
+    "semi": false
   }
 }

README.md

 # Audio manager
 
-A simple web audio manager for the browser.
+A simple [Howler](https://howlerjs.com/) wrapper.
 
 ## Dependencies
 
+- [howler](https://howlerjs.com/)
+- [@zouloux/signal](https://www.npmjs.com/package/@zouloux/signal)
+- [@wbe/deferred-promise](https://www.npmjs.com/package/@wbe/)
 - [@wbe/debug](https://www.npmjs.com/package/@wbe/debug)
-- [@wbe/deferred-promise](https://www.npmjs.com/package/@wbe/)
-- [@zouloux/signal](https://www.npmjs.com/package/@zouloux/signal)
-- [gsap](https://greensock.com/gsap/)
 
@@ -33,5 +33,2 @@ ## Installation
 sound.unmute()
-sound.enableLoop()
-sound.disableLoop()
-sound.pan()
 sound.fade()
@@ -128,35 +125,2 @@ sound.fadeIn()
 
-### enableLoop
-
-`enableLoop(): void`
-
-During the sound is playing, enable looping on it.
-
-```js
-sound.enableLoop()
-```
-
-### disableLoop
-
-`disableLoop(): void`
-
-During the sound is playing, disable looping on it.
-
-```js
-sound.disableLoop()
-```
-
-### pan
-
-`pan(vPan: number): void`
-
-Used to place the sound on a device supporting stereo sound.
-If using -1 to 1 range. -1 would be far left & 1 far right.
-
-```js
-sound.pan(-1) // left
-sound.pan(0) // center
-sound.pan(1) // right
-```
-
 ### fade
@@ -184,3 +148,3 @@
 
-`fadeIn(duration = 1, ease = "none"): Promise<any>`
+`fadeIn(duration = 1, ease = "none"): Promise<void>`
 
@@ -197,3 +161,3 @@ FadeIn from the current volum to 100%.
 
-`fadeOut(duration = 1, ease = "none"): Promise<any>`
+`fadeOut(duration = 1, ease = "none"): Promise<void>`
 
@@ -200,0 +164,0 @@ FadeOut from the current volum to 0%.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of package files

15

increased by7.14%

Is type module

Yes

Worsened metrics

Total package byte prevSize

68432

decreased by-27.31%

Lines of code

130

decreased by-22.16%

Number of lines in readme file

244

decreased by-12.86%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedhowler@^2.2.3

• + Addedhowler@2.2.4(transitive)

• - Removedgsap@^3.11.0

• - Removedgsap@3.12.5(transitive)