Introduction to Web MIDI

获得midi设备

navigator.requestMIDIAccess

if (navigator.requestMIDIAccess) {
    console.log('Browser supports MIDI!');
}

if (navigator.requestMIDIAccess) {
    navigator.requestMIDIAccess()
        .then(success, failure);
}

navigator.requestMIDIAccess() returns a promise,

function success (midi) {
    console.log('Got midi!', midi);
}
 
function failure () {
    console.error('No access to your midi devices.')
}

success function takes a MIDI parameter in the form of a MIDIAccess object.
MIDIAccess object is the key to receiving midi data.
Inputs represent any MIDI devices you have connected to your computer.
midi.inputs.size = 1

用来获得键盘的输入

var inputs = midi.inputs.values();

1. inputs is an iterator.
2. next() method to allow you to get the next item in the sequence.
3. done property to let us know if we’ve iterated over all properties of the object.

for (var input = inputs.next();
     input && !input.done;
     input = inputs.next()) {
    // each time there is a midi message call the onMIDIMessage function
    input.value.onmidimessage = onMIDIMessage;
}

1. input返回inputs的一个值
2. 如果有值,且没有done,继续循环

onMIDIMessage查看我们的输出

function onMIDIMessage (message) {
    console.log(message.data);
}

编码midi数据

midi data[144, 61, 95]

第一位:MIDI event: noteOn:144 按压 noteOff:128 松开
参考:http://www.midi.org/techspecs/midimessages.php

第二位:which key: 0 to 127 60是Middle C
参考:https://www.midimountain.com/midi/midi_note_numbers.html

第三位: velocity

创建一个乐器

将按键值转换为频率: synthesizer,oscillator
参考:https://en.wikipedia.org/wiki/MIDI_Tuning_Standard

function midiNoteToFrequency (note) {
    return Math.pow(2, ((note - 69) / 12)) * 440;
}

play a note of this frequency if the MIDI message is a noteOn message.

if (message.data[0] === 144 && message.data[2] > 0) {
    playNote(frequency);
}

1. We’re checking that the message type is 144 which is the noteOn message.
2. some MIDI devices, instead of sending a noteOff message, will send a noteOn message with zero velocity,

if (message.data[0] === 128 || message.data[2] === 0) {
    stopNote(frequency);
}

var context = new AudioContext(),
    oscillators = {};
 
if (navigator.requestMIDIAccess) {
    navigator.requestMIDIAccess()
        .then(success, failure);
}
 
function success (midi) {
    var inputs = midi.inputs.values();
    // inputs is an Iterator
 
    for (var input = inputs.next(); input && !input.done; input = inputs.next()) {
        // each time there is a midi message call the onMIDIMessage function
        input.value.onmidimessage = onMIDIMessage;
    }
}
 
function failure () {
    console.error('No access to your midi devices.')
}
 
function onMIDIMessage (message) {
    var frequency = midiNoteToFrequency(message.data[1]);
 
    if (message.data[0] === 144 && message.data[2] > 0) {
        playNote(frequency);
    }
 
    if (message.data[0] === 128 || message.data[2] === 0) {
        stopNote(frequency);
    }
}
 
function midiNoteToFrequency (note) {
    return Math.pow(2, ((note - 69) / 12)) * 440;
}
 
function playNote (frequency) {
    oscillators[frequency] = context.createOscillator();
    oscillators[frequency].frequency.value = frequency;
    oscillators[frequency].connect(context.destination);
    oscillators[frequency].start(context.currentTime);
}
 
function stopNote (frequency) {
    oscillators[frequency].stop(context.currentTime);
    oscillators[frequency].disconnect();
}

参考:
https://code.tutsplus.com/tutorials/introduction-to-web-midi–cms-25220

来源：CSDN

作者：Claroja

链接：https://blog.csdn.net/claroja/article/details/103774301