WebMidi.js开发者指南：从安装配置到高级API调用的完整路线图-CSDN博客

WebMidi.js开发者指南：从安装配置到高级API调用的完整路线图

【免费下载链接】webmidi Tame the Web MIDI API. Send and receive MIDI messages with ease. Control instruments with user-friendly functions (playNote, sendPitchBend, etc.). React to MIDI input with simple event listeners (noteon, pitchbend, controlchange, etc.). 项目地址: https://gitcode.com/gh_mirrors/we/webmidi

WebMidi.js是一个强大的JavaScript库，让开发者能够轻松地在网页中处理MIDI消息。通过它，你可以发送和接收MIDI消息，使用友好的函数（如playNote、sendPitchBend等）控制乐器，并通过简单的事件监听器（如noteon、pitchbend、controlchange等）响应MIDI输入。本指南将帮助你快速掌握WebMidi.js的安装配置和高级API调用，开启你的Web MIDI开发之旅。

快速了解WebMidi.js

WebMidi.js旨在简化Web MIDI API的使用，让开发者能够更专注于创意开发而非底层实现。它提供了直观的API，使得与MIDI设备的交互变得简单。无论是构建音乐应用、交互艺术装置还是音乐教育工具，WebMidi.js都能为你提供强大的支持。

安装WebMidi.js的三种简单方法

通过CDN快速引入

最简单的开始方式是直接从jsDelivr CDN链接库：

<script src="https://cdn.jsdelivr.net/npm/webmidi@latest/dist/iife/webmidi.iife.js"></script>

你可以通过修改URL来获取不同版本和格式的库文件，例如：

/dist/cjs/webmidi.cjs.js (CommonJS模块)
/dist/esm/webmidi.esm.js (ES6模块)
/dist/iife/webmidi.iife.min.js (压缩的IIFE版本)

手动下载安装

你也可以手动下载库文件，将其放置在项目中合适的位置，然后在HTML中链接：

<script src="path/to/webmidi.iife.js"></script>

使用NPM安装

对于Node.js项目或使用构建工具的前端项目，推荐使用NPM安装：

npm install webmidi

安装后，可以根据你的环境选择不同的引入方式：

IIFE（浏览器全局变量）：

<script src="node_modules/webmidi/dist/iife/webmidi.iife.js"></script>

CommonJS（Node.js传统方式）：

const {WebMidi} = require("webmidi");

ES Module（现代浏览器和Node.js）：

// 浏览器
import {WebMidi} from "./node_modules/webmidi/dist/esm/webmidi.esm.min.js";

// Node.js
import {WebMidi} from "webmidi";

⚠️ 注意：从Chrome 77开始，Web MIDI API在不安全的源上被禁用。确保你的页面通过https://、localhost:或file:///协议访问。

启用WebMidi.js并列出设备

使用WebMidi.js的第一步是启用库。从版本3开始，enable()方法返回一个Promise：

WebMidi
  .enable()
  .then(() => console.log("WebMidi enabled!"))
  .catch(err => alert(err));

如果需要使用MIDI系统独占消息，需要显式启用：

WebMidi
  .enable({sysex: true})
  .then(() => console.log("WebMidi with sysex enabled!"))
  .catch(err => alert(err));

启用后，可以列出可用的MIDI设备：

function onEnabled() {
  // 列出输入设备
  WebMidi.inputs.forEach(input => console.log(input.manufacturer, input.name));
  
  // 列出输出设备
  WebMidi.outputs.forEach(output => console.log(output.manufacturer, output.name));
}

你可以通过名称或ID获取特定设备的引用：

const myInput = WebMidi.getInputByName("MPK mini 3");
const myOutput = WebMidi.getOutputByName("SP-404MKII");

监听MIDI输入事件

WebMidi.js允许你轻松监听各种MIDI输入事件。你可以在整个输入设备上监听，也可以在特定的MIDI通道上监听。

监听整个设备的事件

const myInput = WebMidi.getInputByName("MPK mini 3");
myInput.addListener("noteon", e => {
  console.log(`Note on: ${e.note.name}${e.note.octave}`);
});

监听特定通道的事件

MIDI设备有16个通道（1-16）。你可以只监听特定通道的事件：

const myInput = WebMidi.getInputByName("MPK mini 3");
const channel = myInput.channels[10]; // 监听第10通道
channel.addListener("noteon", e => {
  console.log(`Note on: ${e.note.name}${e.note.octave} on channel 10`);
});

监听多个通道的事件

你还可以同时监听多个通道的事件：

WebMidi.inputs[0].addListener("controlchange", e => {
  console.log(`Control change on channel ${e.message.channel}`);
}, {channels: [1, 2, 3]}); // 监听通道1、2、3

发送MIDI消息

WebMidi.js提供了简单的方法来发送各种MIDI消息，从基本的音符播放到复杂的控制变化。

播放音符

最常用的功能之一是播放音符。你可以在特定通道上播放单个音符：

const output = WebMidi.getOutputByName("SP-404MKII");
const channel = output.channels[1];
channel.playNote("C3");

或者一次播放多个音符（和弦）：

channel.playNote(["C3", "E3", "G3"]); // C大和弦

控制音符属性

你可以控制音符的力度、持续时间等属性：

// 控制力度（0-1之间的值）
channel.playNote("C3", {attack: 0.75});

// 使用原始MIDI力度值（0-127）
channel.playNote("C3", {rawAttack: 100});

// 设置持续时间（毫秒）
channel.playNote("C3", {duration: 2000});

调度音符播放

你可以安排音符在未来的特定时间播放：

// 3秒后播放
channel.playNote("C3", {time: WebMidi.time + 3000});

// 2秒后播放（相对时间）
channel.playNote("C3", {time: "+2000"});

发送控制变化消息

你可以发送控制变化（CC）消息来控制各种MIDI设备参数：

// 使用控制器编号
channel.sendControlChange(7, 64); // 音量控制（CC 7）设为64

// 使用控制器名称
channel.sendControlChange("volumecoarse", 123);

发送弯音消息

弯音消息用于改变音符的音高：

// 值范围从-1到1（0表示无弯音）
channel.sendPitchBend(-0.5); // 降低音高

链式方法调用

大多数方法返回this，所以你可以链式调用多个方法：

channel
  .sendPitchBend(-0.25)
  .playNote("F4")
  .sendControlChange("modulation", 100);

高级功能和最佳实践

管理事件监听器

你可以检查是否存在特定的事件监听器：

const test = e => console.log(e);
channel.addListener('programchange', test);
console.log("Has event listener:", channel.hasListener('programchange', test));

也可以移除监听器：

channel.removeListener("noteoff", test); // 移除特定监听器
channel.removeListener("noteoff"); // 移除所有noteoff监听器
channel.removeListener(); // 移除所有监听器

处理多个设备和通道

WebMidi.js使同时处理多个MIDI设备和通道变得容易。你可以遍历所有输入和输出设备，并为每个设备设置不同的处理逻辑。

使用TypeScript

WebMidi.js提供了TypeScript声明文件，使在TypeScript项目中使用更加方便。你可以在typescript/webmidi.d.ts找到类型定义。

示例项目

WebMidi.js提供了多个示例项目，展示了在不同环境中的使用方法：

Electron应用：examples/electron/basic-example/
Next.js应用：examples/next.js/basic-example/
p5.js创意项目：examples/p5.js/
React应用：examples/react/basic-example/
TypeScript示例：examples/typescript/basic-nodejs-example/

总结

WebMidi.js为开发者提供了一个简单而强大的接口，使在网页中处理MIDI变得轻松。从安装配置到高级API调用，本指南涵盖了使用WebMidi.js开发MIDI应用所需的基础知识。无论你是构建音乐应用、交互艺术还是教育工具，WebMidi.js都能帮助你快速实现创意。

要深入了解WebMidi.js的所有功能，请查阅完整的API文档。如果你有任何问题或需要帮助，可以在项目的GitHub讨论区提问。祝你在Web MIDI开发的旅程中取得成功！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考