@marmooo/midi-player 0.0.3 → 0.0.4

package/README.md

@@ -6,6 +6,7 @@
 ## Demo
 
 - [Basic usage](https://marmooo.github.io/midi-player/)
+- [Humidy](https://marmooo.github.io/humidy/) - GM2 MIDI mixer app
 
 ## Usage
 

package/esm/midi-player.d.ts

@@ -12,6 +12,11 @@ export class MIDIPlayer {
     pauseNode: any;
     resumeNode: any;
     stopNode: any;
+    isPlaying: boolean;
+    isPausing: boolean;
+    isPaused: boolean;
+    isStopping: boolean;
+    isSeeking: boolean;
     root: any;
     defaultLayout(): void;
     row(): any;
@@ -20,6 +25,7 @@ export class MIDIPlayer {
     formRange(title: any, className: any, value: any, display: any): any;
     text(text: any, className: any): any;
     startTimer(): void;
+    stopTimer(): void;
     loadMIDI(file: any): Promise<void>;
     setSoundFontDir(dir: any): void;
     getSoundFontPaths(): string[];
@@ -27,7 +33,7 @@ export class MIDIPlayer {
     handleStop(): Promise<void>;
     stop(): any;
     handlePlay(): Promise<void>;
-    handlePause(): void;
+    handlePause(): Promise<void>;
     handleResume(): Promise<void>;
     playPauseResume(): any;
     volumeText(): any;

package/esm/midi-player.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"midi-player.d.ts","sourceRoot":"","sources":["../src/midi-player.js"],"names":[],"mappings":"AAAA;IAcE,uBAGC;IAhBD,qBAAoE;IACpE,UAAK;IACL,WAAM;IACN,oBAAgB;IAChB,yBAAuB;IACvB,kBAAa;IACb,mBAAc;IACd,iBAAY;IACZ,cAAS;IACT,eAAU;IACV,gBAAW;IACX,cAAS;IAIP,UAAiD;IAGnD,sBAMC;IAED,WAOC;IAED,iCASC;IAED,qEASC;IAED,qEAOC;IAED,qCAKC;IAED,mBAYC;IAED,mCAKC;IAED,gCAEC;IAED,8BAaC;IAED,uBAaC;IAED,4BAQC;IAED,YAKC;IAED,4BAUC;IAED,oBAOC;IAED,8BAYC;IAED,uBA2BC;IAED,kBAEC;IAED,cAwCC;IAED,eAgBC;IAED,gBAIC;IAED,iBAIC;IAED,yBAWC;CACF"}
+{"version":3,"file":"midi-player.d.ts","sourceRoot":"","sources":["../src/midi-player.js"],"names":[],"mappings":"AAAA;IAmBE,uBAGC;IArBD,qBAAoE;IACpE,UAAK;IACL,WAAM;IACN,oBAAgB;IAChB,yBAAuB;IACvB,kBAAa;IACb,mBAAc;IACd,iBAAY;IACZ,cAAS;IACT,eAAU;IACV,gBAAW;IACX,cAAS;IACT,mBAAkB;IAClB,mBAAkB;IAClB,kBAAiB;IACjB,oBAAmB;IACnB,mBAAkB;IAIhB,UAAiD;IAGnD,sBAMC;IAED,WAOC;IAED,iCASC;IAED,qEASC;IAED,qEAOC;IAED,qCAKC;IAED,mBAeC;IAED,kBAKC;IAED,mCAKC;IAED,gCAEC;IAED,8BAaC;IAED,uBAYC;IAED,4BAUC;IAED,YAKC;IAED,4BAYC;IAED,6BAUC;IAED,8BAcC;IAED,uBA2BC;IAED,kBAEC;IAED,cAwCC;IAED,eAkBC;IAED,gBAIC;IAED,iBAIC;IAED,yBAWC;CACF"}

package/esm/midi-player.js

@@ -72,6 +72,36 @@ export class MIDIPlayer {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "isPlaying", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "isPausing", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "isPaused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "isStopping", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "isSeeking", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
         this.midy = midy;
         this.root = document.createElement("midi-player");
     }
@@ -126,16 +156,25 @@ export class MIDIPlayer {
     }
     startTimer() {
         const endTime = this.midy.totalTime;
-        this.timer = setInterval(() => {
+        this.stopTimer();
+        const update = () => {
             const now = this.midy.currentTime();
-            const seconds = Math.ceil(now);
             if (this.currTimeNode) {
+                const seconds = Math.ceil(now);
                 this.currTimeNode.textContent = this.formatTime(seconds);
             }
             if (this.seekBarNode) {
                 this.seekBarNode.value = now / endTime;
             }
-        }, this.currTimeInterval);
+            this.timer = requestAnimationFrame(update);
+        };
+        this.timer = requestAnimationFrame(update);
+    }
+    stopTimer() {
+        if (this.timer) {
+            cancelAnimationFrame(this.timer);
+            this.timer = null;
+        }
     }
     async loadMIDI(file) {
         await this.midy.loadMIDI(file);
@@ -162,14 +201,13 @@ export class MIDIPlayer {
         return paths;
     }
     async start() {
+        this.isPlaying = true;
         const midy = this.midy;
-        if (midy.soundFonts.length === 0) {
-            const paths = this.getSoundFontPaths();
-            await midy.loadSoundFont(paths);
-        }
+        await midy.loadSoundFont(this.getSoundFontPaths());
         this.startTimer();
         await midy.start();
-        clearInterval(this.timer);
+        this.stopTimer();
+        this.isPlaying = false;
         if (!midy.isPaused && this.currTimeNode) {
             this.currTimeNode.textContent = "0:00";
             this.seekBarNode.value = 0;
@@ -179,11 +217,13 @@ export class MIDIPlayer {
         const midy = this.midy;
         if (!midy.isPlaying)
             return;
-        clearInterval(this.timer);
+        this.isStopping = true;
         this.playNode.style.display = "initial";
         this.pauseNode.style.display = "none";
         this.resumeNode.style.display = "none";
+        this.stopTimer();
         await midy.stop();
+        this.isPlaying = false;
     }
     stop() {
         const stop = this.button("start", "midi-player-start", "stop", "initial");
@@ -195,32 +235,39 @@ export class MIDIPlayer {
         const { midy, playNode, pauseNode } = this;
         if (midy.isPlaying || midy.isPaused)
             return;
+        this.isPlaying = true;
         playNode.style.display = "none";
         pauseNode.style.display = "initial";
         await this.start();
+        this.isPlaying = false;
         if (!midy.isPaused) {
             pauseNode.style.display = "none";
             playNode.style.display = "initial";
         }
     }
-    handlePause() {
+    async handlePause() {
         const midy = this.midy;
         if (!midy.isPlaying || midy.isPaused)
             return;
+        this.isPausing = true;
         this.pauseNode.style.display = "none";
         this.resumeNode.style.display = "initial";
-        clearInterval(this.timer);
-        midy.pause();
+        this.stopTimer();
+        await midy.pause();
+        this.isPausing = false;
+        this.isPaused = true;
     }
     async handleResume() {
         const { midy, playNode, pauseNode, resumeNode } = this;
         if (!midy.isPaused)
             return;
+        this.isPlaying = true;
         pauseNode.style.display = "initial";
         resumeNode.style.display = "none";
         this.startTimer();
         await midy.resume();
-        clearInterval(this.timer);
+        this.stopTimer();
+        this.isPlaying = false;
         if (!midy.isPaused) {
             pauseNode.style.display = "none";
             playNode.style.display = "initial";
@@ -281,11 +328,13 @@ export class MIDIPlayer {
     seekBar() {
         const seekBar = this.formRange("playback position", "midi-player-seekBar", 0, "initial");
         seekBar.oninput = (event) => {
+            this.isSeeking = true;
             const time = event.target.value * this.midy.totalTime;
             this.midy.seekTo(time);
             if (this.currTimeNode) {
                 this.currTimeNode.textContent = this.formatTime(time);
             }
+            this.isSeeking = false;
         };
         this.seekBarNode = seekBar;
         return seekBar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marmooo/midi-player",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "<midi-player> HTML elements powered by Midy.",
   "repository": {
     "type": "git",

package/script/midi-player.d.ts

@@ -12,6 +12,11 @@ export class MIDIPlayer {
     pauseNode: any;
     resumeNode: any;
     stopNode: any;
+    isPlaying: boolean;
+    isPausing: boolean;
+    isPaused: boolean;
+    isStopping: boolean;
+    isSeeking: boolean;
     root: any;
     defaultLayout(): void;
     row(): any;
@@ -20,6 +25,7 @@ export class MIDIPlayer {
     formRange(title: any, className: any, value: any, display: any): any;
     text(text: any, className: any): any;
     startTimer(): void;
+    stopTimer(): void;
     loadMIDI(file: any): Promise<void>;
     setSoundFontDir(dir: any): void;
     getSoundFontPaths(): string[];
@@ -27,7 +33,7 @@ export class MIDIPlayer {
     handleStop(): Promise<void>;
     stop(): any;
     handlePlay(): Promise<void>;
-    handlePause(): void;
+    handlePause(): Promise<void>;
     handleResume(): Promise<void>;
     playPauseResume(): any;
     volumeText(): any;

package/script/midi-player.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"midi-player.d.ts","sourceRoot":"","sources":["../src/midi-player.js"],"names":[],"mappings":"AAAA;IAcE,uBAGC;IAhBD,qBAAoE;IACpE,UAAK;IACL,WAAM;IACN,oBAAgB;IAChB,yBAAuB;IACvB,kBAAa;IACb,mBAAc;IACd,iBAAY;IACZ,cAAS;IACT,eAAU;IACV,gBAAW;IACX,cAAS;IAIP,UAAiD;IAGnD,sBAMC;IAED,WAOC;IAED,iCASC;IAED,qEASC;IAED,qEAOC;IAED,qCAKC;IAED,mBAYC;IAED,mCAKC;IAED,gCAEC;IAED,8BAaC;IAED,uBAaC;IAED,4BAQC;IAED,YAKC;IAED,4BAUC;IAED,oBAOC;IAED,8BAYC;IAED,uBA2BC;IAED,kBAEC;IAED,cAwCC;IAED,eAgBC;IAED,gBAIC;IAED,iBAIC;IAED,yBAWC;CACF"}
+{"version":3,"file":"midi-player.d.ts","sourceRoot":"","sources":["../src/midi-player.js"],"names":[],"mappings":"AAAA;IAmBE,uBAGC;IArBD,qBAAoE;IACpE,UAAK;IACL,WAAM;IACN,oBAAgB;IAChB,yBAAuB;IACvB,kBAAa;IACb,mBAAc;IACd,iBAAY;IACZ,cAAS;IACT,eAAU;IACV,gBAAW;IACX,cAAS;IACT,mBAAkB;IAClB,mBAAkB;IAClB,kBAAiB;IACjB,oBAAmB;IACnB,mBAAkB;IAIhB,UAAiD;IAGnD,sBAMC;IAED,WAOC;IAED,iCASC;IAED,qEASC;IAED,qEAOC;IAED,qCAKC;IAED,mBAeC;IAED,kBAKC;IAED,mCAKC;IAED,gCAEC;IAED,8BAaC;IAED,uBAYC;IAED,4BAUC;IAED,YAKC;IAED,4BAYC;IAED,6BAUC;IAED,8BAcC;IAED,uBA2BC;IAED,kBAEC;IAED,cAwCC;IAED,eAkBC;IAED,gBAIC;IAED,iBAIC;IAED,yBAWC;CACF"}

package/script/midi-player.js

@@ -75,6 +75,36 @@ class MIDIPlayer {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "isPlaying", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "isPausing", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "isPaused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "isStopping", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "isSeeking", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
         this.midy = midy;
         this.root = document.createElement("midi-player");
     }
@@ -129,16 +159,25 @@ class MIDIPlayer {
     }
     startTimer() {
         const endTime = this.midy.totalTime;
-        this.timer = setInterval(() => {
+        this.stopTimer();
+        const update = () => {
             const now = this.midy.currentTime();
-            const seconds = Math.ceil(now);
             if (this.currTimeNode) {
+                const seconds = Math.ceil(now);
                 this.currTimeNode.textContent = this.formatTime(seconds);
             }
             if (this.seekBarNode) {
                 this.seekBarNode.value = now / endTime;
             }
-        }, this.currTimeInterval);
+            this.timer = requestAnimationFrame(update);
+        };
+        this.timer = requestAnimationFrame(update);
+    }
+    stopTimer() {
+        if (this.timer) {
+            cancelAnimationFrame(this.timer);
+            this.timer = null;
+        }
     }
     async loadMIDI(file) {
         await this.midy.loadMIDI(file);
@@ -165,14 +204,13 @@ class MIDIPlayer {
         return paths;
     }
     async start() {
+        this.isPlaying = true;
         const midy = this.midy;
-        if (midy.soundFonts.length === 0) {
-            const paths = this.getSoundFontPaths();
-            await midy.loadSoundFont(paths);
-        }
+        await midy.loadSoundFont(this.getSoundFontPaths());
         this.startTimer();
         await midy.start();
-        clearInterval(this.timer);
+        this.stopTimer();
+        this.isPlaying = false;
         if (!midy.isPaused && this.currTimeNode) {
             this.currTimeNode.textContent = "0:00";
             this.seekBarNode.value = 0;
@@ -182,11 +220,13 @@ class MIDIPlayer {
         const midy = this.midy;
         if (!midy.isPlaying)
             return;
-        clearInterval(this.timer);
+        this.isStopping = true;
         this.playNode.style.display = "initial";
         this.pauseNode.style.display = "none";
         this.resumeNode.style.display = "none";
+        this.stopTimer();
         await midy.stop();
+        this.isPlaying = false;
     }
     stop() {
         const stop = this.button("start", "midi-player-start", "stop", "initial");
@@ -198,32 +238,39 @@ class MIDIPlayer {
         const { midy, playNode, pauseNode } = this;
         if (midy.isPlaying || midy.isPaused)
             return;
+        this.isPlaying = true;
         playNode.style.display = "none";
         pauseNode.style.display = "initial";
         await this.start();
+        this.isPlaying = false;
         if (!midy.isPaused) {
             pauseNode.style.display = "none";
             playNode.style.display = "initial";
         }
     }
-    handlePause() {
+    async handlePause() {
         const midy = this.midy;
         if (!midy.isPlaying || midy.isPaused)
             return;
+        this.isPausing = true;
         this.pauseNode.style.display = "none";
         this.resumeNode.style.display = "initial";
-        clearInterval(this.timer);
-        midy.pause();
+        this.stopTimer();
+        await midy.pause();
+        this.isPausing = false;
+        this.isPaused = true;
     }
     async handleResume() {
         const { midy, playNode, pauseNode, resumeNode } = this;
         if (!midy.isPaused)
             return;
+        this.isPlaying = true;
         pauseNode.style.display = "initial";
         resumeNode.style.display = "none";
         this.startTimer();
         await midy.resume();
-        clearInterval(this.timer);
+        this.stopTimer();
+        this.isPlaying = false;
         if (!midy.isPaused) {
             pauseNode.style.display = "none";
             playNode.style.display = "initial";
@@ -284,11 +331,13 @@ class MIDIPlayer {
     seekBar() {
         const seekBar = this.formRange("playback position", "midi-player-seekBar", 0, "initial");
         seekBar.oninput = (event) => {
+            this.isSeeking = true;
             const time = event.target.value * this.midy.totalTime;
             this.midy.seekTo(time);
             if (this.currTimeNode) {
                 this.currTimeNode.textContent = this.formatTime(time);
             }
+            this.isSeeking = false;
         };
         this.seekBarNode = seekBar;
         return seekBar;