When you hit a corresponding key, it will play the sound associated with that key and it will perform a short animation to signify that the button is pressed.
First new thing I came across was the data attribute. Data attributes are custom attributes which are used when we want to make up something like a key. Data attributes here are being used to hook up for e.g. data-key=”65” along with the data key audio. For instance, we need to hook up the data-key div to the data-key audio. So, that when someone hits a key on the keyboard, the audio element will be played, and a class of ‘playing’ which is specified in the CSS file, will be added to the data-key div. This will then animate the button being pressed.
A reminder worth mentioning. In CSS you can define your own selectors in the form of the class selector, which is a name preceded by a full stop “.” The other method is using an ID selector which is a name preceded by a hash character “#”. The difference between ID and class is that, an ID can be used to identify one element and a class can be used to identify more than one.
Furthermore, a benefit of the Class and ID selectors over using plain html selector (where you target the tag itself) is that you can have the same HTML element but present it differently depending on the class or ID. This ensures that the styling isn’t tightly coupled with the DOM.
Keys gives us a node list of every single element that is matched. This happens when we define the key variable and assign document.querySelectorAll(‘.key’) to it. Also we use keys.forEach(key => …) as opposed to keys.addEventListener(‘transitionend’). This is because when we have a node list of elements we cannot listen to all of them. You must explicitly loop over every single element and attach an event listener.
To briefly summarise in the form of a brain dump… An Event listener was added to keydown. Query selector was used to target attribute data-key and class key. I realised that there are many more events that can be triggered in the DOM such as transitionend which was used in this project. Audio can be played using custom attribute data-key and src attribute and then targeting using query selector to target the class. We then call audio.play() to play the sound.
Describing the code:
We create playSound function which uses a query selector to target the audio attribute of data-key and the key class of the data-key attribute. We use template expression to define argument for query selector function. We pass in e.KeyCode which represents the key code of the key board button being pressed.#
The if condition checks when the audio is not playing and returns from the playSound function when the sound has been played. We rewind the time to the start so we can press the button many times so we don’t have to wait every time the button is pressed. We then play and add a class of ‘playing’ to the class list so that the animation effect is performed. The removeTransition function is defined which removes the effect of the transition.
We define keys variable and use the query selector to target all classes with class of key. Listen for an event transitionend and call removeTransition to get rid of animation.
Finally we listen to the key down event and call playSound which was mentioned above. That’s it! And we have built our drum kit.
That was a pretty fun exercise and I am looking forward to the second one. I will aim to make the next blog post more organised!