用html，css以及JavaScript创建一个有趣的“键盘版贝斯”

[前言]

现如今，短视频发展越来越迅速，大家的手机上基本都有抖音。而在我们刷抖音的时候，各色各样的视频被推送到我们的账户，看到某些视频的时候可能就突然对此有了很大的兴趣，比如看到了乐器的演奏，觉得很酷，很想要试一试，而实体乐器又觉得比较笨重，也要花费很多钱。其实，用html，css以及JavaScript即可创建一个键盘版贝斯，让我们摆脱笨重的实体乐器，仅仅依靠我们的键盘，就可以弹奏出那些动人的音符。

效果展示：通过按下不同的键位，会发出对应的音频，从而实现演奏乐曲的目的。

具体思路：首先我们要做出页面效果，因为我们这个页面的数据导入不多，所以直接使用多个div标签进行渲染，div的个数也就对应音符的个数，对每个div加上音符的中文注解，可以根据自己的喜好进行修改。同时，因为我们要能够进行演奏，所以每一个按键按下后都要有对应音符的音乐，因此我们还要使用audio标签导入我们的音频，其中的"data-key"为每个音频元素提供了一个唯一的标识符，以便通过敲击键盘准确地找到并触发相关音频播放。最后再用css对div进行调整，以达到自己想要的效果。

由于我们有背景图片以及音频，我们需要先将这些打包好放进文件夹中,大家可以在网上自行搜索相关的音频以及自己喜欢的背景打包好放进文件夹中即可

html：

js 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘版贝斯</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="keys">
        <div class="key">
            <div>A</div>
            <span class="sound">clap</span>
        </div>
        <div class="key">
            <div>S</div>
            <span class="sound">hihat</span>
        </div>
        <div class="key">
            <div>D</div>
            <span class="sound">kick</span>
        </div>
        <div class="key">
            <div>F</div>
            <span class="sound">openhat</span>
        </div>
        <div class="key">
            <div>G</div>
            <span class="sound">boom</span>
        </div>
        <div class="key">
            <div>H</div>
            <span class="sound">ride</span>
        </div>
        <div class="key">
            <div>J</div>
            <span class="sound">snare</span>
        </div>
        <div class="key">
            <div>K</div>
            <span class="sound">tom</span>
        </div>
        <div class="key">
            <div>L</div>
            <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>

</body>
</html>

css：

js 复制代码

html{
    font-size: 10px;
    background: url(sounds/bg.jpeg) bottom center;
    background-size: 100% 100%;
    background-attachment: fixed;
}
html, body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.keys{
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
}
.key{
    border-radius: 0.5rem;
    border: 0.4rem solid #000;
    margin: 1rem;
    width: 10rem;
    font-size: 1.5rem;
    padding: 1rem 0.5rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    text-shadow: 0 0 0.5rem #000;
}
.key > div{
    font-size: 4rem;
}
.sound{
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    color: #fcc600;
}
.playing{
    transform: scale(1.1);
    border-color: #ffc600;
    box-shadow: 0 0 5px #fcc600
}
audio{
    display: flex;
}

其次，要想达到按下键盘就有对应音乐，那我们还要为每个"音符"加上监听事件：定义一个playSonud(e)函数,并将事件对象（即用户按下的键的信息）传递给它。在这个函数中，使用 document.querySelector 方法查找文档中所有 audio 元素，并在其中寻找 data-key 属性值与 e.keyCode 相等的音频元素。e.keyCode 是一个数字，表示与被按下键对应的键码。if(!audio)return;用来检查是否找到对应的音频元素。 audio.currentTime = 0;：将音频播放进度重置为0，确保每次按下键时音频从开头开始播放。这使得我们能够特意重复播放音频，不会受到上次播放进度的影响。audio.play();：调用音频元素的 play 方法，以实际开始播放音频。window.addEventListener('keydown', playSonud)在浏览器窗口上添加了一个事件监听器，当用户按下键盘上的任意键时会触发 keydown 事件，并调用 playSonud 函数。

JavaScript:

js 复制代码

<script>
        function playSonud(e){
            // 判断用户输入的值，找到对应的data-key，让该 audio 播放
            const audio = document.querySelector(`audio[data-key = "${e.keyCode}"]`)
            if(!audio) return;
            // 确保是从 0 开始播放的
            audio.currentTime = 0;
            
            audio.play()
        }

        // 监听用户键盘敲击事件
        window.addEventListener('keydown', playSonud)
        // 键盘对应音频
    </script>

这样我们就做好了一个键盘版的贝斯啦，可以用贝斯演奏我们喜欢的乐曲，大家可以一起动手试一试呀。