JavaScript 30 Day -- 01 JavaScript Drum Kit

實現效果：

模擬一個打鼓的頁面。用戶在鍵盤上按下幾個鍵時，頁面上與字母對應的按鈕變大變亮，對應的鼓點聲音響起來。

關鍵點：

鍵盤事件-監聽(addEventListener)  當按下鍵盤的時候
觸發 transitionend 必須要有transition transform這兩個css屬性
獲取對應的鍵document.querySelector(`audio[data-key="${e.keyCode}"]`);

HTML：

     <div>
        <ul>
            <li data-key='65'>A</li>
            <li data-key='83'>S</li>
            <li data-key='68'>D</li>
            <li data-key='70'>F</li>
            <li data-key='71'>G</li>
            <li data-key='72'>H</li>
            <li data-key='74'>J</li>
            <li data-key='75'>K</li>
            <li data-key='76'>L</li>
        </ul>
    </div>
    <audio data-key='65' src="sounds/clap.wav"></audio>
    <audio data-key='83' src="sounds/hihat.wav"></audio>
    <audio data-key='68' src="sounds/kick.wav"></audio>
    <audio data-key='70' src="sounds/openhat.wav"></audio>
    <audio data-key='71' src="sounds/boom.wav"></audio>
    <audio data-key='72' src="sounds/ride.wav"></audio>
    <audio data-key='74' src="sounds/snare.wav"></audio>
    <audio data-key='75' src="sounds/tom.wav"></audio>
    <audio data-key='76' src="sounds/tink.wav"></audio>

javascript：

window.addEventListener('keydown', function(e) {
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    const key = document.querySelector(`li[data-key="${e.keyCode}"]`);

    if (!audio) {
        return;
    }

    audio.currentTime = 0;
    // console.log(key);
    // console.log(audio);
    // console.log(e.keyCode);


    audio.play();


    key.classList.add("playing");
    // key.classList.remove("playing");
    // key.classList.toggle("playing");
});


function foo(event) {
    if (event.propertyName !== 'transform') {
        return;
    }
    console.log(event.propertyName);
    this.classList.remove('playing');
    // console.log(e.propertyName);
    // console.log(1);
}
// alert(removeTransition);
const keys = Array.from(document.querySelectorAll('li'));
keys.forEach(key => key.addEventListener('transitionend',foo));
// console.log(keys);