Check out the source code of http://tonejs.github.io/Midi/. The JS is in the <script> tag at the bottom of the <body>
It looks like you need to loop through the object manually and schedule each note with tonejs. Here is the relevant part of the code. currentMidi is the Midi object constructed using the result of reading the midi file from the upload box. currentMidi is then looped through and has its tracks and notes processed and scheduled.
let currentMidi = null;
function parseFile(file) {
//read the file
const reader = new FileReader();
reader.onload = function (e) {
const midi = new Midi(e.target.result);
document.querySelector(
"#ResultsText"
).value = JSON.stringify(midi, undefined, 2);
document
.querySelector("tone-play-toggle")
.removeAttribute("disabled");
currentMidi = midi;
};
reader.readAsArrayBuffer(file);
}
const synths = [];
document
.querySelector("tone-play-toggle")
.addEventListener("play", (e) => {
const playing = e.detail;
if (playing && currentMidi) {
const now = Tone.now() + 0.5;
currentMidi.tracks.forEach((track) => {
//create a synth for each track
const synth = new Tone.PolySynth(Tone.Synth, {
envelope: {
attack: 0.02,
decay: 0.1,
sustain: 0.3,
release: 1,
},
}).toDestination();
synths.push(synth);
//schedule all of the events
track.notes.forEach((note) => {
synth.triggerAttackRelease(
note.name,
note.duration,
note.time + now,
note.velocity
);
});
});
} else {
//dispose the synth and make a new one
while (synths.length) {
const synth = synths.shift();
synth.disconnect();
}
}
});
To get the Midi class you will need https://github.com/Tonejs/Midi. I think their claim that it is tonejs friendly is a bit exaggerated, as you still need to write the code to play the individual notes, with all the setup required for that also. I would expect more of a single function to play the returned Midi object.
