浏览器中无法使用MidiPlayerJS库的解决方案咨询

问题根源 #

MidiPlayerJS的loadFile方法依赖Node.js的fs模块读取本地文件路径，浏览器环境没有文件系统访问权限，因此直接调用该方法必然报错。浏览器端需要改用对应API加载MIDI文件。

浏览器端正确使用方式 #

根据你的使用场景（本地文件上传/远程文件加载），选择以下方案：

1. 处理用户上传的本地MIDI文件

通过HTML文件选择器获取文件，再用FileReader将文件转为DataURL或ArrayBuffer，传给MidiPlayerJS的浏览器端加载方法：

<!-- HTML部分：文件选择输入框 -->
<input type="file" accept=".mid,.midi" id="midiUpload">

// ES6导入（npm安装后）
import MidiPlayer from 'midi-player-js';

// 或CDN引入后直接使用全局变量MidiPlayer
// const MidiPlayer = window.MidiPlayer;

// 初始化Player，传入事件回调记录所有MIDI事件
const midiPlayer = new MidiPlayer.Player((event) => {
  // 这里处理你需要记录的事件，比如打印或存储
  console.log('MIDI事件:', event);
});

// 监听文件选择事件
document.getElementById('midiUpload').addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  const reader = new FileReader();
  reader.onload = (loadEvent) => {
    // 用DataURL加载文件
    midiPlayer.loadDataUri(loadEvent.target.result);
    // 启动播放（播放过程中会持续触发事件回调）
    midiPlayer.play();
  };
  // 将文件转为DataURL
  reader.readAsDataURL(selectedFile);
});

2. 加载远程MIDI文件

通过fetch获取远程文件的ArrayBuffer，再用loadArrayBuffer方法加载：

const midiPlayer = new MidiPlayer.Player((event) => {
  console.log('MIDI事件:', event);
});

fetch('/path/to/your/midi/file.mid') // 替换为你的远程MIDI文件地址
  .then(res => res.arrayBuffer())
  .then(buffer => {
    midiPlayer.loadArrayBuffer(buffer);
    midiPlayer.play();
  })
  .catch(err => console.error('加载失败:', err));

补充说明 #

• Three.js之所以能正常本地导入，是因为它的浏览器端API和Node.js做了环境适配，而MidiPlayerJS的loadFile是明确为Node.js设计的方法。
• 若需要暂停/停止播放，可调用midiPlayer.pause()或midiPlayer.stop()方法。

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