Sling Academy
Home/JavaScript/Access Musical Instruments and Controllers with the Web MIDI API in JavaScript

Access Musical Instruments and Controllers with the Web MIDI API in JavaScript

Last updated: December 13, 2024

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.

Next Article: Send and Receive MIDI Messages Using JavaScript Web MIDI

Previous Article: Manage Shared State Safely with the JavaScript Web Locks API

Series: Web APIs – JavaScript Tutorials

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration