@marmooo/midi-player 0.0.5 → 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 +4 -1
  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 +59 -0
  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 +59 -0
package/README.md CHANGED
@@ -101,6 +101,9 @@ All parts have midi-player-* class so you can be themed with CSS.
101
101
  - `midi-player-volumeOn`
102
102
  - `midi-player-volumeff`
103
103
  - `midi-player-volumeBar`
104
+ - `midi-player-speed`
105
+ - `midi-player-repeatOn`
106
+ - `midi-player-repeatOff`
104
107
 
105
108
  You can also style the parts using JavaScript and CSS Framework.
106
109
 
@@ -121,7 +124,7 @@ Search for the ligature names you want to use from the
121
124
  minimize them using [fontconv](https://github.com/marmooo/fontconv).
122
125
 
123
126
  ```
124
- fontconv --ligature play_arrow,pause,stop,volume_down,volume_off \
127
+ fontconv --ligature play_arrow,pause,stop,volume_down,volume_off,speed,360,repeat \
125
128
  material-icons.woff2 src/midi-player-icons.woff2
126
129
  ```
127
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
  }
@@ -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.5",
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
  }
@@ -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) => {