如何使用Tone.JS播放MIDI文件？求相关代码示例

首先你需要用到@tonejs/midi库来把MIDI文件解析成Tone.js可识别的结构，先安装依赖：

npm install tone @tonejs/midi

下面是完整的可运行代码片段，包含MIDI文件加载、解析和播放的全流程：

import Tone from 'tone';
import { Midi } from '@tonejs/midi';

// 等待用户交互（浏览器音频政策要求必须由用户触发音频上下文）
document.querySelector('#play-btn').addEventListener('click', async () => {
  // 启动Tone.js音频上下文
  await Tone.start();

  // 加载并解析MIDI文件
  const midiResponse = await fetch('./your-midi-file.mid');
  const midiArrayBuffer = await midiResponse.arrayBuffer();
  const midi = new Midi(midiArrayBuffer);

  // 创建合成器作为音源
  const synth = new Tone.Synth().toDestination();

  // 遍历MIDI的音轨，安排每个音符的播放
  midi.tracks.forEach(track => {
    track.notes.forEach(note => {
      // 在指定时间触发音符，持续对应时长
      synth.triggerAttackRelease(
        note.name, // 音符名称，比如"C4"
        note.duration, // 音符时长
        note.time, // 音符触发时间（相对于音轨起始）
        note.velocity // 音量
      );
    });
  });

  // 开始播放
  Tone.Transport.start();
});

关键说明： #

• 必须通过用户交互（比如点击按钮）启动Tone.js的音频上下文，这是浏览器的音频安全政策要求，否则会报错。
• @tonejs/midi会把MIDI文件解析成包含音轨、音符、tempo等信息的结构化数据，你可以通过midi.tracks、midi.header等属性访问更多细节。
• 如果需要更复杂的音色，可以把Tone.Synth换成其他音源，比如Tone.PolySynth或者采样器Tone.Sampler。
• 注意MIDI文件的路径要正确，确保在项目中可以正常访问到。

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