File size: 3,442 Bytes
207de7c 3878037 207de7c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
// 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
});
});
|