Skip to content

A fully-functioning responsive web app that enables the user to play piano and drums.

Notifications You must be signed in to change notification settings

cknishan/Piano_And_Drums_JS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Piano_And_Drums_Js

A simple website where you can play drums and piano made with js, css, and html.

Live Demo

Click for Live Demo.

Inspiration/Idea behind app

I love music and programming and so thought of making an app where it is possible to play music.

Drums

I searched google and the Drums JS were part of 30DaysOfJavascript by WesBos. I watched the video, absorbed the concept and then coded it myself. I also added extra features like responsive design, play by clicking, different way of referencing data key.

Piano

There's tons of videos on youtube about piano by js. Watched a few but I believe the css code I used is different from all. I made it responsive and also incorporated the keys so that it produce the sounds of the corresponding notes.

Learning Experience / Key concepts Implemented

Data-Keys attributes. audio functions. audio object. nodeList vs array. string manupilations. linking local urls. And of course asking better questions at google.

Possible Improvements

  • drums does not work with "use strict". so current code is likely not the best practice.
  • no piano animations yet.
  • play piano with key press have not been implemented yet.
  • about page still empty.

About

A fully-functioning responsive web app that enables the user to play piano and drums.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published