LiteGraph.js与Web MIDI设备能力查询节点-优快云博客

LiteGraph.js与Web MIDI设备能力查询节点

【免费下载链接】litegraph.js A graph node engine and editor written in Javascript similar to PD or UDK Blueprints, comes with its own editor in HTML5 Canvas2D. The engine can run client side or server side using Node. It allows to export graphs as JSONs to be included in applications independently. 项目地址: https://gitcode.com/gh_mirrors/li/litegraph.js

你是否曾在网页应用中需要连接MIDI键盘或控制器，却苦于无法快速获取设备信息？是否在构建音乐交互应用时，希望直观地查看和管理MIDI输入输出设备？本文将带你了解如何使用LiteGraph.js的MIDI节点，轻松实现Web MIDI设备的能力查询与管理，让音乐交互开发变得简单高效。读完本文，你将能够：创建MIDI设备查询节点、连接并显示MIDI设备信息、构建简单的MIDI事件处理流程。

MIDI节点模块概述

LiteGraph.js的MIDI功能主要通过src/nodes/midi.js模块实现，该模块提供了完整的MIDI事件处理和设备管理能力。核心包含四大节点类型，形成了从设备接入到事件处理的完整工作流：

MIDI Input：负责从物理MIDI设备接收输入信号
MIDI Output：用于向MIDI设备发送控制信号
MIDI Filter：过滤特定类型的MIDI事件
MIDI Show：可视化展示MIDI事件内容

这些节点通过统一的MIDI事件格式进行通信，事件结构定义在MIDIEvent类中，包含通道、命令类型和数据等关键信息。

设备能力查询实现原理

MIDI设备查询的核心实现位于MIDIInterface类中，通过Web MIDI API提供的navigator.requestMIDIAccess()方法获取系统中的MIDI设备列表。关键代码如下：

function MIDIInterface(on_ready, on_error) {
    if (!navigator.requestMIDIAccess) {
        this.error = "not supported";
        // 错误处理...
        return;
    }
    
    navigator.requestMIDIAccess().then(this.onMIDISuccess.bind(this), this.onMIDIFailure.bind(this));
}

MIDIInterface.prototype.onMIDISuccess = function(midiAccess) {
    this.midi = midiAccess;
    this.updatePorts();  // 更新设备端口列表
    if (this.on_ready) {
        this.on_ready(this);
    }
};

MIDIInterface.prototype.updatePorts = function() {
    // 枚举所有输入端口
    var it = this.input_ports.values();
    var it_value = it.next();
    while (it_value && it_value.done === false) {
        var port_info = it_value.value;
        this.input_ports_info.push(port_info);
        console.log( "Input port [type:'" + port_info.type + "'] id:'" + port_info.id + "' manufacturer:'" + port_info.manufacturer + "' name:'" + port_info.name + "' version:'" + port_info.version + "'" );
        it_value = it.next();
    }
    
    // 枚举所有输出端口（代码类似）
};

这段代码实现了MIDI设备的自动发现功能，当创建MIDIInterface实例时，会请求用户授权访问MIDI设备，成功后更新端口信息并触发回调函数。

设备查询节点使用指南

创建MIDI输入节点

在LiteGraph.js编辑器中，首先添加"MIDI Input"节点(src/nodes/midi.js第467-591行)，该节点会自动检测并列出系统中的MIDI输入设备。节点创建后，你可以在属性面板中选择要使用的MIDI端口：

function LGMIDIIn() {
    this.addOutput("on_midi", LiteGraph.EVENT);
    this.addOutput("out", "midi");
    this.properties = { port: 0 };
    
    var that = this;
    new MIDIInterface(function(midi) {
        that._midi = midi;
        // 端口信息就绪后更新UI
    });
}

// 注册节点类型
LiteGraph.registerNodeType("midi/input", LGMIDIIn);

设备列表展示

MIDI输入节点的getPropertyInfo方法会动态生成设备列表，供用户选择：

LGMIDIIn.prototype.getPropertyInfo = function(name) {
    if (name == "port" && this._midi) {
        var values = {};
        for (var i = 0; i < this._midi.input_ports_info.length; ++i) {
            var input = this._midi.input_ports_info[i];
            values[i] = i + ".- " + input.name + " version:" + input.version;
        }
        return { type: "enum", values: values };
    }
};

选择设备后，节点会显示设备名称和版本信息，方便用户确认当前连接的设备。

设备信息可视化

为了更直观地展示MIDI设备信息，我们可以使用"MIDI Show"节点(src/nodes/midi.js第662-707行)，它能将接收到的MIDI事件格式化显示：

function LGMIDIShow() {
    this.addInput("on_midi", LiteGraph.EVENT);
    this._str = "";
    this.size = [200, 40];
}

LGMIDIShow.prototype.onAction = function(event, midi_event) {
    if (midi_event.constructor === MIDIEvent) {
        this._str = midi_event.toString();  // 格式化事件信息
    }
};

将MIDI Input节点的"on_midi"输出连接到MIDI Show节点的输入，即可实时显示设备发送的MIDI事件内容。

常见问题与解决方案

设备无法识别

如果MIDI设备未被识别，请检查：

设备是否已正确连接并开启电源
浏览器是否支持Web MIDI API（Chrome和Edge支持较好）
是否授予了网页访问MIDI设备的权限
尝试重启浏览器或设备

延迟问题处理

对于需要低延迟的音乐应用，可以通过调整MIDI事件处理逻辑来优化：

// 在MIDI输入节点中优化事件处理
LGMIDIIn.prototype.onMIDIEvent = function(data, midi_event) {
    this._last_midi_event = midi_event;
    this.trigger("on_midi", midi_event);  // 优先触发事件
    // 其他处理逻辑...
};

多设备管理

当系统中存在多个MIDI设备时，可以通过"MIDI Filter"节点(src/nodes/midi.js第708-815行)筛选特定设备的事件：

LGMIDIFilter.prototype.onAction = function(event, midi_event) {
    // 根据通道、命令类型等过滤事件
    if (this.properties.channel != -1 && midi_event.channel != this.properties.channel) {
        return;
    }
    // 其他过滤条件...
    this.trigger("on_midi", midi_event);  // 仅触发符合条件的事件
};

高级应用示例

下面是一个完整的MIDI设备测试流程，展示如何查询设备、发送和接收MIDI事件：

创建"MIDI Input"节点，选择你的MIDI控制器
创建"MIDI Filter"节点，设置过滤条件（如只接收NOTEON事件）
创建"MIDI Event"节点，配置一个NOTEON事件
创建"MIDI Output"节点，选择你的合成器或音源设备
连接节点：Input → Filter → Show，同时将Event节点连接到Output节点
点击MIDI Event节点的"send"输入，发送测试音符

通过这个简单的流程，你可以快速测试MIDI设备的输入输出能力，为更复杂的音乐应用奠定基础。

总结与展望

LiteGraph.js的MIDI节点模块为Web音乐应用开发提供了强大支持，通过直观的节点式编程，即使没有深入的MIDI协议知识，也能快速实现专业的音乐交互功能。未来，随着Web MIDI API的普及和浏览器支持的完善，我们可以期待更多创新的音乐交互应用出现。

鼓励你尝试扩展MIDI节点功能，比如添加MIDI时钟同步、 SysEx消息处理等高级特性，为开源社区贡献力量。如果你有任何问题或建议，欢迎通过项目的CONTRIBUTING.md文档中提供的方式参与讨论。

希望本文能帮助你更好地利用LiteGraph.js的MIDI功能，创造出令人惊艳的音乐交互应用！

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