API Web MIDI en JavaScript
L'API Web MIDI en JavaScript est un outil puissant qui permet aux développeurs web d'interagir avec des instruments de musique directement depuis le navigateur. Ce guide présentera les bases de l'API Web MIDI, démontrera comment accéder et manipuler les périphériques MIDI, et fournira des exemples pratiques pour intégrer la musique dans les applications web.
Introduction à l'API Web MIDI
L'API Web MIDI facilite la communication entre les applications web et les périphériques compatibles MIDI, tels que les claviers et les boîtes à rythmes, permettant ainsi la création d'expériences musicales interactives.
Fonctionnalités clés de l'API Web MIDI :
- Connectivité des périphériques : Se connecte directement aux instruments MIDI depuis le navigateur web.
- Interaction en temps réel : Permet la création et la manipulation dynamiques de musique en temps réel.
Utilisation de l'API Web MIDI
Les messages MIDI sont composés d'octets de statut et d'octets de données. L'octet de statut définit le type de message et le canal (par ex. 0x90 pour Note On, 0x80 ou 0x90 avec une vélocité de 0 pour Note Off), tandis que les octets de données transportent des paramètres tels que le numéro de note et la vélocité.
Accès aux périphériques 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.Gestion de l'entrée 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.Envoi de sortie 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.Conclusion
L'API Web MIDI ouvre un vaste champ de possibilités pour les développeurs web intéressés par la technologie musicale. En exploitant cette API, les développeurs peuvent créer des applications web engageantes et interactives qui communiquent avec des instruments de musique, enrichissant ainsi l'expérience musicale de l'utilisateur. Remarque : Vérifiez toujours la disponibilité de navigator.requestMIDIAccess avant de l'utiliser, car le support varie selon les anciennes versions des navigateurs.
Pratique
What are the capabilities of the JavaScript Web MIDI API?