File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 5959
6060< script >
6161
62+ // check if the key pressed has an audio associated and play it
63+ function playSound ( event ) {
64+ const audio = document . querySelector ( `audio[data-key="${ event . keyCode } ) ;
65+ const key = document . querySelector ( `.key[data-key="${ event . keyCode } ) ;
66+ // if no audio corresponding to key pressed, stop.
67+ if ( ! audio ) return ;
68+
69+ // rewind audio and play
70+ audio . currentTime = 0 ;
71+ audio . play ( ) ;
72+
73+ // add playing class
74+ key . classList . add ( 'playing' ) ;
75+ }
76+
77+ // removes the transition effect when a key is pressed, after its transition
78+ // ends
79+ function removeTransition ( event ) {
80+ // we only care for transform transitions
81+ if ( event . propertyName !== 'transform' ) return ;
82+
83+ // remove the playing class
84+ console . log ( this ) ;
85+ this . classList . remove ( 'playing' ) ;
86+ }
87+
88+ // add a listener for transitionend event for each key of the drum kit
89+ const keys = document . querySelectorAll ( '.key' ) ;
90+ keys . forEach ( key => key . addEventListener ( 'transitionend' , removeTransition ) ) ;
91+
92+ // call playSound when a key is pressed down
93+ window . addEventListener ( 'keydown' , playSound ) ;
6294</ script >
6395
6496
You can’t perform that action at this time.
0 commit comments