@marmooo/midi-player 0.0.4 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +8 -3
  2. package/esm/midi-player.d.ts +2 -0
  3. package/esm/midi-player.d.ts.map +1 -1
  4. package/esm/midi-player.js +61 -2
  5. package/package.json +1 -1
  6. package/script/midi-player.d.ts +2 -0
  7. package/script/midi-player.d.ts.map +1 -1
  8. package/script/midi-player.js +61 -2
package/README.md CHANGED
@@ -7,6 +7,7 @@
7
7
 
8
8
  - [Basic usage](https://marmooo.github.io/midi-player/)
9
9
  - [Humidy](https://marmooo.github.io/humidy/) - GM2 MIDI mixer app
10
+ - [Timidy](https://marmooo.github.io/timidy/) - Timidity++ style MIDI player
10
11
 
11
12
  ## Usage
12
13
 
@@ -32,8 +33,9 @@
32
33
  // import { MidyGM2 as Midy } from "midy/dist/midy-GM2.min.js";
33
34
  import { Midy } from "midy/dist/midy.min.js";
34
35
 
35
- const midy = new Midy(new AudioContext());
36
- await midy.audioContext.suspend();
36
+ const audioContext = new AudioContext();
37
+ if (audioContext.state === "running") await audioContext.suspend();
38
+ const midy = new Midy(audioContext);
37
39
  ```
38
40
 
39
41
  3. Add Player.
@@ -99,6 +101,9 @@ All parts have midi-player-* class so you can be themed with CSS.
99
101
  - `midi-player-volumeOn`
100
102
  - `midi-player-volumeff`
101
103
  - `midi-player-volumeBar`
104
+ - `midi-player-speed`
105
+ - `midi-player-repeatOn`
106
+ - `midi-player-repeatOff`
102
107
 
103
108
  You can also style the parts using JavaScript and CSS Framework.
104
109
 
@@ -119,7 +124,7 @@ Search for the ligature names you want to use from the
119
124
  minimize them using [fontconv](https://github.com/marmooo/fontconv).
120
125
 
121
126
  ```
122
- fontconv --ligature play_arrow,pause,stop,volume_down,volume_off \
127
+ fontconv --ligature play_arrow,pause,stop,volume_down,volume_off,speed,360,repeat \
123
128
  material-icons.woff2 src/midi-player-icons.woff2
124
129
  ```
125
130
 
package/esm/midi-player.d.ts CHANGED
@@ -38,6 +38,8 @@ export class MIDIPlayer {
38
38
  playPauseResume(): any;
39
39
  volumeText(): any;
40
40
  volume(): any;
41
+ speed(): any;
42
+ repeat(): any;
41
43
  seekBar(): any;
42
44
  currTime(): any;
43
45
  totalTime(): any;
package/esm/midi-player.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"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"}
1
+ {"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,sBAQC;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,cA6CC;IAED,aAyCC;IAED,cA6BC;IAED,eAkBC;IAED,gBAIC;IAED,iBAIC;IAED,yBAWC;CACF"}
package/esm/midi-player.js CHANGED
@@ -109,6 +109,8 @@ export class MIDIPlayer {
109
109
  const div = this.row();
110
110
  div.appendChild(this.playPauseResume());
111
111
  div.appendChild(this.volume());
112
+ div.appendChild(this.repeat());
113
+ div.appendChild(this.speed());
112
114
  div.appendChild(this.currTimeTotalTime());
113
115
  div.appendChild(this.seekBar());
114
116
  }
@@ -297,7 +299,7 @@ export class MIDIPlayer {
297
299
  volume() {
298
300
  const muteOn = this.button("mute ON", "midi-player-muteOn", "volume_down", "initial");
299
301
  const muteOff = this.button("mute OFF", "midi-player-muteOff", "volume_off", "none");
300
- const volumeBar = this.formRange("volume", "midi-player-volume", 1, "none");
302
+ const volumeBar = this.formRange("volume", "midi-player-volume", 100 / 128, "none");
301
303
  muteOn.onclick = () => {
302
304
  muteOn.style.display = "none";
303
305
  muteOff.style.display = "initial";
@@ -306,7 +308,7 @@ export class MIDIPlayer {
306
308
  muteOff.onclick = () => {
307
309
  muteOn.style.display = "initial";
308
310
  muteOff.style.display = "none";
309
- this.midy.setMasterVolume(1);
311
+ this.midy.setMasterVolume(Number(volumeBar.value));
310
312
  };
311
313
  volumeBar.oninput = (event) => {
312
314
  this.midy.setMasterVolume(event.target.value);
@@ -325,6 +327,63 @@ export class MIDIPlayer {
325
327
  };
326
328
  return div;
327
329
  }
330
+ speed() {
331
+ const speedButton = this.button("reset speed", "midi-player-speed", "speed", "initial");
332
+ const speedBar = this.formRange("playback speed", "midi-player-speed", 0.5, "none");
333
+ speedButton.onclick = () => {
334
+ speedBar.value = 0.5;
335
+ this.midy.tempoChange(1);
336
+ this.stopTimer();
337
+ this.startTimer();
338
+ if (this.totalTimeNode) {
339
+ this.totalTimeNode.textContent = this.formatTime(this.midy.totalTime);
340
+ }
341
+ };
342
+ speedBar.onchange = (event) => {
343
+ const value = Number(event.target.value);
344
+ const min = 0.5;
345
+ const max = 2;
346
+ const tempo = min * Math.pow(max / min, value);
347
+ this.midy.tempoChange(tempo);
348
+ this.stopTimer();
349
+ this.startTimer();
350
+ if (this.totalTimeNode) {
351
+ this.totalTimeNode.textContent = this.formatTime(this.midy.totalTime);
352
+ }
353
+ };
354
+ const div = document.createElement("div");
355
+ div.style.display = "flex";
356
+ div.style.alignItems = "center";
357
+ div.appendChild(speedButton);
358
+ div.appendChild(speedBar);
359
+ div.onmouseover = () => {
360
+ speedBar.style.display = "initial";
361
+ };
362
+ div.onmouseout = () => {
363
+ speedBar.style.display = "none";
364
+ };
365
+ return div;
366
+ }
367
+ repeat() {
368
+ const repeatOn = this.button("repeat ON", "midi-player-repeatOn", "turn_right", "initial");
369
+ const repeatOff = this.button("repeat OFF", "midi-player-repeatOff", "repeat", "none");
370
+ repeatOn.onclick = () => {
371
+ repeatOn.style.display = "none";
372
+ repeatOff.style.display = "initial";
373
+ this.midy.loop = true;
374
+ };
375
+ repeatOff.onclick = () => {
376
+ repeatOn.style.display = "initial";
377
+ repeatOff.style.display = "none";
378
+ this.midy.loop = false;
379
+ };
380
+ const div = document.createElement("div");
381
+ div.style.display = "flex";
382
+ div.style.alignItems = "center";
383
+ div.appendChild(repeatOn);
384
+ div.appendChild(repeatOff);
385
+ return div;
386
+ }
328
387
  seekBar() {
329
388
  const seekBar = this.formRange("playback position", "midi-player-seekBar", 0, "initial");
330
389
  seekBar.oninput = (event) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marmooo/midi-player",
3
- "version": "0.0.4",
3
+ "version": "0.0.6",
4
4
  "description": "<midi-player> HTML elements powered by Midy.",
5
5
  "repository": {
6
6
  "type": "git",
package/script/midi-player.d.ts CHANGED
@@ -38,6 +38,8 @@ export class MIDIPlayer {
38
38
  playPauseResume(): any;
39
39
  volumeText(): any;
40
40
  volume(): any;
41
+ speed(): any;
42
+ repeat(): any;
41
43
  seekBar(): any;
42
44
  currTime(): any;
43
45
  totalTime(): any;
package/script/midi-player.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"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"}
1
+ {"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,sBAQC;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,cA6CC;IAED,aAyCC;IAED,cA6BC;IAED,eAkBC;IAED,gBAIC;IAED,iBAIC;IAED,yBAWC;CACF"}
package/script/midi-player.js CHANGED
@@ -112,6 +112,8 @@ class MIDIPlayer {
112
112
  const div = this.row();
113
113
  div.appendChild(this.playPauseResume());
114
114
  div.appendChild(this.volume());
115
+ div.appendChild(this.repeat());
116
+ div.appendChild(this.speed());
115
117
  div.appendChild(this.currTimeTotalTime());
116
118
  div.appendChild(this.seekBar());
117
119
  }
@@ -300,7 +302,7 @@ class MIDIPlayer {
300
302
  volume() {
301
303
  const muteOn = this.button("mute ON", "midi-player-muteOn", "volume_down", "initial");
302
304
  const muteOff = this.button("mute OFF", "midi-player-muteOff", "volume_off", "none");
303
- const volumeBar = this.formRange("volume", "midi-player-volume", 1, "none");
305
+ const volumeBar = this.formRange("volume", "midi-player-volume", 100 / 128, "none");
304
306
  muteOn.onclick = () => {
305
307
  muteOn.style.display = "none";
306
308
  muteOff.style.display = "initial";
@@ -309,7 +311,7 @@ class MIDIPlayer {
309
311
  muteOff.onclick = () => {
310
312
  muteOn.style.display = "initial";
311
313
  muteOff.style.display = "none";
312
- this.midy.setMasterVolume(1);
314
+ this.midy.setMasterVolume(Number(volumeBar.value));
313
315
  };
314
316
  volumeBar.oninput = (event) => {
315
317
  this.midy.setMasterVolume(event.target.value);
@@ -328,6 +330,63 @@ class MIDIPlayer {
328
330
  };
329
331
  return div;
330
332
  }
333
+ speed() {
334
+ const speedButton = this.button("reset speed", "midi-player-speed", "speed", "initial");
335
+ const speedBar = this.formRange("playback speed", "midi-player-speed", 0.5, "none");
336
+ speedButton.onclick = () => {
337
+ speedBar.value = 0.5;
338
+ this.midy.tempoChange(1);
339
+ this.stopTimer();
340
+ this.startTimer();
341
+ if (this.totalTimeNode) {
342
+ this.totalTimeNode.textContent = this.formatTime(this.midy.totalTime);
343
+ }
344
+ };
345
+ speedBar.onchange = (event) => {
346
+ const value = Number(event.target.value);
347
+ const min = 0.5;
348
+ const max = 2;
349
+ const tempo = min * Math.pow(max / min, value);
350
+ this.midy.tempoChange(tempo);
351
+ this.stopTimer();
352
+ this.startTimer();
353
+ if (this.totalTimeNode) {
354
+ this.totalTimeNode.textContent = this.formatTime(this.midy.totalTime);
355
+ }
356
+ };
357
+ const div = document.createElement("div");
358
+ div.style.display = "flex";
359
+ div.style.alignItems = "center";
360
+ div.appendChild(speedButton);
361
+ div.appendChild(speedBar);
362
+ div.onmouseover = () => {
363
+ speedBar.style.display = "initial";
364
+ };
365
+ div.onmouseout = () => {
366
+ speedBar.style.display = "none";
367
+ };
368
+ return div;
369
+ }
370
+ repeat() {
371
+ const repeatOn = this.button("repeat ON", "midi-player-repeatOn", "turn_right", "initial");
372
+ const repeatOff = this.button("repeat OFF", "midi-player-repeatOff", "repeat", "none");
373
+ repeatOn.onclick = () => {
374
+ repeatOn.style.display = "none";
375
+ repeatOff.style.display = "initial";
376
+ this.midy.loop = true;
377
+ };
378
+ repeatOff.onclick = () => {
379
+ repeatOn.style.display = "initial";
380
+ repeatOff.style.display = "none";
381
+ this.midy.loop = false;
382
+ };
383
+ const div = document.createElement("div");
384
+ div.style.display = "flex";
385
+ div.style.alignItems = "center";
386
+ div.appendChild(repeatOn);
387
+ div.appendChild(repeatOff);
388
+ return div;
389
+ }
331
390
  seekBar() {
332
391
  const seekBar = this.formRange("playback position", "midi-player-seekBar", 0, "initial");
333
392
  seekBar.oninput = (event) => {