guahsu · Yichia1023 · Apr 15, 2025 · Apr 15, 2025 · Apr 20, 2025 · Apr 20, 2025
diff --git a/01_Java-Script-Drum-Kit/index-Mike.html b/01_Java-Script-Drum-Kit/index-Mike.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>JS Drum Kit</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="keys">
+      <div id="key-A" data-key="65" class="key">
+        <kbd>A</kbd>
+        <span class="sound">clap</span>
+      </div>
+      <div id="key-S" data-key="83" class="key">
+        <kbd>S</kbd>
+        <span class="sound">hihat</span>
+      </div>
+      <div id="key-D" data-key="68" class="key">
+        <kbd>D</kbd>
+        <span class="sound">kick</span>
+      </div>
+      <div id="key-F" data-key="70" class="key">
+        <kbd>F</kbd>
+        <span class="sound">openhat</span>
+      </div>
+      <div id="key-G" data-key="71" class="key">
+        <kbd>G</kbd>
+        <span class="sound">boom</span>
+      </div>
+      <div id="key-H" data-key="72" class="key">
+        <kbd>H</kbd>
+        <span class="sound">ride</span>
+      </div>
+      <div id="key-J" data-key="74" class="key">
+        <kbd>J</kbd>
+        <span class="sound">snare</span>
+      </div>
+      <div id="key-K" data-key="75" class="key">
+        <kbd>K</kbd>
+        <span class="sound">tom</span>
+      </div>
+      <div id="key-L" data-key="76" class="key">
+        <kbd>L</kbd>
+        <span class="sound">tink</span>
+      </div>
+    </div>
+
+    <audio id="A" data-key="65" src="sounds/clap.wav"></audio>
+    <audio id="S" data-key="83" src="sounds/hihat.wav"></audio>
+    <audio id="D" data-key="68" src="sounds/kick.wav"></audio>
+    <audio id="F" data-key="70" src="sounds/openhat.wav"></audio>
+    <audio id="G" data-key="71" src="sounds/boom.wav"></audio>
+    <audio id="H" data-key="72" src="sounds/ride.wav"></audio>
+    <audio id="J" data-key="74" src="sounds/snare.wav"></audio>
+    <audio id="K" data-key="75" src="sounds/tom.wav"></audio>
+    <audio id="L" data-key="76" src="sounds/tink.wav"></audio>
+
+    <script>
+      //var audio=  document.getElementById("76")
+      //audio.play(); 直接撥放會失敗 Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
+      // 採了一個坑叫做 document.addEventListener("click",playSound ());
+      //const audio = document.querySelector('audio[data-key="75"]');
+      document.addEventListener("keydown", playHandler);
+
+      function playHandler(e) {
+        // we need to do two somtething
+        // first audio play
+        // second dom change
+        console.log("keyboard: " + e.keyCode);
+        const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); // 不太習慣這樣寫
+        if (audio) {
+          audio.currentTime = 0;
+          audio.play();
+        } else {
+          alert("no keycode");
+        }
+
+        console.log(audio);
+        const chosenKb = document.querySelector(`div[data-key="${e.keyCode}"]`);
+        if (chosenKb) {
+          //chosenKb.setAttribute("class", "playing");
+          chosenKb.classList.add("playing");
+          //chosenKb.classList.remove("playing");
+        }
+        // audio.play()
+        // const keyCode = e.keyCode;
+        // console.log(keyCode)
+        // const keyChar = String.fromCharCode(keyCode).toUpperCase();
+        // console.log(keyChar)
+        // const audio = document.getElementById(keyChar); // 用 ID 取得 audio
+        // console.log(audio);
+        // if(audio){ // 我喜歡正面寫
+        //   audio.currentTime=0 // 我聽不出來
+        //   audio.play()
+
+        // }
+        // //const dom = document.querySelector(`div[data-key="${e.keyCode}"]`);
+        // const dom = document.getElementById(`key-${keyChar}`); // 對應 div
+
+        // if(dom){
+        //   dom.classList.add('playing')
+        //   //dom.setAttribute('class', 'playing'); 不是我要的 哭喔
+        // }
+      }
+      document.addEventListener("keyup", removePlayingTag);
+      function removePlayingTag(e) {
+        const chosenKb = document.querySelector(`div[data-key="${e.keyCode}"]`);
+        if (chosenKb) {
+          //chosenKb.setAttribute("class", "playing");
+          //chosenKb.classList.add("playing");
+          chosenKb.classList.remove("playing");
+        }
+      }
+      // document.querySelectorAll(".key").forEach(function (key) {
+      //   key.addEventListener("transitionend", TransitionEndHandler);
+      // });
+
+      // function TransitionEndHandler(e) {
+      //   if (e.propertyName === "transform") {
+      //     console.log("e.propertyName" + e);
+      //     this.classList.remove("playing"); // 移除 class
+      //   }
+      // }
+    </script>
+  </body>
+</html>
diff --git a/01_Java-Script-Drum-Kit/index-START.html b/01_Java-Script-Drum-Kit/index-START.html
diff --git a/01_Java-Script-Drum-Kit/index-Yichia.html b/01_Java-Script-Drum-Kit/index-Yichia.html
@@ -0,0 +1,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>