11<!DOCTYPE html>
22< html lang ="en ">
3+
34< head >
45 < meta charset ="UTF-8 ">
56 < title > JS Drum Kit</ title >
67 < link rel ="stylesheet " href ="style.css ">
78</ head >
9+
810< body >
911
1012
5759 < audio data-key ="75 " src ="sounds/tom.wav "> </ audio >
5860 < audio data-key ="76 " src ="sounds/tink.wav "> </ audio >
5961
60- < script >
62+ < script >
63+
64+ function playSound ( code ) {
65+ let soundSelector = `audio[data-key='${ code } ;
66+ let audioElement = document . querySelector ( soundSelector ) ;
67+ if ( audioElement != undefined ) {
68+ audioElement . currentTime = 0 ;
69+ audioElement . play ( ) ;
70+ }
71+ }
72+
73+ function highlightBox ( code ) {
74+ let boxSelector = `.key[data-key='${ code } ;
75+ let boxElement = document . querySelector ( boxSelector ) ;
76+ if ( boxElement != undefined ) boxElement . classList . add ( 'playing' ) ;
77+ }
78+
79+ function removeHighlightBox ( e ) {
80+ // let boxSelector = `.key[data-key='${code}']`;
81+ // let boxElement = document.querySelector(boxSelector);
82+ // if (boxElement != undefined) boxElement.classList.remove('playing');
83+
84+ // console.log(e);
85+ if ( e . propertyName !== 'transform' ) return ;
86+ console . log ( e . propertyName ) ;
87+ this . classList . remove ( 'playing' ) ;
88+
89+ }
90+
91+ function setupSound ( ) {
92+ window . addEventListener ( 'keydown' , function keydown ( ev ) {
93+ let code = ev . keyCode ;
94+
95+ playSound ( code ) ;
6196
62- </ script >
97+ highlightBox ( code ) ;
98+ } ) ;
99+
100+
101+ //window.addEventListener('keyup', function keyUp(ev) {
102+ //let code = ev.keyCode;
103+
104+ //removeHighlightBox(code);
105+ // let soundSelector = `audio[data-key='${code}']`;
106+ // let audioElement = document.querySelector(soundSelector);
107+ // if (audioElement != undefined) audioElement.play();
108+ //});
109+
110+
111+ }
112+
113+ function setupTransition ( selector ) {
114+ let keyBoxes = document . querySelectorAll ( '.key' ) ;
115+ keyBoxes . forEach ( keyBox => keyBox . addEventListener ( 'transitionend' , removeHighlightBox ) ) ;
116+ }
117+
118+ setupSound ( ) ;
119+ setupTransition ( ) ;
120+ </ script >
63121
64122
65123</ body >
66- </ html >
124+
125+ </ html >
0 commit comments