主題

利用鍵盤按鍵去觸發畫面上的呈現與音效。

成果

完整程式碼
Demo效果

實作重點

Javascript

1. 鍵盤事件keyboardEvent ：使用 keydown 觸發功能，利用 data-key 對應 keyCode 來找到按下去的是哪一個按鍵，找到對應的 DOM audio/div[data-key="${e.keyCode}"] 去操作它

   <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>
   
   function playSound(e) {
     //play music                         es6 的語法，用 data-key 找到聲音和 DOM
     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
     //dom style                         es6 的語法，用 data-key 找到聲音和 DOM
     const dom = document.querySelector(`div[data-key="${e.keyCode}"]`);
   }
   
   // 鍵盤監聽事件
   window.addEventListener('keydown', playSound);
   
   

2. 樣式

   1. 找到 DOM 改變樣式 dom.classList.**add**('playing')

      function playSound(e) {
      	...
      
        //如果找到 Dom 就加class
        if (dom) dom.classList.add('playing');
      }
      

   2. 當 e.propertyName 等於 transform 時要移除樣式 **remove**('playing')

      if (e.propertyName === 'transform') {
        e.currentTarget.classList.remove('playing');
      };
      

3. 聲音

   1. 找到 audio 播放音樂 audio.play()

   2. 連續觸發可用 audio.currentTime = 0

      function playSound(e) {
          ...
      
        if (audio) {
          // 如果要重複播放就要把 currentTime 設成 0
          audio.currentTime = 0;
          audio.play();
        }
      }
      

4. 移除樣式：利用 forEach 去監聽 ，當 transitionend 事件發生，執行 callback transitionendSound

   function transitionendSound(e) {
     //e.propertyName 有很多 transform 需要被結束
     if (e.propertyName === 'transform') {
       e.currentTarget.classList.remove('playing');
     };
   };
   document.querySelectorAll('.key').forEach(function (key) {
     key.addEventListener('transitionend', transitionendSound);
   });
   

CSS

transform：會放大縮小
transition：動畫效果

額外知識

1. w3schools 網站裡有 Javascript ES6 新功能 ，也有其他的知識可以了解。