跳至主要内容

[JS30] Day 01: JavaScript Drum Kit

keywords: 播放音效, audio, css manipulation, 操作 css, transitionend​

偵測鍵盤按鍵​

利用在 window 上監聽 keydown 事件來偵測使用者按下的按鍵

window.addEventListener('keydown', (e) => {
  e.key; // 偵測使用者按下按鍵的字母
  e.keycode; // 偵測使用者按下按鍵的鍵碼
});

播放音效(使用<audio>)​

<audio
  data-key="65"
  src="https://pjchender.github.io/JavaScript30/01%20-%20JavaScript%20Drum%20Kit/sounds/boom.wav"
></audio>
const audio = document.querySelector("audio[data-key='65']");
audio.currentTime = 0; //  讓每次回到音效檔的起始點
audio.play(); //  播放元素的音效

為元素增加／移除 class​

利用 el.classList.add/remove/toggle 來為元素添加／移除／切換 class：

const block = document.querySelector('.block');

// 為 block 這個元素添加／移除／切換 active 這個 class
block.classList.add('active');
block.classList.remove('active');
block.classList.toggle('active');

監聽 transitionend​

利用transitionend事件，監聽所有 block 上有 transition 的 CSS 屬性，並且透過 propertyName 來判斷是哪個 css 屬性：

const block = document.querySelector('.block');
// 監聽所有 block 上有 transition 的 CSS 屬性
block.addEventListener('transitionend', (e) => {
  console.log(e.propertyName);
});

作品頁面​

Day 1: JavaScript Drum Kit