JavaScript30/01_Java-Script-Drum-Kit/index-Yichia.html at cc44e0d293d79f930fed6fce344df8ba7eab72af · guahsu/JavaScript30 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JS Drum Kit</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="icon" href="https://fav.farm/🔥" />
  </head>
  <body>
    <div class="keys">
      <div data-key="65" class="key">
        <kbd>A</kbd>
        <span class="sound">clap</span>
      </div>
      <div data-key="83" class="key">
        <kbd>S</kbd>
        <span class="sound">hihat</span>
      </div>
      <div data-key="68" class="key">
        <kbd>D</kbd>
        <span class="sound">kick</span>
      </div>
      <div data-key="70" class="key">
        <kbd>F</kbd>
        <span class="sound">openhat</span>
      </div>
      <div data-key="71" class="key">
        <kbd>G</kbd>
        <span class="sound">boom</span>
      </div>
      <div data-key="72" class="key">
        <kbd>H</kbd>
        <span class="sound">ride</span>
      </div>
      <div data-key="74" class="key">
        <kbd>J</kbd>
        <span class="sound">snare</span>
      </div>
      <div data-key="75" class="key">
        <kbd>K</kbd>
        <span class="sound">tom</span>
      </div>
      <div data-key="76" class="key">
        <kbd>L</kbd>
        <span class="sound">tink</span>
      </div>
    </div>

    <audio data-key="65" src="sounds/clap.wav"></audio>
    <audio data-key="83" src="sounds/hihat.wav"></audio>
    <audio data-key="68" src="sounds/kick.wav"></audio>
    <audio data-key="70" src="sounds/openhat.wav"></audio>
    <audio data-key="71" src="sounds/boom.wav"></audio>
    <audio data-key="72" src="sounds/ride.wav"></audio>
    <audio data-key="74" src="sounds/snare.wav"></audio>
    <audio data-key="75" src="sounds/tom.wav"></audio>
    <audio data-key="76" src="sounds/tink.wav"></audio>
  </body>
  <script>
    // 我的思路

    const keys = document.querySelectorAll(".key");
    // const keys = document.querySelectorAll(".key").dataset; //多數的話不能這樣用，單個可以取出dataset
    console.log(keys);
    const audio = document.querySelectorAll("audio");
    console.log(audio);
    //比對div跟audio的dataset一致
    // keys.addevent  nodelist不能直接用addenevtListener,單一DOM才能。
    //div 元素本身預設無法接收鍵盤事
    // keys.forEach((key) => {
    //   key.addEventListener("keydown", (e) => {
    //     console.log(key);
    //   });
    // });
    // 用 document	平常操作 DOM（點擊、輸入、鍵盤）
    // 用 window	需要全局監聽鍵盤、resize、scroll

    document.addEventListener("keydown", (e) => {
      // console.log(e.keyCode);
      keys.forEach((key) => {
        // console.log(key.dataset.key);
        if (key.dataset.key == e.keyCode) {
          const selected = key.dataset.key;
          audio.forEach((a) => {
            if (a.dataset.key == selected) {
              // console.log(a.dataset.key);
              a.currentTime = 0; //??
              a.play();
              key.classList.add("playing");
              setTimeout(() => {
                key.classList.remove("playing");
              }, 200);
            }
          });
        }
      });
    });
  </script>

  <!-- ＧＰＴ給的答案 -->

  <!-- <script>
    const keys = document.querySelectorAll(".key");

    window.addEventListener("keydown", (e) => {
      const keyCode = e.keyCode; // 抓到按下去的鍵
      const audio = document.querySelector(`audio[data-key="${keyCode}"]`);
      const key = document.querySelector(`.key[data-key="${keyCode}"]`);

      if (!audio) return; // 如果找不到對應的音效，就跳出
      audio.currentTime = 0; // 每次按都從頭播放
      audio.play(); // 播放聲音

      key.classList.add("playing"); // 加上動畫效果
    });

    // 給每個 key 加上動畫結束後移除 class
    function removeTransition(e) {
      if (e.propertyName !== "transform") return; // 只抓 transform 的動畫結束
      this.classList.remove("playing");
    }

    keys.forEach((key) =>
      key.addEventListener("transitionend", removeTransition)
    );
  </script> -->
</html>