模拟实现打鼓效果（小demo，可搬运）

话不多说，直接上代码！

     <p class="intro">请在键盘上按下对应的键(模拟打鼓效果)</p>
     <ul class="wrapper">
        <li data-key="65">
            <audio src="./sounds/01 - JavaScript Drum Kitsoundsclap.wav"></audio>
            <p>
                A
                <span>CLAP</span>
            </p>
        </li>
        <li data-key="83">
            <audio src="./sounds/01 - JavaScript Drum Kitsoundshihat.wav"></audio>
            <p>
                S
                <span>CLAP</span>
            </p>
        </li>
        <li data-key="68">
            <audio src="./sounds/01 - JavaScript Drum Kitsoundskick.wav"></audio>
            <p>
                D
                <span>CLAP</span>
            </p>
        </li>
        <li data-key="70">
            <audio src="./sounds/01 - JavaScript Drum Kitsoundsopenhat.wav"></audio>
            <p>
                F
                <span>CLAP</span>
            </p>
        </li>
        <li data-key="71">
            <audio src="./sounds/01 - JavaScript Drum Kitsoundsboom.wav"></audio>
            <p>
                G
                <span>CLAP</span>
            </p>
        </li>
        <li data-key="72">
            <audio src="./sounds/01 - JavaScript Drum Kitsoundsride.wav"></audio>
            <p>
                H
                <span>CLAP</span>
            </p>
        </li>
        <li data-key="74">
            <audio src="./sounds/01 - JavaScript Drum Kitsoundssnare.wav"></audio>
            <p>
                J
                <span>CLAP</span>
            </p>
        </li>
        <li data-key="75">
            <audio src="./sounds/01 - JavaScript Drum Kitsoundstom.wav"></audio>
            <p>
                K
                <span>CLAP</span>
            </p>
        </li>
        <li data-key="76">
            <audio src="./sounds/01 - JavaScript Drum Kitsoundstink.wav"></audio>
            <p>
                L
                <span>CLAP</span>
            </p>
        </li>
    </ul>

 html,
    body,
    ul,
    li,
    p {
        margin: 0;
        padding: 0;
    }

    body {
        text-align: center;
    }

    .intro {
        margin: 150px 0 0;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 5px;
    }

    .wrapper {
        display: inline-block;
        height: 80px;
        margin: 50px 0 0;
    }

    /* 当用户按下键时，对应的盒子改变样式 */
    .playing {
        border-color: #f8c306 !important;
        transform: scale(1.2);
    }

    .wrapper li {
        float: left;
        width: 100px;
        height: 80px;
        margin-right: 20px;
        border: 5px solid #111;
        border-radius: 10px;
        background-color: #aaa;
        list-style: none;
        font-size: 28px;
        color: #f1f1f1;
        font-weight: 400;
        text-shadow: 1px 1px 5px #111;
        transition: all 0.1s;
    }

    .wrapper li:last-of-type {
        margin: 0;
    }

    li p {
        margin: 10px 0;
    }

    li span {
        display: block;
        text-shadow: 2px 2px 5px #111;
        font-size: 12px;
        color: #f8c306;
    }

  // 定义一个包含了 有效的按键的集合
        let drumKey = new Set([65, 83, 68, 70, 71, 72, 74, 75, 76]);

        document.onkeydown = function (e) {
            // 如果按下的键不是有效的，则什么也不会发生
            if (!drumKey.has(e.keyCode)) {
                return;
            }

            let clickList = document.querySelector(`li[data-key="${e.keyCode}"]`);            // 获取与按下的键匹配的li元素
            clickList.children[0].currentTime = 0;       // 每次播放都从头开始
            clickList.children[0].play();                // 播放音频
            clickList.classList.add("playing");          // 改变样式
            clickList.addEventListener("transitionend", function () {
                clickList.classList.remove("playing");       // 动画过渡结束后，变回初始样式
            })

        }

音频文件地址：Web-H5-C3-JavaScript/Drum Demo - Audio File at main · XiaoEr-Who/Web-H5-C3-JavaScript (github.com)

代码实现效果图：

 

注意：此demo的实现参考了 JavaScript30 - 一个月纯 JS 挑战中文指南 | JavaScript30

如果想了解更多小案例的实现，可以去借鉴一下

小知识点：

在写这个demo的时候，阅读了     AudioContext - Web API 接口参考 | MDN

这个接口是用于控制音频的，允许开发者来自选音频源，对音频添加特效，使音频可视化，添加空间效果（如平移）.

如果想实现更多复杂的与音频有关的案例，可以参考一下