hihat | : tophat : local Node/Browser development with Chrome DevTools | Runtime Evironment library

I would recommend taking a look at this question to find out more details about your error, but nevertheless, I've shared a working example below using functional components and fixing the missing key error mentioned by @DaniilLoban. The working example will print out the value of the letter and id keys from each object in your soundData array.

App.js

The issue here is that, you're passing the incorrect key to makeSound and buttonAnimation when you do your for loop.

Template strings are used to inject js code. For ex. In this part of your code

Inside the state object you set up a key called volumeVal which stores a float ranging from 0 to 1, controllable using the slider.

Unfortunately though you didn't use that value anywhere in your code except for the slider thus you don't hear a change in volume.

The volume of a HTML element - which is what you're using for your individual sounds - can be controlled by it's .volume property. So all you have to do is assigning this property the value of this.state.volumeVal prior playback.

For example the keyCode event for the hihat needs to be changed to this:

Your transactionend event has associated with transition style of "key" class. Which reacts by adding one more class "playing". It fired when you add playing class and again when you remove it. Also you use "All" in your transition style which call this event multiple of style attribute change.

Solution : I think it is not feasible with transactionend event. Because it fires ones when it done transition and once more when back to original. Try some different logic or clarify.

Hint : It is better to use "setTimeout" function to remove "playing" class after transition time elapse.

The problem comes with the fact that your biding to the keydown action, which, if you keep it pressed, it'll trigger multiple times than the transitionend. Because it happens multiple times, you end up with the class 'playing' and no transition taking place, thus the 'transitionend' event isn't fired anymore.

Change keyup to keydown and it should be fine.

You can easily see this if you console log in both functions like this and watch the console

You're getting "Cannot read property 'keyCode' of undefined" because you're not passing any argument to your playSound function at onclick event handler and it is expected to receive an argument referencing the keyboard event.

A much more efficient approach should be making playSound function more generic receiving the keyCode itself instead of the keyboard event. This way you can call it in other places in your code without other problems.

You could also make a specific function for playing the sound when clicking to which you can pass the element as parameter.

This would be as follows:

Select all .key elements, check their dataset to get their associated key number, and then you can dynamically select the associated audio:

Welcome to StackOverflow.

You need to use the string interpolation symbols ( ` ) around that string in order to do the ${...} substitution properly: