1+ <!DOCTYPE html>
2+ < html >
3+
4+ < head >
5+ < meta charset ="UTF-8 ">
6+ < meta name ="viewport " width ="device-width " initial-scale ="1.0 ">
7+ < title > DRUMS</ title >
8+ < link rel ="stylesheet " href ="style.css ">
9+ </ head >
10+
11+ < body >
12+ < div class ="container ">
13+ < div data-key ="65 " class ="key " id ="key ">
14+ < kbd > A</ kbd >
15+ < span class ="sound "> BOOM</ span > </ div >
16+ < div data-key ="83 " class ="key ">
17+ < kbd > S</ kbd >
18+ < span class ="sound "> CLAP</ span > </ div >
19+ < div data-key ="68 " class ="key ">
20+ < kbd > D</ kbd >
21+ < span class ="sound "> HIHAT</ span > </ div >
22+ < div data-key ="70 " class ="key ">
23+ < kbd > F</ kbd >
24+ < span class ="sound "> KICK</ span > </ div >
25+ < div data-key ="71 " class ="key ">
26+ < kbd > G</ kbd >
27+ < span class ="sound "> OPENHAT</ span > </ div >
28+ < div data-key ="72 " class ="key ">
29+ < kbd > H</ kbd >
30+ < span class ="sound "> RIDE</ span > </ div >
31+ < div data-key ="74 " class ="key ">
32+ < kbd > J</ kbd >
33+ < span class ="sound "> SNARE</ span > </ div >
34+ < div data-key ="75 " class ="key ">
35+ < kbd > K</ kbd >
36+ < span class ="sound "> TINK</ span > </ div >
37+ < div data-key ="76 " class ="key ">
38+ < kbd > L</ kbd >
39+ < span class ="sound "> TOM</ span > </ div >
40+ </ div >
41+ < audio data-key ="65 " src ="sounds/boom.wav "> </ audio >
42+ < audio data-key ="83 " src ="sounds/clap.wav "> </ audio >
43+ < audio data-key ="68 " src ="sounds/hihat.wav "> </ audio >
44+ < audio data-key ="70 " src ="sounds/kick.wav "> </ audio >
45+ < audio data-key ="71 " src ="sounds/openhat.wav "> </ audio >
46+ < audio data-key ="72 " src ="sounds/ride.wav "> </ audio >
47+ < audio data-key ="74 " src ="sounds/snare.wav "> </ audio >
48+ < audio data-key ="75 " src ="sounds/tink.wav "> </ audio >
49+ < audio data-key ="76 " src ="sounds/tom.wav "> </ audio >
50+
51+ < script >
52+ var i ;
53+
54+ function addsound ( e ) {
55+ var audio = document . querySelector ( `audio[data-key="${ e . keyCode } ) ;
56+ var key = document . querySelector ( `.key[data-key="${ e . keyCode } ) ;
57+ if ( ! audio ) return ;
58+ audio . currentTime = 0 ;
59+ audio . play ( ) ;
60+ /* var jq = $.noConflict();
61+ $(window).keydown(function() {
62+ key.addClass("playing");
63+ });*/
64+ key . classList . add ( 'playing' ) ;
65+ }
66+
67+ function removeTransition ( e ) {
68+ this . classList . remove ( 'playing' ) ;
69+ }
70+
71+ const keys = Array . from ( document . querySelectorAll ( ".key" ) ) ;
72+ keys . forEach ( key => key . addEventListener ( 'transitionend' , removeTransition ) )
73+ window . addEventListener ( 'keydown' , addsound ) ;
74+ </ script >
75+
76+ </ html >
0 commit comments