Web MIDI 入門：如何用電子鋼琴做一款遊戲

使用 webmidi.js 來使我們的工作變的簡單

目前為止，對於 WebMIDI API 帶來的所有可能性，我們還只是做了比較膚淺、區域性的瞭解。如果還要支援除了基礎的“note on”和“note off”訊息外的其他功能，事情就會變得非常複雜。

如果你想找到一個不錯的 javascript 庫來急劇地簡化你的程式碼，請選擇由 Jean-Philippe Côté 釋出在 Github 上的 WebMidi.js。這個庫對 MIDIAccess 和 MIDIMessageEvent的解析做了一個很好的抽象，讓你可以以一種極簡單的方式新增、移除某個特定事件的監聽器。

WebMidi.enable(function () {

    // 檢視可用的輸入、輸出裝置
    console.log(WebMidi.inputs);
    console.log(WebMidi.outputs);

    // 通過 name、id 或者 index 來獲取一個輸入裝置
    var input = WebMidi.getInputByName("My Awesome Keyboard");
    // 或者
    // input = WebMidi.getInputById("1809568182");
    // input = WebMidi.inputs[0];

    // 在所有通道監聽 'note on' 訊息
    input.addListener('noteon', 'all',
        function (e) {
            console.log("收到 'noteon' 訊息 (" + e.note.name + e.note.octave + ").");
        }
    );

    // 在通道3監聽 'pitchben' 訊息
    input.addListener('pitchbend', 3,
        function (e) {
            console.log("收到 'pitchbend' 訊息.", e);
        }
    );

    // 在所有通道監聽“controlchange”訊息
    input.addListener('controlchange', "all",
        function (e) {
            console.log("收到'controlchange' 訊息.", e);
        }
    );

    // 移除所有通道上的 'noteoff' 監聽器
    input.removeListener('noteoff');

    // 移除所有監聽器
    input.removeListener();

});
複製程式碼

真實場景：製作一個由鋼琴鍵盤控制的室內脫逃遊戲

幾個月前，我和我的妻子做了個決定，決定在家裡建立一個“室內逃脫”體驗的決定，以給我們的朋友和家庭帶來歡樂。我們想著這個遊戲應該包含一些特效以提升體驗。但不幸，我倆都沒有過硬的工程技能，利用磁鐵、鐳射以及電線製作複雜的鎖具和特效都在我倆的專業範圍之外。不過，我會——我對我的和瀏覽器打交道的工作非常瞭解，恰好我們又有一臺電子鋼琴。

因此，這個想法就隨之浮現了。我們決定把製作在電腦上的一系列密碼鎖作為遊戲的核心部分，玩家需要在我們的鋼琴上彈出指定的音符序列才能解鎖，a la Willy Wonka.

這是一個音樂鎖

聽起來很酷是吧？那我們來看下如何實現它吧。

起架

首先我們將從發起訪問 WebMIDI 請求開始，然後對我們的鍵盤進行識別，接著新增相應的事件監聽器，同時建立幾個變數和函式來給我們在遊戲的各個階段提供幫助。

// 該變數告訴我們遊戲當前所在的步驟。
// 我們將在之後解析 noteOn/Off 訊息時使用它
var currentStep = 0;

// 請求訪問 MIDI
if (navigator.requestMIDIAccess) {
    console.log('該瀏覽器支援 Web MIDI!');

    navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);

} else {
    console.log('WebMIDI 不被該瀏覽器所支援.');
}

// 該函式用於在 requestMIDIAccess 成功後執行
function onMIDISuccess(midiAccess) {
    var inputs = midiAccess.inputs;
    var outputs = midiAccess.outputs;

    // 對每個 input 新增 MIDI 事件監聽器
    for (var input of midiAccess.inputs.values()) {
        input.onmidimessage = getMIDIMessage;
    }
}

// 該函式使用者在 requestMIDIAccess 失敗後執行
function onMIDIFailure() {
    console.log('錯誤: 無法訪問 MIDI 裝置.');
}

// 該函式用於對我們接收到的 MIDI　訊息進行解析
// 在這個應用中，我們只關心 note 值
// 當然我們也可以對其他資訊進行解析
function getMIDIMessage(message) {
    var command = message.data[0];
    var note = message.data[1];
    var velocity = (message.data.length > 2) ? message.data[2] : 0;

    switch (command) {
        case 144: // note on
            if (velocity > 0) {
                noteOn(note);
            } else {
                noteOff(note);
            }
            break;
        case 128: // note off
            noteOffCallback(note);
            break;
    }
}

// 該函式用於處理 noteOn 訊息（即，琴鍵被按下）
// 可以把他想象成 'onkeydown' 事件
function noteOn(note) {
    //...
}

// 該函式用於處理 noteOff 訊息（即，琴鍵被釋放）
// 可以把他想象成 'onkeyup' 事件
function noteOff(note) {
    //...
}

// 該函式用於觸發特定的動畫和推動遊戲進入下一個環節
// 例如，一把鎖被解開之後，或者計時器完成之後
function runSequence(sequence) {
    //...
}
複製程式碼

第1步：按任意鍵開始

要開始遊戲，玩家只需按任意鍵即可。這個步驟非常容易，同時可以向他們展示一些遊戲玩法的資訊，接著啟動一個倒數計時計時器。

function noteOn(note) {
    switch(currentStep) {
        // 如有遊戲還沒有開始，
        // 那麼我們收到的第一個 noteOn 訊息將觸發第一個序列的執行
        case 0: 
            // 執行我們的遊戲開始序列
            runSequence('gamestart');

            // 增加 currentStep，以確保該序列只被執行一次
            currentStep++;
            
            break;
    }
}

function runSequence(sequence) {
    switch(sequence) {
        case 'gamestart':            
            // 現在開始啟動倒數計時器
            startTimer();
            
            // 觸發動畫的及給與第一把鎖的線索的程式碼
            break;
    }
}
複製程式碼

第2步：彈奏出正確的音符序列

第一把鎖要求玩家必須按照正確的順序彈奏出一個特定的符號序列。 

要實現這個鎖，對於每個“note on”訊息，我們需要把 note 值附加到一個陣列後面，然後檢查它是否與一個預定義的陣列匹配。

我們假設玩家可以根據我們在室內的聲音提示找到對應的鍵位，在本例中，我們以F大調的歌曲"Amazing Grace"的開頭為提示音。它的鍵位序列如下圖所示。

它正確的 MIDI 音符陣列為: [60, 65, 69, 65, 69, 67, 65, 62, 60].

var correctNoteSequence = [60, 65, 69, 65, 69, 67, 65, 62, 60]; // Amazing Grace in F
var activeNoteSequence = [];

function noteOn(note) {
    switch(currentStep) {
        // ... (case 0)

        // 第一把鎖——彈奏出正確的序列
        case 1:
            activeNoteSequence.push(note);

            // 當陣列的長度與正確的陣列的一樣是，進行匹配
            if (activeNoteSequence.length == correctNoteSequence.length) {
                var match = true;
                for (var index = 0; index < activeNoteSequence.length; index++) {
                    if (activeNoteSequence[index] != correctNoteSequence[index]) {
                        match = false;
                        break;
                    }
                }

                if (match) {
                    // 執行下一個序列，並增加當前步驟值
                    runSequence('lock1');
                    currentStep++;
                } else {
                    // 清空陣列，以重頭計算
                    activeNoteSequence = [];
                }
            }
            break;
    }
}

function runSequence(sequence) {
    switch(sequence) {
        // ...

        case 'lock1':
            // 觸發動畫並給與下一把鎖的提示的程式碼
            break;
    }
}
複製程式碼

弟３步：彈奏出正確的和絃（譯：同時按下鍵位的組合）

下一把鎖要求玩家找到正確的鍵位組合（同時），這個時候就是“note off”登臺的時候了。對於每個“note on”訊息，我們會把其 note 值新增到一個陣列，而對於每個“note off”訊息，我們又會把它的 note 值從陣列中移除，這樣的話這個陣列就可以反應出任意時刻的鍵位組合狀態。然後，剩下的就是在每次新增一個 note 值時對這個陣列進行驗證了，看看它是否匹配我們的目標陣列。

我們將正確答案設定為由中 C 鍵開始的 C7 和絃，像下圖所示的這樣。

它的正確的 MIDI note 值陣列為： [60, 64, 67, 70].

var correctChord = [60, 64, 67, 70]; // C7 chord starting on middle C
var activeChord = [];

function noteOn(note) {
    switch(currentStep) {
        // ... (case 0, 1)

        case 2:
            // 把該 note 值新增至實時陣列
            activeChord.push(note);

            // 如果陣列的長度與正確答案的一致，則進行匹配
            if (activeChord.length == correctChord.length) {
                var match = true;
                for (var index = 0; index < activeChord.length; index++) {
                    if (correctChord.indexOf(activeChord[index]) < 0) {
                        match = false;
                        break;
                    }
                }

                if (match) {
                    runSequence('lock2');
                    currentStep++;
                }
            }
            break;
    }

function noteOff(note) {
    switch(currentStep) {
        case 2:
            // 從實時陣列中移除該 note 值
            activeChord.splice(activeChord.indexOf(note), 1);
            break;
    }
}

function runSequence(sequence) {
    switch(sequence) {
        // ...

        case 'lock2':
            // 觸發動畫，停止計時器，並結束遊戲
            stopTimer();

            break;
    }
}
複製程式碼

到這，剩下的就是新增一些額外的介面元素和動畫了，然後我們的遊戲就可以開始使用了。

下面是一個該遊戲從開始到結束的完整操作的視訊，是在 Google Chrome 下演示的，同時也會顯示一個虛擬的 MIDI 鍵盤以幫助檢視當前各鍵位的按壓狀態。正常來說，我們應該把這種室內逃脫場景的遊戲以全屏模式執行，並拿掉其他的輸入裝置（如滑鼠、電腦鍵盤），以此防止使用者關閉遊戲視窗。