JS操作web midi api的關鍵在于理解核心流程并正確調用api。1. 首先檢查瀏覽器支持，使用navigator.requestmidiaccess判斷是否支持web midi api；2. 請求midi訪問權限，通過navigator.requestmidiAccess()獲取訪問對象；3. 獲取midi輸入設備，遍歷midiaccess.inputs.values()獲取可用輸入設備并綁定消息處理函數；4. 監聽midi消息，定義onmidimessage事件處理函數解析midi數據；5. 獲取midi輸出設備，通過midiaccess.outputs.values()獲取輸出設備；6. 發送midi消息，使用output.send(data, timestamp)發送midi命令；若遇權限問題，應優化授權請求時機并引導用戶手動開啟權限；該api可用于音樂游戲開發中的演奏輸入、音效控制、畫面同步及在線創作工具實現；調試時可利用瀏覽器開發者工具結合console.log輸出和在線測試工具驗證代碼正確性。
JS操作Web MIDI API，簡單來說，就是用JavaScript代碼跟你的MIDI設備“對話”，實現音樂數據的發送和接收。這事兒聽起來高大上，但其實上手并不難，關鍵在于理解幾個核心概念和api調用。
解決方案
-
檢查瀏覽器支持： 首先，確保你的瀏覽器支持Web MIDI API。不是所有瀏覽器都支持，所以最好先用navigator.requestMIDIAccess檢查一下。如果返回undefined，那就說明瀏覽器不支持，只能換瀏覽器或者升級了。
-
請求MIDI訪問權限： 這是關鍵一步。你需要調用navigator.requestMIDIAccess()來請求訪問MIDI設備的權限。這個函數會返回一個promise，成功resolve后，你就可以拿到MIDI的訪問對象了。
navigator.requestMIDIAccess() .then(onMIDISuccess, onMIDIFailure); function onMIDISuccess(midiAccess) { console.log("WebMIDI已啟用！"); // 在這里處理MIDI輸入和輸出 } function onMIDIFailure(msg) { console.log("無法訪問WebMIDI：" + msg); }
-
獲取MIDI輸入設備： 通過midiAccess.inputs.values()可以獲取所有可用的MIDI輸入設備。這是一個迭代器，你需要遍歷它才能找到你想要的設備。
for (let input of midiAccess.inputs.values()) { console.log("輸入設備：", input.name, input.manufacturer); input.onmidimessage = getMIDIMessage; // 綁定消息處理函數 } -
監聽MIDI消息： 每個MIDI輸入設備都有一個onmidimessage事件，當設備發送MIDI消息時，這個事件會被觸發。你需要定義一個函數來處理這些消息。
function getMIDIMessage(midiMessage) { const command = midiMessage.data[0]; const note = midiMessage.data[1]; const velocity = (midiMessage.data.length > 2) ? midiMessage.data[2] : 0; console.log("MIDI消息：", command, note, velocity); // 在這里處理MIDI消息，比如播放聲音 } -
獲取MIDI輸出設備： 類似于輸入設備，你可以通過midiAccess.outputs.values()獲取所有可用的MIDI輸出設備。
for (let output of midiAccess.outputs.values()) { console.log("輸出設備：", output.name, output.manufacturer); // 在這里使用輸出設備發送MIDI消息 } -
發送MIDI消息： 使用output.send(data, timestamp)來發送MIDI消息。data是一個包含MIDI數據的數組，timestamp是消息發送的時間戳。
let output; // 假設你已經獲取了輸出設備 // 發送一個Note On消息 output.send([0x90, 60, 127]); // 通道1，C4音符，力度127 // 稍等片刻 setTimeout(() => { // 發送一個Note Off消息 output.send([0x80, 60, 0]); // 通道1，C4音符，力度0 }, 1000);
如何解決Web MIDI API權限問題？
Web MIDI API需要用戶授權才能訪問MIDI設備，如果用戶拒絕授權，你的應用就無法工作。解決這個問題，首先要做好錯誤處理，當用戶拒絕授權時，給出友好的提示信息。其次，可以嘗試在用戶需要使用MIDI功能時才請求授權，而不是在應用啟動時就請求。最后，如果用戶之前拒絕過授權，你可以引導用戶到瀏覽器設置中手動開啟MIDI訪問權限。
Web MIDI API在音樂游戲開發中的應用有哪些？
Web MIDI API在音樂游戲開發中用途廣泛。比如，可以用它來接收MIDI鍵盤的輸入，實現鍵盤演奏游戲；也可以用它來控制游戲中的音效，讓游戲更加生動；還可以用它來同步游戲中的音樂和畫面，創造更具沉浸感的游戲體驗。甚至，你可以用它來實現一個在線的音樂創作工具，讓用戶通過MIDI設備創作音樂。
如何調試Web MIDI API相關的代碼？
調試Web MIDI API代碼，最常用的方法是使用瀏覽器的開發者工具。在chrome瀏覽器中，你可以打開開發者工具，切換到“Console”選項卡，查看控制臺輸出的信息。你可以在代碼中插入console.log()語句，輸出MIDI消息的內容，以便分析問題。另外，一些MIDI設備也會提供調試工具，可以用來監控MIDI消息的發送和接收情況。還可以使用一些在線的Web MIDI API測試工具，來驗證你的代碼是否正確。
