forked from wesbos/JavaScript30
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex-START.html
More file actions
99 lines (87 loc) · 4.05 KB
/
index-START.html
File metadata and controls
99 lines (87 loc) · 4.05 KB
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Drum Kit</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="keys">
<div data-key="a" class="key">
<kbd>A</kbd>
<span class="sound">clap</span>
</div>
<div data-key="s" class="key">
<kbd>S</kbd>
<span class="sound">hihat</span>
</div>
<div data-key="d" class="key">
<kbd>D</kbd>
<span class="sound">kick</span>
</div>
<div data-key="f" class="key">
<kbd>F</kbd>
<span class="sound">openhat</span>
</div>
<div data-key="g" class="key">
<kbd>G</kbd>
<span class="sound">boom</span>
</div>
<div data-key="h" class="key">
<kbd>H</kbd>
<span class="sound">ride</span>
</div>
<div data-key="j" class="key">
<kbd>J</kbd>
<span class="sound">snare</span>
</div>
<div data-key="k" class="key">
<kbd>K</kbd>
<span class="sound">tom</span>
</div>
<div data-key="l" class="key">
<kbd>L</kbd>
<span class="sound">tink</span>
</div>
</div>
<audio data-key="a" src="sounds/clap.wav"></audio>
<audio data-key="s" src="sounds/hihat.wav"></audio>
<audio data-key="d" src="sounds/kick.wav"></audio>
<audio data-key="f" src="sounds/openhat.wav"></audio>
<audio data-key="g" src="sounds/boom.wav"></audio>
<audio data-key="h" src="sounds/ride.wav"></audio>
<audio data-key="j" src="sounds/snare.wav"></audio>
<audio data-key="k" src="sounds/tom.wav"></audio>
<audio data-key="l" src="sounds/tink.wav"></audio>
<script>
//first: need to listen for the keyevent
//then we need a functoin that is going to give us the event
//so we can play the corresponding file
window.addEventListener('keydown', function (e){
//listen for key down and connect attribute to eventhandler
//the keyevent objects are accessed from the keydown event
//note, i saw that you keyCode is deprecated and it was recommended that we use key which gives the key character. This allowed me to remove all of the data attributes from the HTML
//so i came up with another solution to not use the key mapping with codes but the key value
//Next We need to id if there is an element on the page that has a key to match the current key pushed in this event
const audio = document.querySelector(`audio[data-key='${e.key}']`);//the code in the slector is using an attribute selector, and since they key is a variable we wrapped in a template literals
const key = document.querySelector(`.key[data-key='${e.key}']`);//this selector picks something with the class of key and a data attribute of the e.key
if(!audio) return; //error handling. if the key doesn't have a value then don't do anything
audio.currentTime = 0;//this method will allow the keypress to rewind to start essentially
audio.play();//wow, really? there is a play method?!
key.classList.add('playing');
});
//use a transisition end event, or if it was transitioning, like how it was in the css classes .playing to .key
function removeTransistion(e){//this does not refer to the removeTransition function, but where the function was called, or in the addEventListener. Additionally, this will refer to the
if(e.propertyName !== 'transform') return;
//in other words skip it if it's not transform
this.classList.remove('playing');
console.log(this); //this is equal to the key because, this refers to the value of the function that called it. removeTransistion is not being called here
}
const keys = document.querySelectorAll('.key');
keys.forEach(
function (key){
key.addEventListener('transitionend', removeTransistion)//this refers to this 'key' because this is where the function removeTransistion is being executed. And the value of this is the object that was called against it aka 'key'
});//when you have an array of elements you can't listen to each of them unless you loop over every single element
</script>
</body>
</html>