1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+
4+ < head >
5+ < meta charset ="UTF-8 ">
6+ < title > JS Drum Kit</ title >
7+ < link rel ="stylesheet " href ="style.css ">
8+ </ head >
9+
10+ < body >
11+
12+
13+ < div class ="keys ">
14+ < div data-key ="65 " class ="key ">
15+ < kbd > A</ kbd >
16+ < span class ="sound "> clap</ span >
17+ </ div >
18+ < div data-key ="83 " class ="key ">
19+ < kbd > S</ kbd >
20+ < span class ="sound "> hihat</ span >
21+ </ div >
22+ < div data-key ="68 " class ="key ">
23+ < kbd > D</ kbd >
24+ < span class ="sound "> kick</ span >
25+ </ div >
26+ < div data-key ="70 " class ="key ">
27+ < kbd > F</ kbd >
28+ < span class ="sound "> openhat</ span >
29+ </ div >
30+ < div data-key ="71 " class ="key ">
31+ < kbd > G</ kbd >
32+ < span class ="sound "> boom</ span >
33+ </ div >
34+ < div data-key ="72 " class ="key ">
35+ < kbd > H</ kbd >
36+ < span class ="sound "> ride</ span >
37+ </ div >
38+ < div data-key ="74 " class ="key ">
39+ < kbd > J</ kbd >
40+ < span class ="sound "> snare</ span >
41+ </ div >
42+ < div data-key ="75 " class ="key ">
43+ < kbd > K</ kbd >
44+ < span class ="sound "> tom</ span >
45+ </ div >
46+ < div data-key ="76 " class ="key ">
47+ < kbd > L</ kbd >
48+ < span class ="sound "> tink</ span >
49+ </ div >
50+ </ div >
51+
52+ < audio data-key ="65 " src ="sounds/clap.wav "> </ audio >
53+ < audio data-key ="83 " src ="sounds/hihat.wav "> </ audio >
54+ < audio data-key ="68 " src ="sounds/kick.wav "> </ audio >
55+ < audio data-key ="70 " src ="sounds/openhat.wav "> </ audio >
56+ < audio data-key ="71 " src ="sounds/boom.wav "> </ audio >
57+ < audio data-key ="72 " src ="sounds/ride.wav "> </ audio >
58+ < audio data-key ="74 " src ="sounds/snare.wav "> </ audio >
59+ < audio data-key ="75 " src ="sounds/tom.wav "> </ audio >
60+ < audio data-key ="76 " src ="sounds/tink.wav "> </ audio >
61+
62+ < script >
63+ //键盘事件监听
64+ function removeTransiion ( e ) {
65+ console . log ( e )
66+ if ( e . propertyName !== 'transform' ) return ;
67+ event . target . classList . remove ( 'playing' ) ;
68+ }
69+ function playSound ( e ) {
70+ const audio = document . querySelector ( `audio[data-key="${ e . keyCode } ) ;
71+ const key = document . querySelector ( `div[data-key="${ e . keyCode } ) ;
72+ if ( ! audio ) return ;
73+
74+ key . classList . add ( 'playing' ) ;
75+ audio . currentTime = 0 ;
76+ audio . play ( ) ;
77+ }
78+
79+ const keys = Array . from ( document . querySelectorAll ( '.key' ) ) ;
80+ keys . forEach ( key => key . addEventListener ( 'transitionend' , removeTransiion ) ) ;
81+ window . addEventListener ( 'keydown' , playSound ) ;
82+
83+ </ script >
84+
85+ </ body >
86+
87+ </ html >
0 commit comments