silly projects

!!DON'T SWITCH SHEETS WHILE MUSIC IS PLAYING!!

this is the result of me messing around with the abcjs library. click the play button to hear the generated MIDI file!!!

i knew of text engraving from binging tantacrul's videos (specifically this one), as well as dabbling in wikipedia's score function. so i looked up if there was a way to incorporate them in a website!

the library is based on abc notation and acbMIDI. i referenced their documentations for everything (+ a little from abcjs itself).

....basically i looked up the songs' sheet music and copied them by hand from the photos. it doesn't require brain power or knowledge of sheet music IMO, just a bit of trial and error. i barely know sheet music or javascript lmao. the engravings are a little ugly in some places (there's a broken glissando so i removed it) but it's still, like, incredible to me.

i had to figure a lot of things out that wasn't very clear so i'll put some of them here! you can also use Ctrl + U and look at the script of this page yourself!

const Notes = {
  megalovania: megalovania,
  badapple: badapple,
  valentine: valentine,
};
var abcString = megalovania; // default sheet that appears when the page first load
function setupEventListeners() {
  var tabLinks = document.querySelectorAll(".tablink");
  tabLinks.forEach(function (Link) {
    Link.addEventListener("click", function () {
      // removes "active" class from all "tablink"
      for (i = 0; i < tabLinks.length; i++) {
        tabLinks[i].classList.remove("active");
      }
      this.classList.add("active"); // adds "active" class to current button
      document.getElementById("sheet").scroll(0,0); // returns to top of page
      // check which sheet data has the same ID as the button
      const id = this.id;
      if (Notes[id]) {
        abcString = Notes[id];
      }
      load(); // reloads the sheet
    });
  });
}