Loading midi.js soundfonts dynamically

Question

I just started using midi.js and so far it seems really neat. I am currently loading all of my sounds fonts at once like so:

    MIDI.loadPlugin({
    soundfontUrl: "js/MIDI/soundfont/FluidR3_GM/",
    instrument: instruments,
    callback: function() {
        app.MIDIManager.midiLoaded = true;
        console.log("DONE LOADING");
    }
});

As I grow the instruments array it is starting to take quite some time to finish loading. Is there a way to dynamically load instruments only when they are needed? The only way I could find to load instruments is in the call to loadPlugin. I also couldn't find any comprehensive API documentation (I looked on the demo page and github) so if I am just missing that I'd love a link to the full documentation.

Answer 1

You can load an instrument dynamically with MIDI.loadResource (an undocumented function which I found looking through the js/midi/loader.js code on GitHub).

For example, the code below adds a banjo on channel 1, supposing you want to keep a previously loaded instrument on channel 0.

loadInstrument('banjo')

function loadInstrument(instrumentName) {
  MIDI.loadResource({
    instrument: instrumentName,
    onprogress: function(state, percent) {
      console.log(state, percent);
    },
    onsuccess: function() {
      MIDI.programChange(1, MIDI.GM.byName[instrumentName].number);
    }
  })
}