https://github.com/techlord001/jspiano

Learn to play the piano from your keyboard! Using keys from A-# on the keyboard (with some select keys allocated for minor notes) a user is able to play a small range of notes from E3 to B4.
https://github.com/techlord001/jspiano

css html interactive javascript music

Last synced: 14 days ago
JSON representation

Learn to play the piano from your keyboard! Using keys from A-# on the keyboard (with some select keys allocated for minor notes) a user is able to play a small range of notes from E3 to B4.

• Host: GitHub
• URL: https://github.com/techlord001/jspiano
• Owner: techlord001
• Created: 2021-04-28T12:16:23.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-05-10T07:14:14.000Z (over 3 years ago)
• Last Synced: 2024-11-07T05:37:22.663Z (2 months ago)
• Topics: css, html, interactive, javascript, music
• Language: HTML
• Homepage: https://techlord001.github.io/jsPiano
• Size: 18.2 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# jsPiano 🎵

> Ever wanted to learn how to play the piano but either can't afford a real one? Well why not give jsPiano a try and unlock your hidden musical talents. _Disclaimer: Does not actually teach you how to play the piano_ 😁.

The goals of this project were as follows:

  1. Using only HTML, CSS & JS, create a site that allows a user to play a musical instrument

  2. Demonstrate the ability to capture input and produce appropriate output

I picked the piano because I'm attempting to learn that myself (semi-successfully) so just felt appropriate. The challenge however was to be able to fit the necessary amount of keys in a way that would make sense to the user. I settled on using the middle row of keys on the keyboard (a-#) for the major keys, and using the above row for the minor keys (trying to match them to their major equivalent where possible). This resulted in a note range of e3 to b4. Admittedly not the deepest key range, but it is at least able to accomplish the aims of the project.

[Give it a try.](techlord001.github.io/jspiano "jsPiano Demo Site")

Special thanks to TEDAgame from Freesound for providing sample recordings that were used on the site which can be found [here](https://freesound.org/people/TEDAgame/packs/25405/ "TedAgame 88 piano keys").