要檢測瀏覽器對midi設備的支持，首先使用navigator.requestmidiaccess()方法；1.檢查瀏覽器是否支持web midi api，通過判斷navigator對象是否存在該方法；2.調用該方法并處理promise返回的midiAccess對象，成功則可訪問輸入輸出設備，失敗則捕獲錯誤并提示用戶權限、https協議或設備兼容性問題；3.遍歷midiaccess.inputs和midiaccess.outputs列出所有設備信息，并監聽onstatechange事件以響應設備插拔；4.通過設置onmidimessage監聽器接收midi輸入消息，或調用send()方法向輸出設備發送midi數據。常見問題包括用戶拒絕授權、瀏覽器不支持、非https環境、設備連接異常或驅動缺失。應用場景涵蓋在線音樂制作、音樂教育、互動藝術、游戲娛樂、輔助技術和快速原型開發等領域。
在瀏覽器環境中檢測用戶的MIDI設備支持，主要依賴于Web MIDI API。簡單來說，我們通過嘗試調用navigator.requestMIDIAccess()方法來判斷。如果這個方法存在且能成功返回一個Promise，那么瀏覽器就具備了與MIDI設備交互的能力。這不僅涉及到瀏覽器自身的功能支持，還包括用戶是否授予了訪問權限。
解決方案
要檢測并嘗試訪問用戶的MIDI設備，核心就是使用 navigator.requestMIDIAccess()。這是一個基于Promise的方法，所以它的異步特性需要被妥善處理。
首先，你需要確保瀏覽器支持這個API。一個簡單的檢查是看navigator對象上是否存在requestMIDIAccess方法。
if (navigator.requestMIDIAccess) { console.log("瀏覽器支持Web MIDI API！"); navigator.requestMIDIAccess() .then(function(midiAccess) { // MIDI訪問成功！ console.log("成功獲取MIDI訪問權限。"); // 在這里可以進一步處理MIDI輸入/輸出設備 // 例如：midiAccess.inputs 和 midiAccess.outputs // 它們是MIDIPortmap對象，包含所有可用的MIDI設備 console.log("檢測到的MIDI輸入設備:", midiAccess.inputs); console.log("檢測到的MIDI輸出設備:", midiAccess.outputs); // 監聽設備狀態變化 (插入/拔出) midiAccess.onstatechange = function(event) { console.log('MIDI設備狀態改變:', event.port.name, event.port.state); }; }) .catch(function(error) { // MIDI訪問被拒絕或發生錯誤 console.error("無法獲取MIDI訪問權限:", error.code, error.name); if (error.name === "SecurityError") { console.warn("用戶可能拒絕了MIDI權限請求，或者頁面不是通過HTTPS加載。"); } else if (error.name === "NotSupportedError") { console.warn("瀏覽器可能支持API，但當前環境或設備不支持MIDI。"); } }); } else { console.warn("當前瀏覽器不支持Web MIDI API。請嘗試更新瀏覽器或使用其他瀏覽器。"); }
這段代碼首先檢查navigator.requestMIDIAccess是否存在。如果存在，就調用它。成功時，then回調會被觸發，并傳入一個MIDIAccess對象，通過它可以訪問到輸入和輸出設備。如果用戶拒絕權限或者發生其他錯誤，catch回調會被觸發，并提供錯誤信息。值得注意的是，Web MIDI API通常要求頁面通過HTTPS加載，否則可能會遇到SecurityError。
為什么我的MIDI設備沒有被檢測到？
遇到MIDI設備檢測不出來的情況，確實挺讓人抓狂的。這背后可能有幾個常見的原因，通常不是代碼寫錯了，而是環境配置或者用戶操作層面的問題。
一個最常見的原因是用戶權限。當你調用navigator.requestMIDIAccess()時，瀏覽器會彈出一個權限請求。如果用戶不小心點成了“拒絕”，或者根本沒注意到這個彈窗，那么你的應用就無法訪問MIDI設備。解決辦法是引導用戶重新授權，或者在后續操作中再次嘗試請求。
其次，瀏覽器兼容性也是個問題。雖然主流瀏覽器如chrome、edge、Opera對Web MIDI API支持較好，但firefox、safari在桌面端或移動端可能支持不完全，甚至完全不支持。所以，在開發前，最好查閱MDN或其他兼容性表格，了解目標用戶群的瀏覽器支持情況。
再來，HTTPS協議是關鍵。出于安全考慮，許多Web API，包括Web MIDI，都要求頁面必須通過HTTPS協議提供服務。如果你在本地開發，通常localhost會被視為安全上下文，可以直接測試。但部署到線上時，如果不是HTTPS，requestMIDIAccess會直接失敗，拋出SecurityError。
還有一種情況是，設備本身的問題。MIDI設備可能沒有正確連接到電腦（USB線松了？），或者被其他應用程序（比如DAW軟件）獨占了。有時候，簡單地拔插一下MIDI設備，或者重啟一下相關的應用程序，甚至電腦，就能解決問題。檢查一下操作系統的設備管理器，看看MIDI設備是否被正確識別。
最后，驅動問題也可能導致設備不被識別。雖然很多USB MIDI設備是免驅動的，但有些專業設備可能需要安裝特定的驅動程序才能被操作系統正確識別，進而才能被瀏覽器訪問。
檢測到MIDI設備后，如何列出和訪問它們？
一旦navigator.requestMIDIAccess()成功返回了midiAccess對象，你就擁有了與MIDI設備交互的門戶。midiAccess對象有兩個核心屬性：inputs和outputs。它們都是MIDIPortMap類型的對象，可以看作是包含了所有當前連接的MIDI輸入和輸出設備的Map集合。
要列出這些設備，你可以遍歷這兩個Map：
function onMIDISuccess(midiAccess) { console.log("MIDI訪問成功，正在列出設備..."); // 遍歷輸入設備 const inputs = midiAccess.inputs; if (inputs.size === 0) { console.log("沒有檢測到MIDI輸入設備。"); } else { inputs.forEach((entry) => { const port = entry; // entry就是MIDIPort對象 console.log(`輸入設備ID: ${port.id}, 名稱: ${port.name}, 制造商: ${port.manufacturer}, 狀態: ${port.state}`); // 如果你想接收MIDI消息，可以給輸入端口添加事件監聽器 // port.onmidimessage = handleMIDIMessage; }); } // 遍歷輸出設備 const outputs = midiAccess.outputs; if (outputs.size === 0) { console.log("沒有檢測到MIDI輸出設備。"); } else { outputs.forEach((entry) => { const port = entry; // entry就是MIDIPort對象 console.log(`輸出設備ID: ${port.id}, 名稱: ${port.name}, 制造商: ${port.manufacturer}, 狀態: ${port.state}`); // 如果你想發送MIDI消息，可以獲取到這個端口，然后調用 send() 方法 // 例如：outputPort.send([0x90, 60, 100]); // Note On C3, velocity 100 }); } // 監聽設備插拔事件 midiAccess.onstatechange = (event) => { const port = event.port; console.log(`設備狀態變化: ID: ${port.id}, 名稱: ${port.name}, 類型: ${port.type}, 狀態: ${port.state}`); // 當設備狀態從 'connected' 變為 'disconnected' 或反之，你可以更新UI }; } // 假設我們已經在之前調用了 navigator.requestMIDIAccess().then(onMIDISuccess).catch(...) // 這里只是展示 onMIDISuccess 函數的實現細節
每個MIDIPort對象都包含了一些有用的屬性，比如id（唯一標識符）、name（設備名稱）、manufacturer（制造商）、state（連接狀態：’connected’或’disconnected’）和type（’input’或’output’）。
要接收來自MIDI輸入設備的消息，你需要為對應的MIDIPort對象設置onmidimessage事件監聽器。這個監聽器會在每次收到MIDI消息時被調用，并傳入一個MIDIMessageEvent對象，其中包含了原始的MIDI數據（data屬性是一個Uint8Array）。
要向MIDI輸出設備發送消息，你需要獲取到對應的MIDIPort對象，然后調用它的send()方法，傳入一個MIDI消息的字節數組。例如，一個Note On消息通常是[狀態字節, 音符號, 速度]。
這種方式讓Web應用能夠實時地與用戶的物理MIDI控制器或合成器進行交互，開啟了無限的可能。
MIDI設備支持檢測在實際應用中有哪些場景？
Web MIDI API的出現，為瀏覽器端應用帶來了與硬件設備深度交互的能力，這在許多領域都開辟了全新的可能性。
最直觀的應用場景是在線音樂制作與教育平臺。想象一下，一個網頁版的數字音頻工作站（DAW），用戶可以直接連接自己的MIDI鍵盤、控制器，在瀏覽器里實時演奏、錄制、編輯音樂。對于音樂教育，學生可以通過MIDI鍵盤與網頁上的互動樂理課程進行實時互動，比如彈奏出正確的和弦，系統就能立即給出反饋。這比傳統的鼠標點擊或鍵盤輸入要自然和高效得多。
其次，互動藝術裝置和沉浸式體驗也是一個非常酷的方向。藝術家可以利用Web MIDI API，讓觀眾通過物理的MIDI控制器來觸發網頁上的視覺效果、音頻片段，甚至是控制機器人或燈光系統（結合WebSockets或其他技術）。這模糊了數字與物理世界的界限，創造出更具參與感的體驗。
再比如，游戲和娛樂應用。一些節奏游戲或者音樂創作類游戲，可以允許玩家連接自己的MIDI鼓機或鍵盤來增強游戲體驗。這不僅提升了游戲的沉浸感，也為有專業設備的用戶提供了更高級的玩法。
對于輔助技術而言，Web MIDI API也可能提供幫助。例如，為殘障人士設計的特殊輸入設備，如果能以MIDI信號的形式輸出，那么通過Web MIDI API，這些設備就能與各種網頁應用無縫集成，大大擴展了輔助工具的適用范圍。
最后，它也為原型開發和快速迭代提供了便利。開發者可以在瀏覽器中快速測試新的MIDI設備交互邏輯，而無需搭建復雜的桌面應用環境。這對于物聯網設備、新型交互界面等領域的探索，具有非常大的價值。能夠直接在瀏覽器里“玩轉”硬件，這種體驗本身就足夠吸引人了。
