// 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 + ""; }, "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 = ""; seq.play(); } else { document.getElementById("pause").innerHTML = ""; 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 }); });