diff --git a/.gitattributes b/.gitattributes index a6344aac8c09253b3b630fb776ae94478aa0275b..5731dade63692ea6b22efe9e64998e93f8a9ee4e 100644 --- a/.gitattributes +++ b/.gitattributes @@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text *.zip filter=lfs diff=lfs merge=lfs -text *.zst filter=lfs diff=lfs merge=lfs -text *tfevents* filter=lfs diff=lfs merge=lfs -text +spessasynth_lib/soundfonts/GeneralUserGS.sf3 filter=lfs diff=lfs merge=lfs -text diff --git a/394.mid b/394.mid new file mode 100644 index 0000000000000000000000000000000000000000..f199613373382465f0366f25f234a772bd6695be Binary files /dev/null and b/394.mid differ diff --git a/advanced_demo.js b/advanced_demo.js new file mode 100644 index 0000000000000000000000000000000000000000..43a98ff730e61f8b3d0672dd617a4919bf82697d --- /dev/null +++ b/advanced_demo.js @@ -0,0 +1,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 = "SoundFont has been loaded!"; + + // 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)); + const synth = new Synthetizer(context.destination, soundFontBuffer); // create the synthetizer + let seq; + + // add an event listener for the file inout + document.getElementById("midi_input").addEventListener("change", async event => + { + // check if any files are added + if (!event.target.files[0]) + { + return; + } + // resume the context if paused + await context.resume(); + // parse all the files + const parsedSongs = []; + for (let file of event.target.files) + { + const buffer = await file.arrayBuffer(); + parsedSongs.push({ + binary: buffer, // binary: the binary data of the file + altName: file.name // altName: the fallback name if the MIDI doesn't have one. Here we set it to the file name + }); + } + if (seq === undefined) + { + seq = new Sequencer(parsedSongs, synth); // create the sequencer with the parsed midis + seq.play(); // play the midi + } + else + { + seq.loadNewSongList(parsedSongs); // the sequencer is already created, no need to create a new one. + } + seq.loop = false; // the sequencer loops a single song by default + + // make the slider move with the song + let slider = document.getElementById("progress"); + setInterval(() => + { + // slider ranges from 0 to 1000 + slider.value = (seq.currentTime / seq.duration) * 1000; + }, 100); + + // on song change, show the name + seq.addOnSongChangeEvent(e => + { + document.getElementById("message").innerText = "Now playing: " + e.midiName; + }, "example-time-change"); // make sure to add a unique id! + + // add time adjustment + slider.onchange = () => + { + // calculate the time + seq.currentTime = (slider.value / 1000) * seq.duration; // switch the time (the sequencer adjusts automatically) + }; + + // add button controls + document.getElementById("previous").onclick = () => + { + seq.previousSong(); // go back by one song + }; + + // on pause click + document.getElementById("pause").onclick = () => + { + if (seq.paused) + { + document.getElementById("pause").innerText = "Pause"; + seq.play(); // resume + } + else + { + document.getElementById("pause").innerText = "Resume"; + seq.pause(); // pause + + } + }; + document.getElementById("next").onclick = () => + { + seq.nextSong(); // go to the next song + }; + }); +}); \ No newline at end of file diff --git a/examples.css b/examples.css new file mode 100644 index 0000000000000000000000000000000000000000..0dc1583264ea6f1466702745bfa1b89709009db3 --- /dev/null +++ b/examples.css @@ -0,0 +1,66 @@ +.txtlogee{ + text-align: center; + text-transform: uppercase !important; + } + + .playcax{ + text-align: center; + margin: 15px 0px; + } + + * { + font-family: "Noto Sans Light", "Open Sans Light", sans-serif; + color: #ccc; + font-size: 1.1rem; + } + + button { + background: #444; + border: solid #555; + padding: 10px; + border-radius: 1rem; + cursor: pointer; + margin: 0.3rem; + display: inline-block; + text-transform: uppercase !important; + } + + button:hover { + filter: brightness(1.1); + } + + button:active { + transform: scale(0.9); + } + + canvas { + width: 100%; + min-height: 0; + max-height: 40vh; + } + + input[type="range"] { + width: 100%; + } + + body { + background: #111; + display: flex; + flex-direction: column; + align-items: center; + max-height: 100vh; + margin: 50px; + } + + .example_content { + width: 80%; + background: #333; + padding: 2em; + margin: 1rem; + /*border-radius: 1rem;*/ + box-shadow: black 0 0 15px; + /*display: flex;*/ + flex-direction: column; + align-items: center; + } + \ No newline at end of file diff --git a/index - Copia.html b/index - Copia.html new file mode 100644 index 0000000000000000000000000000000000000000..e675b2a6786ee1e71312ab75a248b89394ed2804 --- /dev/null +++ b/index - Copia.html @@ -0,0 +1,32 @@ + + + +
+ + + +Please wait for the soundFont to load.
+ +Please wait for the soundFont to load.
+ +