WES BOS系列影片
Alex快速導讀系列影片

Day01-JavaScript Drum Kit

思考需要的功能
1.按鍵按下後需要發出聲音
2.發出聲音的同時加上css樣式,結束後移除css樣式

實作重點:
1.利用自定義屬性名稱 data-key,讓鍵盤按鈕找到對應的聲音檔。
2.監聽keydown事件 - 讓按鈕按下後發出聲音
3.監聽transitionend事件 -利用transitionend事件取消css樣式

在這個實例中，[data-key]這個自定義屬性名稱非常重要，
為什麼會指定這些特定的數字呢?
那是因為每一個按鈕都有自己的keyCode，
我們可以利用監聽keydown事件來找到每個按鈕的keyCode。

window.addEventListener('keydown', function(e){
    console.log(e.keyCode)
})

印出 e.keyCode，發現e.keyCode就等於在HTML中寫好的[data-key]的值。
所以，利用這樣的唯一性，就可以找到對應的聲音檔，在鍵盤有keydown事件的條件下
設定audio這個變數，按下相對應的按鈕時，audio就代表該按鈕對應的聲音檔
例如: 按下 A ，A 的 keycode為 65 ，對應到的音檔就是 clap.wav

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)

但如果按了其他沒有設定在HTML上的按鈕，會找不到相對應的聲音檔，
因此需要加上一行code防止這個錯誤發生

if(!audio) return //如果沒有audio存在就終止這個function

有了對應的聲音檔，我們可以試試看讓對應的聲音檔撥放出來。

audio.play()

將這幾行程式碼組合起來，並用中文解釋
按下鍵盤按鈕 > 找到特定的audio檔案並撥放它

window.addEventListener('keydown', function(e){
  //console.log(e.keyCode)
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
  if(!audio) return
  audio.play()
})

做到這裡，發現連點同一個鍵盤按鈕的時候，聲音不會連續發出來，
這是因為每個聲音檔案的聲音長度大概都有2-3秒左右，
在整個聲音檔撥放完前，不會再撥放第二次。
解決的方法 => 每一次撥放前都將聲音檔倒回最開頭

audio.currentTime = 0

再來，為按鈕加上css樣式
作者很貼心的已經寫好樣式，就直接拿來用吧!
把注意力都放在寫JS上
觀察作者寫的css可以發現
.key => 目前所看到的樣式
.playing => 按鍵按下之後會顯示的樣式
所以現在的目標就是在按下按鈕時，
找出現在正按下的按鈕，並動態加入.playing的樣式

找出按鍵，一樣利用data-key的唯一性，我們就能夠得到現在按下的按鈕位置

const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)

找到後添加.palying的樣式

key.classList.add('playing')

最終的程式碼為

window.addEventListener('keydown', function(e){
  //console.log(e.keyCode)
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
  if(!audio) return
  audio.currentTime = 0
  audio.play()
  key.classList.add('playing')
})

但是我們只加上了樣式，卻沒有移除它，所以樣式一直存在沒有消失
明天的目標就是解決這個問題。