使用Midi-Js播放MIDI文件异常：点击按钮无响应求助

我编写了一段点击按钮启动MIDI播放的JavaScript代码，但无法正常运行。点击按钮后没有任何反应，请问有人能排查问题原因吗？

function startMidiPlayback() {
  console.log("pepe");
  MIDI.loadPlugin({
    soundfontUrl: "https://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/",
    instrument: "piano",
    onsuccess: function() {
      MIDI.Player.loadFile({
        url: "testo.mid",
        soundfont: "soundfont.dls",
        onsuccess: function() {
          MIDI.Player.start();
        }
      });
    }
  });
}

// Wait for the DOM to be fully loaded
document.addEventListener("DOMContentLoaded", function() {
  // Add an event listener to the button
  const playButton = document.getElementById("playButton");
  playButton.addEventListener("click", startMidiPlayback);
});

可能的问题点及修复方案 #

• DOM元素获取失败：如果页面中不存在id="playButton"的按钮，playButton会返回null，调用addEventListener会直接报错。先检查页面是否有对应按钮，或者添加空值判断避免报错：

  const playButton = document.getElementById("playButton");
  if (playButton) {
    playButton.addEventListener("click", startMidiPlayback);
  } else {
    console.error("未找到id为playButton的元素");
  }
  

• MIDI文件路径错误：testo.mid的路径是否正确？如果文件不在当前页面的同级目录，需要填写完整的相对路径或绝对路径，否则会加载失败。可以打开浏览器开发者工具的Network面板，查看该文件的请求状态是否为404。
• MIDI.Player.loadFile参数错误：soundfont参数是多余的，MIDI.js会自动使用MIDI.loadPlugin中配置的soundfont资源，去掉该参数即可：

  MIDI.Player.loadFile({
    url: "testo.mid",
    onsuccess: function() {
      MIDI.Player.start();
    }
  });
  

• 缺少错误处理回调：代码中没有捕获加载过程的错误，添加onerror回调可以快速定位问题：
  在MIDI.loadPlugin中添加错误回调：

  MIDI.loadPlugin({
    soundfontUrl: "https://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/",
    instrument: "piano",
    onsuccess: function() { /* ... */ },
    onerror: function(err) {
      console.error("加载MIDI插件失败:", err);
    }
  });
  

  在MIDI.Player.loadFile中添加错误回调：

  MIDI.Player.loadFile({
    url: "testo.mid",
    onsuccess: function() { /* ... */ },
    onerror: function(err) {
      console.error("加载MIDI文件失败:", err);
    }
  });
  

• 浏览器自动播放限制：现代浏览器对音频自动播放有严格限制，虽然代码是通过按钮点击触发，但如果MIDI资源加载耗时过久，可能导致音频上下文失活。可以在MIDI.Player.start()前手动激活音频上下文：

  // 在start前添加
  if (MIDI.audioContext.state === 'suspended') {
    MIDI.audioContext.resume();
  }
  MIDI.Player.start();
  

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