wesbos
Fix Long Key Press Bug
The playing class is not being removed from the keys if they are held down for a long time. This happens because when it's held down for long, there's actually no transformation taking place and thus on line 61, the removeTransition function simply returns the controller without removing the 'playing' class. In this commit, I've updated line 61 such that if the target classList doesn't contain 'playing', the controller will be returned. Else, the 'playing' class will be removed.
I had issues with this too. I copied and pasted your code, and I'm still having the same issues. Any suggestions?
This works fine for me: https://github.com/anirbanroy2002/JavaScript30/blob/master/01%20-%20JavaScript%20Drum%20Kit/index-FINISHED.html
Try this: https://techrbun.com/temporary/js-drum-kit/index-FINISHED.html
Could you please elaborate on what issue you're facing?
The bug that this code fixes is:
In the original version, if you keep a key held down for long, the CSS changes on the button doesn't revert back, thus, it makes the button look bigger and golden bordered as if its still playing (but actually isn't), due to the presence of the "playing" class. However this code fixes that issue.
Are you facing some other bug?
Could you please share what OS and browser you're using?
Some JS Engines might behave differently and not put the "playing" class at index 1 of the classList. In that case, can you please try replacing the line 62:
if (e.target.classList[1] !== 'playing') return;
with this:
if ( ! e.target.classList.contains('playing')) return;
Hi, Thanks for explaining this to me. The issue is exactly how you described. In addition, the audio isn't playing sound after it plays the audio once. I'm assuming because it isn't ending and returning for either issues for some reason? macOS Catalina version 10.15.7.
I do not use SAFARI. Can you test it in Chrome? Might be a browser specific bug. Cuz the sounds keeps playing on chrome as long as you keep it held down.