forked from wesbos/JavaScript30
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdrumKit.js
More file actions
30 lines (17 loc) · 1020 Bytes
/
drumKit.js
File metadata and controls
30 lines (17 loc) · 1020 Bytes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function playSound (evnt) {
const audio = document.querySelector(`audio[data-key="${evnt.keyCode}"]`); // This selects the audio element.
const key = document.querySelector(`.key[data-key="${evnt.keyCode}"]`);// This selects the <div> with the class="key".
if (!audio) return; //this will stop the function from running if there is no audio associated with the pressed key.
audio.currentTime = 0;// allows the audio to restart when the key is pressed multiple times.
audio.play();// excecutes audio file.
key.classList.add('playing');//This adds the CSS class of "playing" to the key being pressed.
// console.log(audio);
// console.log(key);
};
function removeTransition(evnt) {
if (evnt.propertyName !== 'transform') return;
this.classList.remove('playing');
};
const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);//On keydown this executes the playSound function.