Раскрытие музыкального творчества с помощью Web MIDI API в JavaScript
Web MIDI API в JavaScript — это мощный инструмент, позволяющий веб-разработчикам взаимодействовать с музыкальными инструментами непосредственно из браузера. В этом руководстве мы рассмотрим основы Web MIDI API, продемонстрируем, как получать доступ к MIDI-устройствам и управлять ими, а также предоставим практические примеры интеграции музыки в веб-приложения.
Введение в Web MIDI API
Web MIDI API обеспечивает взаимодействие между веб-приложениями и MIDI-устройствами, такими как клавиатуры и драм-машины, что позволяет создавать интерактивные музыкальные впечатления.
Основные возможности Web MIDI API:
- Подключение устройств: Прямое подключение к MIDI-инструментам из веб-браузера.
- Взаимодействие в реальном времени: Позволяет динамически создавать и изменять музыку в реальном времени.
Использование Web MIDI API
MIDI-сообщения состоят из байтов статуса и байтов данных. Байт статуса определяет тип сообщения и канал (например, 0x90 для Note On, 0x80 или 0x90 с velocity 0 для Note Off), а байты данных содержат параметры, такие как номер ноты и громкость (velocity).
Получение доступа к 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.Обработка 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.Отправка 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.Заключение
Web MIDI API открывает широкие возможности для веб-разработчиков, интересующихся музыкальными технологиями. Используя этот API, разработчики могут создавать увлекательные интерактивные веб-приложения, взаимодействующие с музыкальными инструментами, что значительно улучшает музыкальный опыт пользователя. Примечание: всегда проверяйте наличие navigator.requestMIDIAccess перед использованием, так как поддержка браузера может отличаться в старых версиях.
Практика
Какие возможности есть у Web MIDI API в JavaScript?