// 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
});
});