The Web MIDI API is a powerful tool for developers who want to enhance their web applications with musical capabilities. MIDI stands for Musical Instrument Digital Interface, and the Web MIDI API provides a way to interact with MIDI devices directly from a web browser using JavaScript. This allows for real-time control and communication with MIDI instruments and controllers. In this article, we'll explore the basics of using the Web MIDI API to access musical instruments and controllers.
Getting Started with Web MIDI API
To use the Web MIDI API, you need to ensure that your web application is running over HTTPS, as access to MIDI devices requires explicit permission for security reasons. Here is a simple example of how to request and handle access to MIDI devices:
navigator.requestMIDIAccess()
.then(onMIDISuccess, onMIDIFailure);
function onMIDISuccess(midiAccess) {
console.log('MIDI Access obtained successfully!');
// List available input and output devices
for (let input of midiAccess.inputs.values()) {
console.log('Input Device:', input.name);
}
for (let output of midiAccess.outputs.values()) {
console.log('Output Device:', output.name);
}
}
function onMIDIFailure() {
console.error('Could not access MIDI devices.');
}
This code initiates a request to access MIDI devices. Upon success, the onMIDISuccess
callback is triggered where you can list available MIDI input and output devices. If the request fails, the onMIDIFailure
callback is executed.
Interacting with MIDI Devices
Once access is granted, you can interact with MIDI devices. Typically, you'll be more concerned with MIDI input devices, such as keyboards or drum pads. These devices send messages to your application when keys are pressed or pads are hit.
navigator.requestMIDIAccess().then((midiAccess) => {
let inputs = midiAccess.inputs;
inputs.forEach((entry) => {
entry.onmidimessage = onMIDIMessage;
});
});
function onMIDIMessage(message) {
let data = message.data; // data is an array of integers ([status, data1, data2])
console.log('MIDI message received:', data);
let command = data[0] >> 4;
let channel = data[0] & 0xf;
let note = data[1];
let velocity = data[2];
switch (command) {
case 8: // Note Off
console.log('Note Off:', note);
break;
case 9: // Note On
if (velocity > 0) {
console.log('Note On:', note);
} else {
console.log('Note Off:', note);
}
break;
// Handle other commands
}
}
In this example, you subscribe to the onmidimessage
event for each MIDI input device. The onMIDIMessage
function is triggered whenever a MIDI message is received. Common MIDI messages include "Note On" or "Note Off," which are parsed in the switch statement.
Sending MIDI Messages
Beyond handling input, you can also use the Web MIDI API to send messages to MIDI output devices, such as synthesizers or drum machines. Here's an example of sending a "Note On" message:
navigator.requestMIDIAccess().then((midiAccess) => {
let outputs = midiAccess.outputs;
let firstOutput = outputs.values().next().value;
if (firstOutput) {
let noteOnMessage = [0x90, 60, 0x7f]; // Note on, middle C, max velocity
firstOutput.send(noteOnMessage, window.performance.now() + 1000);
}
});
Here, we acquire the first available MIDI output device and send a "Note On" message for middle C after one second. Sending MIDI messages involves creating a message array that starts with a status byte followed by data bytes indicating the note and velocity.
Conclusion
The Web MIDI API opens exciting possibilities for web developers interested in music technology. Whether creating virtual instruments, music visualizers, or interactive experiences, understanding how to interface with MIDI devices using JavaScript is invaluable. This guide provides the foundational concepts needed to start experimenting with the Web MIDI API.