How to convert playing MIDI files to MP3 or WAV format and provide download functionality?

[XiangCoder]

Hello!

I'm developing a music-related web application using html-midi-player, and I really appreciate the excellent MIDI playback functionality provided by this library.

I currently have a requirement: I want to be able to convert the MIDI files being played to audio formats like MP3 or WAV, and allow users to download the converted files. However, I couldn't find relevant APIs or usage examples in the documentation.

I'd like to ask:

1. Does the library have built-in functionality for converting MIDI to MP3/WAV?
2. If not, are there any recommended methods or tools that can work with html-midi-player to achieve this?
3. Could you provide a simple implementation example or思路?

Thank you very much for your time and help!

[cifkao]

Thanks for the question! I'm afraid there is no such built-in functionality, but there might be a way to make it work.

html-midi-player is based on @magenta/music, which internally uses Tone.js to play sounds (see player.ts and soundfont.ts in @magenta/music).

What I found to work is to route Tone.Destination to a Tone.Recorder instance, then trigger playback, wait until it's finished, then retrieve the recorded audio file:

// Start recording and playback
const recorder = new Tone.Recorder();
Tone.Destination.connect(recorder);  // or: Tone.Master.connect(recorder);
recorder.start();
player.start();

// Wait for the playback to stop
player.addEventListener("stop", () => {
    // Stop the recorder
    recorder.stop().then((recording) => {
        // Get the recorded audio as a blob URL
        const url = URL.createObjectURL(recording);

        // Trigger download
        const link = document.createElement("a");
        link.download = "recording.webm";
        link.href = url;
        link.click();
    });
})

You could mute the playback while waiting for the recording to complete, but the user would still have to wait.

If you don't want to wait for the file to be played back, you would need to use Tone.Offline or Tone.OfflineContext, but I don't know how exactly to do this or if it would even work. Please let me know if you find a solution!