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, and there is!!

this 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. you can do it too if you know the alphabet and what some basic symbols do!

it was fun except for the worst part which is getting the duration wrong. everything is just slightly mistimed and i had to comb through every note to figure out what's wrong... especially when they're rendered the same... like in the world's end valentine sheet i wrote "[G'B'D'']9" when it was supposed to be "[G'B'D'']12". it was HORRIBLE. definitely could have avoided that if i knew anything about sheet music -_-

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!! all my codes are in the abcjs-params.js file :3

switch between multiple sheets. requires constants of the notations that i set with the same name in the Notes constant (reference how it's done in source code ^_^;)

remember to put the composition in BACKTICKS `` if you use this!!! it's the button on the left of your number row and it allows line breaks (there'll be errors otherwise)

i made the tabs from following this w3schools tutorial!

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

#sheet {
  width: 700px;
  height: 600px;
  overflow-y: scroll;
  border-radius: 10px;
  background-color: white;
  border: 4px double black;
}
.tablinks {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  margin-left: 20px
}
.tablink {
  height: 40px;
  width: 150px;
  background-color: #888;
  border-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border: 4px double black;
  border-bottom: none;
  font-family: 'Montserrat Alternates', sans-serif; /* google fonts */
}
  .tablink:hover {
    background-color: var(--accent-color);
  }
.tablink.active {
  height: 60px;
  width: 200px;
  background-color: white;
  font-weight: bold
}

move current staff to middle of sheet. part of the CursorControl object (also used to highlight current note). the music sheet needs to be inside a div called #sheet. btw i calulated the scroll distance by drawing on a piece of paper and doing actual arithmetic ^_^

self.onLineEnd = function (staff) {
  var scrollNumber = staff.top - (300 - (staff.bottom - staff.top) / 2); //top of staff - ([half of sheet height] - [half of staff height])
  console.log("scroll amount:", scrollNumber);
  sheet.scroll({top: scrollNumber, behavior: "smooth",});
};

set instruments. i spent hoursss trying to find out how to do this, turns out they just use the abcMIDI code T_T you can look up the midi instrument list online BUT the list in abcjs is "instrument number - 1" (eg. you want to use "10" — the glockenspiel, you would have to write "9").

%%MIDI program 5 // set instrument for entire piece

[I:MIDI program 5] // set instrument for a single voice

change clef. in the bad apple sheet there's a clef change and i couldn't for the life of me figure out how to do that, and then i realized you could just like, define the clef again in the middle of the song u_u

V:1 clef=treble // define clef for a voice 

[K:clef=treble] // change clef mid-measure

glissando. i had to look through the issues on the github page for this u_u the bad apple sheet is supposed to have a glissando but it doesn't render very well so i skipped it :,[

!-(!E' !-)!E, // straight line

!~(!E' !~)!E, // squiggly line