成品連結：Drum Kit

事前準備

成品預期效果

當按下指定按鍵時，播放音效以及渲染畫面(新增／移除 class 'playing')

步驟

• 監聽畫面按鍵
  • 渲染畫面：當按下指定按鍵時在 div.key 新增 playing 的 class
  • 播放音效
• HTML 程式碼
• CSS 程式碼

開始寫程式碼

首先我們先監聽瀏覽器按鍵事件，這裡我們選擇keydown事件。查詢各按鍵 keyCode 可以到這裡

這裡使用keypress也可以，但與keydown的差異是keypress的 keyCode 大小寫分別是不同數字，而且只對文字、符號按鍵有用(例如 Esc 或是 Ctrl 就無效)

window.addEventListener('keydown', function(e) {
    // 分別綁定key(畫面)與sound(音效檔案)
    const key = document.querySelector(`.keys > div[data-key="${e.keyCode}"]`);
    const sound = document.querySelector(`audio[data-key="${e.keyCode}"]`);
}

但由於我們只希望鍵盤 A ~ L 之間的按鍵有效果，為避免 key 與 sound 是null所以加一行 if statement 判斷，若是null則 return

// 確保在按到非指定按鍵時不會有反應
if (key === null) {return}

接著就可以開始渲染畫面和產生音效了！這裡分成畫面和聲音兩部分：

畫面渲染

• 若 div.key 沒有 playing 這個 class 的話，我們新增它
• 但我們只想要動畫延遲一小段時間，而不是永久新增 class playing，所以需要在 key 另綁定監聽事件，當 CSStransition結束時，移除 class playing。這裡我們使用 transitionend 這個事件來觸發動作，也就是當設定的transition: all .07s ease;結束時觸發
  • 由於 playing 更改的屬性有 border-color、transform以及box-shadow，所以我們只選擇一項當代表來當被監聽的元素(transform)

播放聲音

• 播放聲音很簡單，只需要利用 audio 的 DOM 屬性 play()來播放即可
• 若我們連擊按鍵不會有預期的重新播放效果，還是要等音效播放結束後才能重新開始，故當按下按鍵時，我們將音效的currentTime(當前時間)設定為 0 再播放已達到預期效果

以下是完成後的程式碼

window.addEventListener('keydown', function(e) {
    const key = document.querySelector(`.keys > div[data-key="${e.keyCode}"]`);
    const sound = document.querySelector(`audio[data-key="${e.keyCode}"]`);

    // 確保在按到非指定按鍵時不會有反應
    if (key === null) {return}

    // 渲染畫面，新增 class 'playing'
    key.classList.add('playing');
    // 當 transition 動畫結束後觸發事件
    key.addEventListener('transitionend', function(e) {
        // 更改的 css 很多，選一個當代表(transform)
        if(e.propertyName !== "transform") {return}
        // 移除 class 'playing'
        key.classList.remove('playing');
    });

    // 每次按鍵時重置開始時間至 0
    sound.currentTime = 0;
    sound.play();
});

大功告成！如此我們就完成了第一天的作品了！

心得

除了複習如何操作 DOM 元素，也學到了如何在 DOM 操做 html audio tag 以及 transitionend 的監聽事件。

參考連結

• HTML Audio/Video DOM Reference
• transitionend Event