Javascript: Piano Notes


https://mitzi-s-soto.github.io/piano/
Service Type:  HTML/CSS with Javascript

Skills Strengthened: Javascript, CSS3

This was a one day project inspired by https://javascript30.com/ DrumKit lesson. It is a program that associates a keyCode with a specific audio and when that keyCode is pressed, plays the audio. Associating the keyCode again to a note on the music staff it shows the current note, hiding the others.

It works best on the desktop as the Javascript ‘keydown’ isn’t well recognized by mobile, especially Android. However, it can work on an iPhone though imperfectly.

A work-a-round may be added later for better functionality on mobile.

This site was first sketched on paper, then mocked-up in GIMP. However, a few elements like the top text were added later.

 

(Post Last Edited: Feb 23, 2017; )

Leave a comment

Your email address will not be published. Required fields are marked *