This is a webpage which has 7 playable Drums/Percussion instrument buttons and 2 drumless melody buttons. There are two options to play the instrument/melody of your choice:
- Clicking the button using your mouse.
- Pressing the corresponding key on your keyboard.
Personally, I prefer using my keyboard because we can play as many buttons as we want simultaneously and it provides more flexibility.
Users can play the whole drumset using their fingers and add their flavour to any song.
The First Row: The First Row has 7 drums/percussion elements which are as follows:
- 'w' for ***Congo***
- 'a' for ***Shaker***
- 's' for ***Open Hi-Hat***
- 'd' for ***Closed Hi-Hat***
- 'j' for ***Snare***
- 'k' for ***Crash***
- 'l' for ***Kick***
Theory behind these percussions:
Kick Drum:
The bass drum, often known as the kick drum, is a huge drum that plays a low, definite or indefinite
pitch note. The instrument is normally cylindrical, with a striking head at both ends and a diameter
much greater than the depth of the drum. The heads are usually constructed of calfskin or plastic, and
the tension is usually adjusted using threaded taps or strings. Bass drums come in a variety of sizes,
although the volume produced by the drum is not determined by its size. The pitch and sound can differ
significantly depending on the size, but the size is also determined by convenience and aesthetics.
Snare Drum:
The snare drum, also known as the side drum, is a percussion instrument that uses a series of strong
wires maintained under tension against the bottom skin to produce a loud staccato sound when struck
with a drum stick. Orchestras, concert bands, marching bands, parades, drumlines, drum corps, and
other ensembles frequently employ snare drums. It's one of the most important parts of a drum set,
which is a collection of percussion instruments designed to be played by a seated drummer and used
in a variety of musical genres.
Hi Hats:
A hi-hat (also known as a high-hat or hi-hat) is made up of two cymbals and a pedal set on a metal stand.
Drummers in various forms of music, including rock, pop, jazz, and blues, use it as part of their
conventional drum set. [1] Hi-hats are made up of a matched pair of small to medium-sized cymbals set on a stand and facing each other. The bottom cymbal is stationary, while the top cymbal is mounted on a rod that slides it toward the bottom cymbal when the pedal is depressed
(a hi-hat that is in this position is said to be "closed" or "closed hi-hats").
Shaker:
The term "shaker" refers to a variety of percussion musical instruments that are used to create rhythm
in music.
Shakers get their name from the fact that they make sound by shaking them - moving them back and forth
in the air rather than striking them. Most can also be struck for a stronger emphasis on specific beats.
Shakers are frequently employed in rock and other popular genres to create the ride pattern, either in
conjunction with or in place of the ride cymbal.
The Second Row: The two buttons on the bottom ('v' and 'b') are drumless melodies. Users can jam all by themselves using these two buttons and then playing their own drum patterns using the keys in the first row.
- HTML
- JavaScript
- CSS
-
Writing the HTML file was the easiest part of this project and it is very easy to understand.
-
The trickiest and the toughest part of this project was writing the JavaScript file which took a lot of online research and consistent learning.
I learnt how to:
- Use switch case statements.
- Use Higher Order Functions and Callback Functions.
- Use objects, their methods and the dot notation.
- Change the innerHTML of an element when an 'event' (like mouseclick or keyboard press) happens.
- Adding animation to the project using Js.
Writing the HTML file was the easiest part of this project.
- For CSS file, the most important part was styling the buttons with their thumbnail images and borders. There is a ".pressed" class which is used to highlight (animation) the buttons when they are clicked/pressed.