iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
0
Modern Web

JavaScript 30系列 第 1

JavaScript 30 #01 - JavaScript Drum Kit

<<學習重點>>

  • keyboard event
    (typical 3 tpyes)
  • dataset
    (selector)
  • class
    (classList)
  • audio
    (html tag)
  • flag
    (remark:標記不再觸發)
  • IIFE
    (closure:封包)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JS Drum Kit</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>


    <div class="keys">
        <div data-key="65" class="key">
            <kbd>A</kbd>
            <span class="sound">clap</span>
        </div>
        <div data-key="83" class="key">
            <kbd>S</kbd>
            <span class="sound">hihat</span>
        </div>
        <div data-key="68" class="key">
            <kbd>D</kbd>
            <span class="sound">kick</span>
        </div>
        <div data-key="70" class="key">
            <kbd>F</kbd>
            <span class="sound">openhat</span>
        </div>
        <div data-key="71" class="key">
            <kbd>G</kbd>
            <span class="sound">boom</span>
        </div>
        <div data-key="72" class="key">
            <kbd>H</kbd>
            <span class="sound">ride</span>
        </div>
        <div data-key="74" class="key">
            <kbd>J</kbd>
            <span class="sound">snare</span>
        </div>
        <div data-key="75" class="key">
            <kbd>K</kbd>
            <span class="sound">tom</span>
        </div>
        <div data-key="76" class="key">
            <kbd>L</kbd>
            <span class="sound">tink</span>
        </div>
    </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>

    <script>


        (function() {
            //keypress: keycode不一致,先不考慮
            // window.addEventListener('keypress', function(e) {
            //     console.log("keypress" + e);
            // })

            //keyup:適合單一執行
            // window.addEventListener('keyup', function(e) {
            //     console.log("keyup" + e);
            // })

            //keydown:容許重複執行
            window.addEventListener('keydown', function(e) {
                let button = 
                    document.querySelector(
                        `.key[data-key="${e.keyCode.toString()}"]`
                        );
                let audio = 
                    document.querySelector(
                        `audio[data-key="${e.keyCode.toString()}"]`
                        );

                if (button) {
                    if (button.classList.contains("down")) return false;
                    button.classList.add("playing");
                    button.classList.add("down");
                }
                if (audio) {
                    //聲音播放位置歸零
                    audio.currentTime = 0;
                    audio.play();
                }
            })

            window.addEventListener('keyup', function(e) {
                let button =
                    document.querySelector(
                        `.key[data-key="${e.keyCode.toString()}"]`
                        );

                if (button) {
                    button.classList.remove("down");
                }

            })

            //取出來的很像是陣列的變數
            let keys = document.querySelectorAll(".key");
            keys.forEach(function(key) {
                //如果css有下transition的方法:transition結束都會執行一次
                key.addEventListener("transitionend", function(e) {
                    if (e.propertyName === "transform") {
                        this.classList.remove("playing");
                    }
                })
            })
        })()
    </script>


</body>

</html>

下一篇
JavaScript 30 #02 - JS and CSS Clock
系列文
JavaScript 3010
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言