Kaweesha-mr
commented
1 year ago The issue you're experiencing with the key appearing to be pressed down when you hold it for an extended period of time is due to the transitioned event not firing when you continuously hold down a key without releasing it. This issue occurs because the transitioned event is designed to trigger when a CSS transition or animation ends, and holding down a key continuously doesn't trigger a transition.
`const keys = Array.from(document.querySelectorAll('.key')); keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);
window.addEventListener('keyup', (e) => {
const key = document.querySelector(div[data-key="${e.keyCode}"]);
if (key) {
key.classList.remove('playing');
}
});`
With this modification, the keyup event listener ensures that the playing class is removed when a key is released, preventing the key from appearing to be continuously pressed down.
Love the tutorial, but I broke the drum machine : (
If you hold down a key without letting up (around 10x) , the removeTransition callback fails to execute resulting in a key that appears to be pressed down.
Of course refreshing fixes it. I'm not sure how to prevent this given my lack of experience with transforms and transitions. My initial thought is to set a timeout for 5 seconds or so and remove any of the stuck keys.