依照Alex老師的教學練習
首先去官網的Github下載範例檔,直接寫JS即可。
先寫出立即執行式,並放入要使用的監聽
(function () {
// 鍵盤、捲軸、物件旋轉,大多用window來做
window.addEventListener('keydown', playHandler);
//keydown = 可以按著不放
//keyup = 只能按一次
})();
開始寫 playHandler 方訓的內容,先確認有抓到資訊
let playHandler = e => {
// console.log(e);
//按鍵盤觸發後出現該按鍵資訊
//注意看key和keyCode
}
抓取節點,注意是ES6寫法
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const dom = document.querySelector(`div[data-key="${e.keyCode}"]`);
播放音效
audio.play();
為了使按住不放的效果更明顯,可以加上
audio.currentTime = 0;
//回到音效檔起始點,使按住不放時出現重複播放的效果
為了讓被觸發的按鍵效果更明顯,加入CSS效果
dom.classList.add('playing');
這時避免誤觸非指定的按鍵導致出錯,加上if判斷所按的按鍵是否正確
if (audio) {
audio.play();
audio.currentTime = 0;
}
if (dom) {
dom.classList.add('playing');
}
這時會發現可以發出聲音,而按過的按鍵也有改變外觀,但是改變一次就變不回去了,需要改成可以使效果消失。
// 每個key執行動畫後移除效果
document.querySelectorAll('.key').forEach(item => {
//動畫結束時觸發
item.addEventListener('transitionend', removeTransition)
});
寫需要觸發的removeTransition方訊
let removeTransition = e => {
// console.log(e);
if (e.propertyName === 'transform') {
//使用propertyName=transform做為指標
e.currentTarget.classList.remove('playing');
}
}
再把內容整理的比較好閱讀就完成了。
對了,注意按鍵的CSS內一定要有transition
,否則無法出現移除效果。