[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값

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>

저작자표시 비영리 변경금지

티스토리툴바