JavaScript Web MIDI API
Die Web MIDI API in JavaScript ist ein leistungsstarkes Werkzeug, das Webentwicklern ermöglicht, direkt im Browser mit Musikinstrumenten zu interagieren. Dieser Leitfaden führt in die Grundlagen der Web MIDI API ein, zeigt, wie MIDI-Geräte angesprochen und manipuliert werden können, und bietet praktische Beispiele zur Integration von Musik in Webanwendungen.
Einführung in die Web MIDI API
Die Web MIDI API ermöglicht die Kommunikation zwischen Webanwendungen und MIDI-fähigen Geräten wie Keyboards und Drumcomputern, wodurch interaktive musikalische Erlebnisse geschaffen werden können.
Wichtige Funktionen der Web MIDI API:
- Geräteverbindung: Stellt eine direkte Verbindung zu MIDI-Instrumenten über den Webbrowser her.
- Echtzeit-Interaktion: Ermöglicht die dynamische Erstellung und Manipulation von Musik in Echtzeit.
Verwendung der Web MIDI API
MIDI-Nachrichten setzen sich aus Status-Bytes und Daten-Bytes zusammen. Das Status-Byte definiert den Nachrichtentyp und den Kanal (z. B. 0x90 für Note On, 0x80 oder 0x90 mit Velocity 0 für Note Off), während die Daten-Bytes Parameter wie Notenummer und Velocity enthalten.
Zugriff auf MIDI-Geräte
// Requesting access to MIDI devices
// Browsers automatically prompt the user for permission on first access
async function initMIDI() {
try {
const midiAccess = await navigator.requestMIDIAccess();
console.log('MIDI access obtained', midiAccess);
// Handle devices connecting or disconnecting dynamically
midiAccess.onstatechange = (e) => {
console.log('Device state changed:', e.port.name, e.port.state);
};
// Attach the message handler to all available MIDI inputs
midiAccess.inputs.forEach((input) => {
input.onmidimessage = onMIDIMessage;
});
} catch (err) {
console.error('Could not access MIDI devices', err);
}
}
initMIDI();
// This code snippet requests MIDI access, handles dynamic device changes, and attaches the input handler to all connected devices.Verarbeitung von MIDI-Eingaben
// Handling incoming MIDI messages
function onMIDIMessage(message) {
// MIDI messages vary in length; standard channel messages are typically 3 bytes
if (message.data.length < 2) return;
const [command, note, velocity] = message.data;
console.log(`MIDI message received: Command=${command}, Note=${note}, Velocity=${velocity}`);
}
// This function logs each MIDI message received, detailing the command, note, and velocity.Senden von MIDI-Ausgaben
// Getting an output port and sending a note
async function sendNoteOnExample(midiAccess) {
const outputs = midiAccess.outputs;
if (outputs.size === 0) {
console.log('No MIDI outputs available');
return;
}
const midiOutput = Array.from(midiAccess.outputs.values())[0]; // Select the first available port
midiOutput.send([0x90, 60, 100]); // Note on (0x90 represents channel 1)
// Note: In production apps, track active notes to send 'note off' when the key is released,
// rather than using setTimeout, to prevent stuck notes.
setTimeout(() => {
midiOutput.send([0x90, 60, 0]); // Note off (0x90 with velocity 0 ensures broader hardware compatibility)
}, 500);
}
// This function retrieves a connected MIDI output port, sends a 'note on' message, and turns it off after 500 milliseconds.Fazit
Die Web MIDI API eröffnet Webentwicklern, die sich für Musiktechnologie interessieren, ein weites Feld an Möglichkeiten. Durch die Nutzung dieser API können Entwickler ansprechende, interaktive Webanwendungen erstellen, die mit Musikinstrumenten interagieren und so das musikalische Erlebnis der Nutzer verbessern. Hinweis: Prüfen Sie vor der Nutzung stets die Verfügbarkeit von navigator.requestMIDIAccess, da die Browserunterstützung in älteren Versionen variiert.
Übung
What are the capabilities of the JavaScript Web MIDI API?