play-midi.js

// Import the modules
import {
    WORKLET_URL_ABSOLUTE
} from "./spessasynth_lib/synthetizer/worklet_url.js";
import {
    Sequencer
} from "./spessasynth_lib/sequencer/sequencer.js";
import {
    Synthetizer
} from "./spessasynth_lib/synthetizer/synthetizer.js";

// Load the soundfont
fetch(
    "./spessasynth_lib/soundfonts/GeneralUserGS.sf3"
).then(async (response) => {
    // Load the soundfont into an array buffer
    let soundFontBuffer = await response.arrayBuffer();
    document.getElementById("message").innerText = "O PLAY MIDI FOI CARREGADO!";

    // Create the context and add audio worklet
    const context = new AudioContext();
    await context.audioWorklet.addModule(
        new URL(
            "./spessasynth_lib/" +
            WORKLET_URL_ABSOLUTE,
            import.meta.url
        )
    );

    // Create a GainNode to control the volume
    const gainNode = context.createGain();
    gainNode.connect(context.destination);

    const synth = new Synthetizer(gainNode, soundFontBuffer); // Connect the synth to the gain node
    let seq;

    // Add an event listener for the file input
    document
        .getElementById("midi_input")
        .addEventListener("change", async (event) => {
            if (!event.target.files[0]) {
                return;
            }
            await context.resume();

            const parsedSongs = [];
            for (let file of event.target.files) {
                const buffer = await file.arrayBuffer();
                parsedSongs.push({
                    binary: buffer,
                    altName: file.name
                });
            }

            if (seq === undefined) {
                seq = new Sequencer(parsedSongs, synth);
                seq.play();
            } else {
                seq.loadNewSongList(parsedSongs);
            }

            seq.loop = false;

            // Make the slider move with the song
            let slider = document.getElementById("progress");
            setInterval(() => {
                slider.value = (seq.currentTime / seq.duration) * 1000;
            }, 100);

            seq.addOnSongChangeEvent((e) => {
          document.getElementById("message").innerHTML =
            "Tocando agora: " + e.midiName + "<img type='button 'title='CAPA' src='./d-framework/icon/144/favicon.png' class='img-thumbnail rounded-circle border-2 p-0 bg-hover border-warning ms-2' width='40' height='40' />";
        }, "example-time-change");

            slider.onchange = () => {
                seq.currentTime = (slider.value / 1000) * seq.duration;
            };

            document.getElementById("previous").onclick = () => {
                seq.previousSong();
            };

            document.getElementById("pause").onclick = () => {
          if (seq.paused) {
            document.getElementById("pause").innerHTML = "<i class='bi bi-pause'></i>";
            seq.play();
          } else {
            document.getElementById("pause").innerHTML = "<i class='bi bi-play'></i>";
            seq.pause();
          }
            };

            document.getElementById("next").onclick = () => {
                seq.nextSong();
            };
        });

    // Add volume control
    const volumeControl = document.getElementById("volume");
    volumeControl.addEventListener("input", () => {
        gainNode.gain.value = parseFloat(volumeControl.value); // Adjust the volume
    });
});