Biblioteka Magenta Music to świetne narzędzie do używania MIDI w HTML.

Odtwarzacz w HTML

Tak wygląda przykład w czystym HTML bez JS ze strony producenta:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<midi-player
     src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid"
     sound-font visualizer="#myPianoRollVisualizer">
    </midi-player>
   
    <midi-visualizer type="piano-roll" id="myPianoRollVisualizer"
     src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid">
    </midi-visualizer>
   
    <midi-player
     src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid"
     sound-font visualizer="#myStaffVisualizer">
    </midi-player>
   
    <midi-visualizer type="staff" id="myStaffVisualizer"
     src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid">
    </midi-visualizer>

    <script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.5.0"></script>

Javascript

Tu już jest nasz kod, który operuje na tych plikach, mamy osobną wizualizację, zmianę długości nut, zmianę typu nut (drums):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<body>

<script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.5.0"></script>
  <button onclick="fx_start();">Play</button>
  <canvas id="myVisualizer" width="400" height="400" style="border:1px solid #000000;"></canvas>
  <div id="divVisualizer" style="width:200px; height:200px;"></div>
<p>For more information, see <a href="https://github.com/cifkao/html-midi-player" target="_blank" rel="noopener">the <strong>html-midi-player</strong> repository</a> on GitHub.</p>
</body>
<script>
    var player;
    //Tak wyglada plik MIDI widziany oczami JS, można wpisać go w postaci JSON do obiektu:
    var DRUMS = {
  notes: [
    { pitch: 36, quantizedStartStep: 0, quantizedEndStep: 1, isDrum: true },
    { pitch: 38, quantizedStartStep: 0, quantizedEndStep: 1, isDrum: true },
    { pitch: 42, quantizedStartStep: 0, quantizedEndStep: 1, isDrum: true },
    { pitch: 46, quantizedStartStep: 0, quantizedEndStep: 1, isDrum: true },
    { pitch: 42, quantizedStartStep: 2, quantizedEndStep: 3, isDrum: true },
    { pitch: 42, quantizedStartStep: 3, quantizedEndStep: 4, isDrum: true },
    { pitch: 42, quantizedStartStep: 4, quantizedEndStep: 5, isDrum: true },
    { pitch: 50, quantizedStartStep: 4, quantizedEndStep: 5, isDrum: true },
    { pitch: 36, quantizedStartStep: 6, quantizedEndStep: 7, isDrum: true },
    { pitch: 38, quantizedStartStep: 6, quantizedEndStep: 7, isDrum: true },
    { pitch: 42, quantizedStartStep: 6, quantizedEndStep: 7, isDrum: true },
    { pitch: 45, quantizedStartStep: 6, quantizedEndStep: 7, isDrum: true },
    { pitch: 36, quantizedStartStep: 8, quantizedEndStep: 9, isDrum: true },
    { pitch: 42, quantizedStartStep: 8, quantizedEndStep: 9, isDrum: true },
    { pitch: 46, quantizedStartStep: 8, quantizedEndStep: 9, isDrum: true },
    { pitch: 42, quantizedStartStep: 10, quantizedEndStep: 11, isDrum: true },
    { pitch: 48, quantizedStartStep: 10, quantizedEndStep: 11, isDrum: true },
    { pitch: 50, quantizedStartStep: 10, quantizedEndStep: 11, isDrum: true },
  ],
  quantizationInfo: {stepsPerQuarter: 4},
  tempos: [{time: 0, qpm: 120}],
  totalQuantizedSteps: 11
};
   
var graph_midi, graph_scores;

function fx_start()
    {
        player = new core.Player(false, {
          run: (note) => {
            graph_midi.redraw(note, true); //animowane nuty przy graniu
            graph_scores.redraw(note, true); //animowane nuty - druga grafika
          },
         stop: () => {
          console.log('Koniec grania');
         }
        });

       // player.src = "https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid";
        player.soundFont = '';
        player.setTempo(300);
       
       // player.start(DRUMS);
        player.loop = true;
        core.urlToNoteSequence('https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid'); //PLIK MID
         .then(
         function(SEKWENCJA_MIDI)
         { //funkcja otrzymuje jako argument JSON ze zinterpretowanym plikiem MIDI
          SEKWENCJA_MIDI.notes.forEach(element => {
             element.isDrum = true; //wszystkie nuty -> zmiana na perkusję
             element.endTime = element.startTime + 0.16;
           });
         
          graph_midi = new core.Visualizer(SEKWENCJA_MIDI,  document.getElementById("myVisualizer")); //wyświetla prostokąty
          graph_scores = new core.StaffSVGVisualizer(SEKWENCJA_MIDI,  document.getElementById("divVisualizer")); //wyświetla nuty
         
         
           // player.start(DRUMS);
           //na sztywno perkusja zamiast pliku MIDI z JSONa powyżej
         
             
           player.start(SEKWENCJA_MIDI);
           console.log(JSON.stringify(SEKWENCJA_MIDI)); //a tak wygląda MIDI zamieniony na JSON
        });

    }
</script>
<!-- Dokumentacja: https://magenta.github.io/magenta-js/music/ -->
JavaScript