1

I'm trying to implement the WebMIDI.js library in my application by following the guide here.

I've added the webmidi.min.js file to my index.html page like so:

<script src="script.js"></script>
<script src="webmidi.min.js"></script>

My script.js file looks like this:

if (navigator.requestMIDIAccess) {
    console.log('This browser supports WebMIDI!');
} else {
    console.log('WebMIDI is not supported in this browser.');
}

navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);

function onMIDIFailure() {
    console.log('Could not access your MIDI devices.');
}

function onMIDISuccess(midiAccess) {
    for (var input of midiAccess.inputs.values()){
        input.onmidimessage = getMIDIMessage;
    }
}

function getMIDIMessage(message) {
    var command = message.data[0];
    var note = message.data[1];
    var velocity = (message.data.length > 2) ? message.data[2] : 0; // a velocity value might not be included with a noteOff command

    switch (command) {
        case 144: // noteOn
            if (velocity > 0) {
                noteOn(note, velocity);
                console.log("Note pressed: " + note + " at " + velocity + " velocity");
            } else {
                noteOff(note);
                console.log("Note stopped");
            }
            break;
        case 128: // noteOff
            noteOff(note);
            break;
        // we could easily expand this switch statement to cover other types of commands such as controllers or sysex
    }
}

function noteOn(note){
}

function noteOff(note){
}

WebMidi.enable(function(err) {
   if (err) console.log("An error occurred", err);
   WebMidi.outputs[0].playNote("C3");
 });

However the console is throwing an error regarding WebMidi not being referenced.

'script.js:47 Uncaught ReferenceError: WebMidi is not defined'

As far as I can see, I've included the correct .js file in my html page, and WebMidi is referenced there. I've tried the script tag to the online version of webmidi.min.js, i.e. <script src="https://cdn.jsdelivr.net/npm/webmidi@2.0.0"></script>, but to no avail. I'm sure it's a simple enough issue but I can't seem to figure it out. Any help appreciated.

gillharman
  • 93
  • 5
SteamedTans
  • 11
  • 2
  • 2
    Can you try moving the `````` after the WebMidi ```script``` tag? See if that resolves the reference error. – gillharman Feb 03 '20 at 16:26
  • Code works for me in codepen. Yeah @gillharman is right, you need to import the library before you use it. – Matt Feb 03 '20 at 16:29
  • I knew it would be staring me in the face!! Thank you for your help @gillharman – SteamedTans Feb 03 '20 at 16:33
  • Yep. Your ```script.js``` file is referencing WebMidi at line 47 ```WebMidi.enable(function(err) {``` and it's not defined until the second ```script``` tag imports/loads the library. – gillharman Feb 03 '20 at 16:43

1 Answers1

0

Your script.js is running before WEBMIDI.js is loaded. Try reversing the order of your script tags.

<script src="webmidi.min.js"></script>
<script src="script.js"></script>
Seano666
  • 2,238
  • 1
  • 15
  • 14