*please note this video tour contains music.



Simple toy to help hone my JavaScript skills. Here, audio samples are triggered on a keypress event. Each audio sample is assigned to a key on the user’s keyboard using Char Codes. Triggering of the audio sample is handled by Howler.js. Each key is also assigned its own color value. Paper.js handles scale and hue animations. Responsiveness is created by setting the bounds of the HTML5 canvas element using the width and height of the screen. KeySong was created with vanilla JavaScript, Paper.js, Howler.js, html and css.


  • Javascript
  • Paper.js
  • Howler.js
  • HTML5 Canvas
  • HTML
  • CSS