|
2 | 2 | <html lang="en"> |
3 | 3 | <head> |
4 | 4 | <meta charset="UTF-8"> |
5 | | - <title>JS Drum Kit</title> |
| 5 | + <title>Arnie's conversation guide</title> |
6 | 6 | <link rel="stylesheet" href="style.css"> |
7 | 7 | </head> |
8 | 8 | <body> |
|
11 | 11 | <div class="keys"> |
12 | 12 | <div data-key="65" class="key"> |
13 | 13 | <kbd>A</kbd> |
14 | | - <span class="sound">clap</span> |
| 14 | + <span class="sound">hello cutie pie</span> |
15 | 15 | </div> |
16 | 16 | <div data-key="83" class="key"> |
17 | 17 | <kbd>S</kbd> |
18 | | - <span class="sound">hihat</span> |
| 18 | + <span class="sound">nice to meet you</span> |
19 | 19 | </div> |
20 | 20 | <div data-key="68" class="key"> |
21 | 21 | <kbd>D</kbd> |
22 | | - <span class="sound">kick</span> |
| 22 | + <span class="sound">who are you?</span> |
23 | 23 | </div> |
24 | 24 | <div data-key="70" class="key"> |
25 | 25 | <kbd>F</kbd> |
26 | | - <span class="sound">openhat</span> |
| 26 | + <span class="sound">what do you want?</span> |
27 | 27 | </div> |
28 | 28 | <div data-key="71" class="key"> |
29 | 29 | <kbd>G</kbd> |
30 | | - <span class="sound">boom</span> |
| 30 | + <span class="sound">what's the matter?</span> |
31 | 31 | </div> |
32 | 32 | <div data-key="72" class="key"> |
33 | 33 | <kbd>H</kbd> |
34 | | - <span class="sound">ride</span> |
| 34 | + <span class="sound">Fuck you asshore</span> |
35 | 35 | </div> |
36 | 36 | <div data-key="74" class="key"> |
37 | 37 | <kbd>J</kbd> |
38 | | - <span class="sound">snare</span> |
| 38 | + <span class="sound">no problemo</span> |
39 | 39 | </div> |
40 | 40 | <div data-key="75" class="key"> |
41 | 41 | <kbd>K</kbd> |
42 | | - <span class="sound">tom</span> |
| 42 | + <span class="sound">good bye</span> |
43 | 43 | </div> |
44 | 44 | <div data-key="76" class="key"> |
45 | 45 | <kbd>L</kbd> |
46 | | - <span class="sound">tink</span> |
| 46 | + <span class="sound">I'll be back</span> |
47 | 47 | </div> |
48 | 48 | </div> |
49 | 49 |
|
50 | | - <audio data-key="65" src="sounds/clap.wav"></audio> |
51 | | - <audio data-key="83" src="sounds/hihat.wav"></audio> |
52 | | - <audio data-key="68" src="sounds/kick.wav"></audio> |
53 | | - <audio data-key="70" src="sounds/openhat.wav"></audio> |
54 | | - <audio data-key="71" src="sounds/boom.wav"></audio> |
55 | | - <audio data-key="72" src="sounds/ride.wav"></audio> |
56 | | - <audio data-key="74" src="sounds/snare.wav"></audio> |
57 | | - <audio data-key="75" src="sounds/tom.wav"></audio> |
58 | | - <audio data-key="76" src="sounds/tink.wav"></audio> |
| 50 | + <audio data-key="65" src="sounds/hello_cutie.wav"></audio> |
| 51 | + <audio data-key="83" src="sounds/nice_2_meet_u.wav"></audio> |
| 52 | + <audio data-key="68" src="sounds/who_are_you.wav"></audio> |
| 53 | + <audio data-key="70" src="sounds/what_want.wav"></audio> |
| 54 | + <audio data-key="71" src="sounds/whats_the_matter.wav"></audio> |
| 55 | + <audio data-key="72" src="sounds/t1_fu.wav"></audio> |
| 56 | + <audio data-key="74" src="sounds/t2_no_problemo.wav"></audio> |
| 57 | + <audio data-key="75" src="sounds/t2_goodbye.wav"></audio> |
| 58 | + <audio data-key="76" src="sounds/t1_be_back.wav"></audio> |
59 | 59 |
|
60 | 60 | <script> |
| 61 | + window.addEventListener('keydown', playSound); |
61 | 62 |
|
62 | | - |
63 | | - function playSound(e) { |
| 63 | + function playSound(e){ |
64 | 64 | const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); |
| 65 | + if (!audio) return; |
65 | 66 | const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); |
66 | | - if (!audio) return; // stop the function from running all together |
67 | | - audio.currentTime = 0; // rewind to the start |
| 67 | + audio.currentTime = 0; |
68 | 68 | audio.play(); |
69 | 69 | key.classList.add('playing'); |
70 | 70 | } |
71 | | - function removeTransition(e) { |
72 | | - if (e.propertyName !== 'transform') return; // skip it if it's not a transform |
73 | | - this.classList.remove('playing'); |
74 | | - } |
75 | 71 |
|
76 | 72 | const keys = document.querySelectorAll('.key'); |
77 | | - keys.forEach(key => key.addEventListener('transitionend', removeTransition)); |
78 | | - window.addEventListener('keydown', playSound); |
| 73 | + keys.forEach( key => key.addEventListener('transitionend', removeTransition) ); |
79 | 74 |
|
| 75 | + function removeTransition(e){ |
| 76 | + if (e.propertyName !== 'transform') return; |
| 77 | + this.classList.remove('playing'); |
| 78 | + } |
80 | 79 | </script> |
81 | 80 |
|
| 81 | + |
82 | 82 | </body> |
83 | 83 | </html> |
0 commit comments