大家好，第一次參加鐵人邦也第一次發文，會有許多該改進的地方，請大家多多包涵
JS30一直是許多人建議去做的練習系列，趁著這次活動，就一步一步把他完成吧！

Day1

先上DEMO頁面
第一天主要做的事情為透過監聽使用者按下的按鈕，是否是預設好帶有音效的按鈕，如果是的話，就發出相對應的音效，如果不是的話當然就不理會囉

接下來上code的部分：
首先在html上面，新增我們要監聽的區塊，然後綁定相對應的data-key，如果要查詢鍵盤的data-key，可以上這邊查詢

    <div class="keys">
        <div data-key="65" class="key">
            <div>A</div>
            <span class="sound">Drum1</span>
        </div>
        <div data-key="83" class="key">
            <div>S</div>
            <span class="sound">Drum2</span>
        </div>
        <div data-key="68" class="key">
            <div>D</div>
            <span class="sound">Drum3</span>
        </div>
        <div data-key="70" class="key">
            <div>F</div>
            <span class="sound">Drum4</span>
        </div>
        <div data-key="71" class="key">
            <div>G</div>
            <span class="sound">Drum5</span>
        </div>
        <div data-key="72" class="key">
            <div>H</div>
            <span class="sound">Drum6</span>
        </div>
        <div data-key="74" class="key">
            <div>J</div>
            <span class="sound">Drum7</span>
        </div>
        <div data-key="75" class="key">
            <div>K</div>
            <span class="sound">Drum8</span>
        </div>
        <div data-key="76" class="key">
            <div>L</div>
            <span class="sound">Drum9</span>
        </div>
    </div>

    <audio data-key="65" src="sounds/drum1.mp3"></audio>
    <audio data-key="83" src="sounds/drum2.mp3"></audio>
    <audio data-key="68" src="sounds/drum3.mp3"></audio>
    <audio data-key="70" src="sounds/drum4.mp3"></audio>
    <audio data-key="71" src="sounds/drum5.mp3"></audio>
    <audio data-key="72" src="sounds/drum6.mp3"></audio>
    <audio data-key="74" src="sounds/drum7.mp3"></audio>
    <audio data-key="75" src="sounds/drum8.mp3"></audio>
    <audio data-key="76" src="sounds/drum9.mp3"></audio>

在js的部分呢，要做的事情為監聽當使用者按下對應按鍵後發出相對應的音效，以及同時在該div區塊上新增上有變化效果的classname，以及監聽當變化完成之後，拿掉這個classname

 //選擇class為.key的元素
        let keys = Array.from(document.querySelectorAll('.key'))
        //keys不是真的陣列，是nodeList，所以無法使用所有array的methods，使用forEach綁定事件

        // keys.forEach(function(key){
        //     addEventListener('transitionend',removeTransition)
        // }) 可簡寫成箭頭函式
        keys.forEach(key => key.addEventListener('transitionend',removeTransition))

        window.addEventListener('keydown',playSound)
        //在transition結束時會觸發的function
        function removeTransition(e){
            //e.propertyName會包含所有transition的屬性，我們這邊只需要transform
            if(e.propertyName !== 'transform') return;
            e.target.classList.remove('playing')
        }
        //播放音效的function
        function playSound(e){
            const audio = document.querySelector(`audio[data-key="${e.keyCode}"`)
            const key = document.querySelector(`div[data-key="${e.keyCode}"`)
            //如果按下的按鍵不是預先設有音效的按鍵，就return掉結束function
            if(!audio) return
            //按下的按鍵增加playing這個class 
            key.classList.add('playing')
            //讓每次播放音效都從0秒開始
            audio.currentTime = 0
            //播放音效
            audio.play()
        }

以上就是第一天的內容！還有29天慢慢完成吧。