midicube（MIDI.js新版本）audioDetect.js报错排查求助

错误原因 #

你遇到的Cannot read properties of null (reading 'appendChild')和removeChild错误，核心原因是脚本执行时机过早：midicube的audioDetect模块尝试向document.body添加音频检测元素，但你的脚本可能在<body>标签加载完成前就运行了，此时document.body为null，导致DOM操作失败。

另外，midicube最后一次提交在3年前，确实存在浏览器API兼容性过时的问题——现代浏览器对音频上下文、DOM操作的时机要求更严格，旧版本库的逻辑可能不再适配。

修复步骤 #

1. 调整脚本执行时机 #

把脚本放到<body>标签末尾，或者用DOMContentLoaded事件包裹，确保DOM加载完成后再初始化：

<body>
  <!-- 页面内容 -->
  <script src="releases/midicube.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      MIDI.loadPlugin({
        soundfontUrl: "./examples/soundfont/",
        onerror: console.warn,
        onsuccess: () => {
          MIDI.noteOn(0, 60, 127); // 注意：音量参数建议设127（设0会静音）
        }
      });
    });
  </script>
</body>

2. 备选方案：更换维护活跃的MIDI库 #

如果调整时机后仍有兼容性问题，建议替换为适配现代浏览器的活跃库，比如：

• 直接使用Web MIDI API（需用户授权MIDI设备）
• SoundfontPlayer（基于Web Audio API，轻量且维护更新及时）

总结 #

你的操作存在脚本执行时机的小问题，但midicube的过时也是导致错误的重要因素。先调整脚本位置尝试修复，若仍有问题，建议换用更现代的方案。

内容的提问来源于stack exchange，提问作者root