API Web MIDI de JavaScript
La API Web MIDI en JavaScript es una herramienta poderosa que permite a los desarrolladores web interactuar con instrumentos musicales directamente desde el navegador. Esta guía presentará los conceptos básicos de la API Web MIDI, demostrará cómo acceder y manipular dispositivos MIDI, y proporcionará ejemplos prácticos para integrar música en aplicaciones web.
Introducción a la API Web MIDI
La API Web MIDI facilita la comunicación entre aplicaciones web y dispositivos habilitados para MIDI, como teclados y cajas de ritmos, permitiendo la creación de experiencias musicales interactivas.
Características principales de la API Web MIDI:
- Conectividad de dispositivos: Se conecta directamente a instrumentos MIDI desde el navegador web.
- Interacción en tiempo real: Permite la creación y manipulación dinámica de música en tiempo real.
Uso de la API Web MIDI
Los mensajes MIDI están compuestos por bytes de estado y bytes de datos. El byte de estado define el tipo de mensaje y el canal (por ejemplo, 0x90 para Note On, 0x80 o 0x90 con velocidad 0 para Note Off), mientras que los bytes de datos transportan parámetros como el número de nota y la velocidad.
Acceso a dispositivos MIDI
// 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.Manejo de entrada MIDI
// 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.Envío de salida MIDI
// 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.Conclusión
La API Web MIDI abre un mundo de posibilidades para los desarrolladores web interesados en la tecnología musical. Al aprovechar esta API, los desarrolladores pueden crear aplicaciones web atractivas e interactivas que interactúan con instrumentos musicales, mejorando la experiencia musical del usuario. Nota: Verifica siempre la disponibilidad de navigator.requestMIDIAccess antes de usarlo, ya que el soporte del navegador varía en versiones anteriores.
Práctica
¿Cuáles son las capacidades de la API Web MIDI de JavaScript?