React/Next.js网站MIDI播放优化与格式转换技术咨询

问题背景 #

基于Next.js的React网站，通过API生成MIDI续段并获取云端URL，使用Tone.js构建的播放器存在多乐器重叠、鼓点尖锐机械噪音的问题。

1. 可自定义的MIDI播放替代方案 #

• Web MIDI API + 外部音源：原生Web API，可访问浏览器内置或外接MIDI音源，支持完整乐器映射，自定义性强，需处理音源加载和轨道分配。
• SoundFont加载方案：结合Tone.js或MIDI.js加载通用MIDI SoundFont（如General MIDI库），为不同轨道分配对应乐器音色，解决单一合成器的音色问题。
• 专用MIDI播放库：如midi-player-js，内置轨道分离和音色映射，支持自定义音源，只需传入MIDI URL即可处理多乐器播放。
• Web Audio API + MIDI解析：用@tonejs/midi解析MIDI后，为每个轨道创建独立AudioNode（如采样器、合成器），手动处理轨道混音，完全自定义播放逻辑。

2. 代码产生不和谐音效的原因 #

从你的代码来看，核心问题在于忽略了MIDI的轨道和乐器特性：

• 单一合成器处理所有轨道：代码中所有MIDI轨道的音符都用同一个Tone.PolySynth播放，而MIDI不同轨道对应不同乐器（钢琴、吉他、鼓等），单一合成器无法区分，导致所有乐器音色重叠。
• 鼓点处理错误：MIDI鼓点通常在第10通道（GM标准），音符对应打击乐采样而非音高，但代码中将鼓点音符当作普通音高用Tone.Synth播放，产生尖锐的正弦波噪音。
• 合成器参数不通用：设置的envelope参数（attack=0.02等）适合短音高乐器，但不适合鼓点和持续音乐器，导致音色怪异。
• 轨道信息丢失：代码中flatMap(track => track.notes)丢失了轨道的乐器编号（program number）和通道信息，无法区分乐器类型。

3. MIDI转WAV的可行性与实现方案 #

转成WAV等音频格式是更稳定的方案，可避免客户端音源差异，实现方式分两种：

服务器端转换（推荐）

• 工具/库：使用ffmpeg直接转换MIDI到WAV（需安装MIDI音源如FluidSynth），或用Node.js库如midi2wav、fluent-ffmpeg调用ffmpeg命令。
• 流程：API生成MIDI后，在服务器端调用转换工具生成WAV，上传云端后返回WAV URL给网站，直接用HTML5 audio播放即可。

客户端转换

• Tone.js实现：用Tone.Recorder录制合成器输出，或使用OfflineAudioContext离线渲染MIDI到音频缓冲区，再导出WAV。
• 示例逻辑：

  const renderMidiToWav = async (midi) => {
    const context = new OfflineAudioContext(2, 44100 * midi.duration, 44100);
    // 为每个轨道创建对应合成器/采样器并连接到context
    // 调度所有音符播放
    const buffer = await context.startRendering();
    // 将buffer转换为WAV blob
  };
  

代码优化建议（针对当前播放器） #

要解决现有问题，需修改代码处理轨道和乐器：

1. 保留轨道信息：加载MIDI时保留轨道的program和channel字段：

   notesRef.current = midi.tracks.flatMap(track => 
     track.notes.map(note => ({
       time: note.time,
       note: note.name,
       duration: note.duration,
       velocity: note.velocity,
       program: track.instrument?.number,
       channel: track.channel
     }))
   );
   

2. 区分打击乐轨道：通道10为打击乐，使用采样器加载鼓点样本而非合成器：

   const drumSampler = new Tone.Sampler({
     "C3": "kick.wav",
     "D3": "snare.wav"
     // 映射更多鼓点样本
   }).toDestination();
   

3. 多合成器分配：为不同乐器类型创建对应合成器或采样器，根据轨道program分配音色。

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