利用HTML5和CSS3打造互动音乐键盘应用

猫猫会很灵动的用小手按下按钮发出声音和主人进行交流 手机键盘应用也有声音特效 那么 这些是如何完成的 我们是不是也可以创建交互式和视觉吸引人的网页应用呢

想的都是问题 做的才是答案

1. 项目概述

我们的目标是创建一个网页应用，用户可以通过键盘上的特定按键来触发不同的音效。这个应用不仅展示了HTML5和CSS3的功能，还提供了一个有趣的交互体验。

2. 技术栈

• HTML5: 用于构建页面的结构和内容。
• CSS3: 用于页面的样式设计和动画效果。
• JavaScript: 用于处理用户输入和音效的播放。

3. 页面结构

一个项目不论大小 我们需要养成一个好习惯先完成页面布局 再完成样式调整 最后才是交互设计

首先是布局 我们可以很直观地想到div的嵌套

<div class="keys">
        <div class="key" data-key="65">
            <div class="title">A</div>
            <span class="sound">CLAP</span>
        </div>
        ...
</div>

所需元素有了 我们就可以想想怎么排列了，图中是一个垂直水平居中，并且有一些内外边距的，除此之外 为了使得更有立体感和场景效果，我们需要做一些边框、背景、文字颜色和阴影，以及一个过渡效果，使得按键时有视觉反馈。

样式设计

水平垂直居中

.keys

display: flex;将该元素设置为弹性容器，以便内部元素可以灵活布局。

align-items: center;垂直居中容器内的元素。

justify-content: center;水平居中容器内的元素。
*

阴影、动画等

transition: all .7s ease;

• 为所有可动画的CSS属性设置过渡效果，持续时间为0.7

秒，过渡效果为ease（先慢后快再慢）。

text-shadow: 0 0 5px rgb(0, 0, 0);

• 为文本添加阴影，颜色为黑色，偏移量为0，模糊距离为5px。

交互逻辑

我们需要找到我们按下的哪一个键盘、并且做出响应

1. 选择所有按键元素

const keys = document.querySelectorAll('.key');

• 使用 document.querySelectorAll() 方法来选择所有具有类名 key 的元素。
• 将这些元素存储在一个名为 keys 的常量数组中。

2. 遍历按键元素并准备添加事件监听器 . 选择所有按键元素

for(let i = 0; i < keys.length; i++){  
    let key = keys[i];  

}

• 使用 for 循环遍历 keys 数组中的每个元素。
• 在每次迭代中，将当前元素存储在变量 key 中。

3. 在 playSound 函数中获取按键的 keyCode 并进行匹配

const keyCode = event.keyCode;  
  
    // 使用 keyCode 尝试查找与按键对应的 HTML 元素（假设这些元素有 data-key 属性）。 
    const ele = document.querySelector(`.key[data-key="${keyCode}"]`);  
    // 使用keyCode 尝试查找与按键对应的音频元素
    const audio = document.querySelector(`audio[data-key="${keyCode}"]`);  
    // 如果找到了与按键对应的视觉元素（ele），则给它添加一个 'playing' 类，以触发动画效果。  
    if (ele) {  
        ele.classList.add('playing');  
        // 使用 setTimeout 延迟 800 毫秒后移除 'playing' 类，结束动画效果。  
        setTimeout(() => {  
            ele.classList.remove('playing');  
        }, 800);  
    }  
    // 如果找到了与按键对应的音频元素（audio），则播放该音频。  
    // 首先重置音频的播放位置到开头（currentTime = 0），然后开始播放。  
    if (audio) {  
        audio.currentTime = 0; // 重置音频播放位置  
        audio.play();  
    }  

}

至此 已成艺术

完整代码

// 获取页面上所有带有类名 '.key' 的元素，并将它们存储在一个 NodeList 集合中  
const keys = document.querySelectorAll('.key');  
  
// 遍历所有的 '.key' 元素  
for(let i = 0; i < keys.length; i++){  
    // 将当前的 '.key' 元素赋值给变量 key  
    let key = keys[i];  
      
    // 注意：这里只是遍历了元素，但并未对它们执行任何操作或添加事件监听器  
}  
  
// 定义一个箭头函数 playSound，用于在键盘按键释放时播放声音  
const playSound = () => {  
    // 尝试从事件对象中获取按键的 keyCode
    const keyCode = event.keyCode;  
    // 使用 keyCode 查找页面上具有相应 data-key 属性的 '.key' 元素  
    const ele = document.querySelector(`.key[data-key="${keyCode}"]`);  
    // 使用相同的 keyCode 查找页面上具有相应 data-key 属性的 audio 元素  
    const audio = document.querySelector(`audio[data-key="${keyCode}"]`);  
    // 如果找到了与按键对应的 '.key' 元素  
    if (ele) {  
        // 为该元素添加 'playing' 类，触发视觉反馈或动画  
        ele.classList.add('playing');  
        // 使用 setTimeout 延迟 800 毫秒后移除 'playing' 类，结束动画或反馈  
        setTimeout(() => {  
            ele.classList.remove('playing');  
        }, 800);  
    }  
    // 如果找到了与按键对应的 audio 元素  
    if (audio) {  
        // 重置音频的播放位置到开头  
        audio.currentTime = 0;  
        // 播放音频  
        audio.play();  
    }  
};  
  
// 为 window 对象添加 'keyup' 事件监听器，当键盘按键释放时调用 playSound 函数  
// 注意：这里应该确保 playSound 函数可以访问到 event 对象  
window.addEventListener('keyup', playSound);

/* css reset */
html {
    font-size: 10px;
    /*  css inhert */
    background: url('./background2.jpg') bottom center no-repeat;
    background-size: cover;
}

html,
body {
    height: 100%;
}

/* html{
    height: 100vh;
} */
.keys {
    /* 水平垂直居中 */
    display: flex;
    min-height: 100%;
    align-items: center;
    justify-content: center;
}

.key {
    border: 1px solid #000;
    border-radius: 5px;
    margin: 10px;
    font-size: 15px;
    padding: 10px 5px;
    /* 过渡动画 */
    transition: all .7s ease;
    width: 100px;
    text-align: center;
    color: white;

    background: rgba(0, 0, 0, .4);
    text-shadow: 0 0 5px rgb(0, 0, 0);
}
.key .title{
    font-size: 40px;
}
.sound{
    

    font-size: 12px;  
    text-transform: uppercase;
    letter-spacing: 5px;
    color: #d7f869;
}
.playing{
    transform: scale(1.1);
    border-color: #ffc600;
    box-shadow: 0 0 5px #ffc600;
}