[17 Project] kit drum

[새로 알게된 것]

 

1. 키보드 키코드

더보기
KEY KeyCode  ASCII KEY KeyCode ASCII
0 48 48 Numpad 0 96 48
1 49 49 Numpad 1 97 49
2 50 50 Numpad 2 98 50
3 51 51 Numpad 3 99 51
4 52 52 Numpad 4 100 52
5 53 53 Numpad 5 101 53
6 54 54 Numpad 6 102 54
7 55 55 Numpad 7 103 55
8 56 56 Numpad 8 104 56
9 57 57 Numpad 9 105 57
A 65 65 Multiply 106 42
B 66 66 Add 107 43
C 67 67 Enter 13 13
D 68 68 Subtract 109 45
E 69 69 Decimal 110 46
F 70 70 Divide 111 47
G 71 71 F1 112  
H 72 72 F2 113  
I 73 73 F3 114  
J 74 74 F4 115  
K 75 75 F5 116  
L 76 76 F6 117  
M 77 77 F7 118  
N 78 78 F8 119  
O 79 79 F9 120  
P 80 80 F10 121  
Q 81 81 F11 122  
R 82 82 F12 123  
S 83 83 Backspace 8 8
T 84 84 Tab 9 9
U 85 85 Enter 13 13
V 86 86 Shift 16 0
W 87 87 Left Control 17 0
X 88 88 Right Control 25 0
Y 89 89 Left Alt 18 0
Z 90 90 Right Alt 21 0
a 65 97 Caps Lock 20 0
b 66 98 Esc 27 27
c 67 99 Spacebar 32 32
d 68 100 Page Up 33 0
e 69 101 Page Down 34 0
f 70 102 End 35 0
g 71 103 Home 36 0
h 72 104 Left Arrow 37 0
i 73 105 Up Arrow 38 0
j 74 106 Right Arrow 39 0
k 75 107 Down Arrow 40 0
l 76 108 Insert 45 0
m 77 109 Delete 46 127
n 78 110 Num Lock 144 0
o 79 111 ScrLk 145 0
p 80 112 Pause/Break 19 0
q 81 113 ; : 186 59
r 82 114 = + 187 61
s 83 115 – _ 189 45
t 84 116 /? 191 47
u 85 117 ‘~ 192 96
v 86 118 [ { 219 91
w 87 119 \ | 220 92
x 88 120 ] } 221 93
y 89 121 ” ‘ 222 39
z 90 122 < , 188 44
      > . 190 46

   

 

2. data() : HTML 엘리먼트 내에 데이터를 저장하고 읽는 역할을 하는 함수. 

  • jQuery에서 자주 사용되며 매우 쉽게 적용할 수 있다.
  • Javascript에 data를 저장하지 않아도 되기 때문에 code를 깨끗하게 유지할 수 있다.
더보기

데이터 저장

$(selector).data(key,value) 

 

key : string type의 변수로 data가 저장될 key값
value : object type으로 JavaScript에서 지원하는 모든 type의 데이터를 저장할 수 있다.

 

데이터 읽기

$(selector).data(key)

 

key : 앞서 저장한 data를 읽어오기 위한 key값
key를 생략하고 .data()로 호출할 경우 해당 엘리먼트에 저장된 모든 data들이 JSON형식으로 리턴됨

 

데이터 삭제

$(selector).removeData(key)

 

key : string type으로 삭제할 data의 key값

 

3.

  • eventListener : eventTarget 객체로부터 발생한 이벤트를 처리하기 위한 오브젝트
  • classList : DOMTokenList 개체로, 요소의 클래스 이름을 반환하는 읽기 전용 프로퍼티다. CSS클래스를 추가, 제거 및 전환하는데 유용하다.
  • Array.prototype.forEach() : 주어진 함수를 배열 요소 각각에 대해 실행한다.

 

[내가 짠 코드]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .keys {
      display: flex;
      width: 500px;
      text-align: center;
    }
    .key{
      width: 50px;
      height: 50px;
      margin: 5px;
      background: linear-gradient(#ff8888, #949dff);
      font-size: 2em;
      line-height: 45px;
      border-radius: 3px;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="keys">
    <div data-key="81" class="key">
      <!--kbd : 키보드 입력을 지정할 때 쓰는 코드-->
      <kbd>Q</kbd> 
    </div>

    <div data-key="87" class="key">
      <kbd>W</kbd>
    </div>

    <div data-key="69" class="key">
      <kbd>E</kbd>
    </div>

    <div data-key="82" class="key">
      <kbd>R</kbd>
    </div>

    <div data-key="65" class="key">
      <kbd>A</kbd>
    </div>

    <div data-key="83" class="key">
      <kbd>S</kbd>
    </div>

    <div data-key="68" class="key">
      <kbd>D</kbd>
    </div>

    <div data-key="70" class="key">
      <kbd>F</kbd>
    </div>

    <div data-key="90" class="key">
      <kbd>Z</kbd>
    </div>

    <div data-key="88" class="key">
      <kbd>X</kbd>
    </div>
  </div>

  <!-- audio : 오디오 삽입 시 사용하는 코드, 전역 특성을 포함한다 -->
  <audio data-key="81" src="sounds/src_01-javascript-drum-kit_sounds_crash.wav"></audio>
  <audio data-key="87" src="sounds/src_01-javascript-drum-kit_sounds_hihat-close.wav"></audio>
  <audio data-key="69" src="sounds/src_01-javascript-drum-kit_sounds_hihat-open.wav"></audio>
  <audio data-key="82" src="sounds/src_01-javascript-drum-kit_sounds_kick (1).wav"></audio>
  <audio data-key="65" src="sounds/src_01-javascript-drum-kit_sounds_kick.wav"></audio>
  <audio data-key="83" src="sounds/src_01-javascript-drum-kit_sounds_ride.wav"></audio>
  <audio data-key="68" src="sounds/src_01-javascript-drum-kit_sounds_snare.wav"></audio>
  <audio data-key="70" src="sounds/src_01-javascript-drum-kit_sounds_tom-high.wav"></audio>
  <audio data-key="90" src="sounds/src_01-javascript-drum-kit_sounds_tom-high.wav"></audio>
  <audio data-key="88" src="sounds/src_01-javascript-drum-kit_sounds_tom-high.wav"></audio>


  <script>
    function removeTransition(e) {
        if (e.propertyName !== "transform") return;
        e.target.classList.remove("playing");
      }

      function playSound(e) {
        const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
        const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
        if (!audio) return;

        key.classList.add("playing");
        audio.currentTime = 0;
        audio.play();
      }

      const keys = Array.from(document.querySelectorAll(".key"));
      keys.forEach((key) =>
        key.addEventListener("transitionend", removeTransition)
      );
      window.addEventListener("keydown", playSound);
  </script>
</body>
</html>