Jing's 技術筆記

[JS30] Day 1: JavaScript Drum Kit

JavaScript
2018/06/12 Share

Day 1: JavaScript Drum Kit

透過 JavaScript 模擬一個打鼓的頁面，在按下按鍵的同時，頁面上對應的字母按鈕會變大並加上邊框，同時具有樂器的聲音。

播放、增加動態效果

Step1 : 偵測鍵盤按鍵Keycode

為了知道我們鍵盤按鍵所對應的 Keycode ，所以我們先建立一個 window 的監聽事件去監聽’按下鍵盤’這個動作 (keydown)，所然後再用 console.log(e.keyCode) 來看看所對應的 Keycode。

1
2
window.addEventListener('keydown', e => console.log(e.keyCode));
// 偵測使用者按下按鍵的 Keycode

透過 這個網站 可以快速的查看對應的鍵碼。

Step2 : 播放聲音及改變樣式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function playSound(e){
  //根據html裡的 data-key 屬性 選擇對應的btn跟audio
  let audio = document.querySelector(`audio[data-key='${e.keyCode}']`);
  let btn = document.querySelector(`.key[data-key='${e.keyCode}']`);
  if(!audio) return false;
  if(!btn) return false;

  if(btn.classList.contains('cut'))return false;

  btn.classList.add('playing');
  btn.classList.add('cut');
  audio.currentTime = 0;
  audio.play();
}

這時，當我們按下按鍵後，特效跟音效都出來了，但還有個問題，就是按下去後畫面上的按鍵不會回復成原本的樣子。

所以我們要用 transitionend 事件去做處理 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//音樂播放結束時移除動畫
function reCut(e){
  let btn = document.querySelector(`.key[data-key='${e.keyCode}']`);
  if(!btn) return false;
  btn.classList.remove('cut');
}

let keys=document.querySelectorAll('.key');
keys.forEach(function(key){
  key.addEventListener('transitionend',removetrasition)
});
function removetrasition(e) {
  if(e.propertyName !== 'transform') return false;
  e.target.classList.remove('playing');
};

這時，就大功告成啦!

完整 JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function removetrasition(e) {
  if(e.propertyName !== 'transform') return false;
  e.target.classList.remove('playing');
}

function playSound(e){
  let btn = document.querySelector(`.key[data-key='${e.keyCode}']`);
  let audio = document.querySelector(`audio[data-key='${e.keyCode}']`);

  if(!audio) return false;
  if(!btn) return false;

  if(btn.classList.contains('cut'))return false;

  btn.classList.add('playing');
  btn.classList.add('cut');
  audio.currentTime = 0;
  audio.play();
}

function reCut(e){
  let btn = document.querySelector(`.key[data-key='${e.keyCode}']`);
  if(!btn) return false;
  btn.classList.remove('cut');
}

//音樂播放結束時移除動畫
let keys=document.querySelectorAll('.key');
keys.forEach(function(key){
  key.addEventListener('transitionend',removetrasition)
});

window.addEventListener('keydown',playSound);
window.addEventListener('keyup',reCut);

相關連結

CATALOG
  1. 1. Day 1: JavaScript Drum Kit
  2. 2. 播放、增加動態效果
    1. 2.1. Step1 : 偵測鍵盤按鍵Keycode
    2. 2.2. Step2 : 播放聲音及改變樣式
  3. 3. 完整 JS
  4. 4. 相關連結
Total : 11
2020
2019
2018
JavaScript ES6 Hexo CSS Git Algorithm
JavaScript JS30筆記 CSS Git Algorithm