前言
现在的网络应用程序通常需要音乐和声音的支持。Web MIDI API是一个非常好的API，可以让你的应用程序控制硬件MIDI设备，但是这个API并不是所有浏览器都支持，这就需要一个解决方案。web-midi-api-shim就是这样一个解决方案，它可以使不支持Web MIDI API的浏览器能够使用Web MIDI API。
安装
首先，你需要在你的项目中安装web-midi-api-shim。你可以使用npm进行安装。
npm install web-midi-api-shim
使用
在你的应用程序中，你需要使用以下代码来打开MIDI设备连接。
-- -------------------- ---- -------
------------------------------------------------- ---------------
-------- ------------------------- -
--- ------ - ------------------
--- ------- - -------------------
-- ---
-
-------- ------------------ -
------------------- -- --- ---- ------ - - - -----
-但是，在不支持Web MIDI API的浏览器中，这段代码将无法正常工作。这时，你需要使用web-midi-api-shim来启用Web MIDI API。
首先，你需要将web-midi-api-shim包含在你的HTML文件中。
<script src="node_modules/web-midi-api-shim/web-midi-api-shim.min.js"></script>
然后，你需要在你的JavaScript代码中初始化web-midi-api-shim。
WebMidi.enable(function(err) {
if (err) {
console.log("WebMidi could not be enabled.", err);
} else {
console.log("WebMidi is enabled!");
}
});在这个例子中，我们使用WebMidi.enable()函数来初始化web-midi-api-shim。如果出现错误，它将返回一个错误对象。如果没有出现错误，则表示web-midi-api-shim已经成功启用。
你还需要将你的requestMIDIAccess代码修改为以下代码。
WebMidi.enable(function(err) {
if (err) {
console.log("WebMidi could not be enabled.", err);
} else {
navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);
}
});现在你已经成功地启用了Web MIDI API。在不支持Web MIDI API的浏览器中，web-midi-api-shim将自动模拟MIDI设备连接。
示例代码
这是一个简单的例子，用于演示如何使用web-midi-api-shim。它使用了Web MIDI API来控制一个虚拟的MIDI设备，并触发一些简单的MIDI事件。
-- -------------------- ---- -------
----------------------- ----- -
-- ----- -
-------------------- ----- --- -- ---------- -----
- ---- -
--- ------ - ----------------------------- ---------
--------------------- ---- ---
--------------------- ---- ---
--------------------- ---- ---
--------------------- ---- ---
--------------------- ---- ---
--------------------- ---- ---
-
---总结
在非常近年的时间里，Web MIDI API已经成为一项新的技术，它可以让我们通过浏览器控制硬件MIDI设备。但是一些老的浏览器并不支持Web MIDI API，web-midi-api-shim就是解决这个问题的一个好方式。在这篇文章中，我们提供了详细的安装和使用指导，并给出了一个简单的例子。希望这篇文章对你有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b41c6eb7e50355dbd05