iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 16
0
自我挑戰組

前端新手的學習筆記系列 第 16

Day16:每天一個小練習 - JS30-01-JS Drum Kit

  • 分享至 

  • xImage
  •  

依照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,否則無法出現移除效果。

練習
練習2←不使用立即函式的寫法


上一篇
Day15:每天一個小練習 - CSS毛玻璃效果
下一篇
Day17:每天一個小練習 - JS30-02-JS and CSS Clock
系列文
前端新手的學習筆記32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言