Virtual Piano
By
@EndLess9
- 3 Devlogs
- 6 Total hours
A piano that you can play through your computer using your computer's keyboard.
Ship #1
Pending review
Virtual Piano:
This is a digital piano that you can play on your browser. You can play it using your mouse, touchscreen, or your keyboard.
Some Features:
- Adjustable Volume Bar: You can adjust the volume of the piano using the slider.
- Orange Keys: Checking this box off makes your white keys orange.
- Try playing: Mary had a little lamb: This given used the notes shown on the piano’s keys which are needed to play the famous song: Mary Had a Little Lamb.
2h 27m 36s logged
Devlog #3
I added 2 new features and wrote my readme.
Feature #1: Orange Keys
By checking off this check-box the white keys in the piano simply become orange. I did this by creating new css styling for the orange keys, created a check-box using html, and then used a event listener in JS to switch the white keys css styling with the orange keys.
Feature #2: Trial Song
For this feature I basically created a box above the piano with the notes for the song: Mary had a little lamb. Instead of using musical notes I used the letters on the piano keys so everyone can easily play it.
2h 9m 41s logged
Devlog #2:
Phase 1:
In phase one I created the piano keys using css. Then I used html to reverse the gradient of the piano keys to make it look like they are pressed. Then I used html again to write letters on the keys. These letters will later be used to play the piano though your computer’s keyboard.
Phase 2:
In phase 2 I added the notes for the keys of the piano. I added the data set for each key in html which corresponds to the letter of each key. Then using javascript the corresponding sound will be played when the key is clicked using the cursor.
Phase 3:
In phase 3 I added event listeners in my javascript file which play the piano’s notes when you press letters on your keyboard. I also added a 150ms cool down which untoggles the active piano keys, without this the piano keys look so they are pressed down even after releasing the key.
1h 24m 40s logged
Devlog #1
I used html and css to create the top part of the piano which shows the header(Name of the Project), a slider which controls the volume, and a sliding checkbox that shows/hides the letters on the piano keys.
Currently the letters for the piano keys are in the top part but soon when the piano keys are made they will be shown individually on the keys.
