前言

页面的富应用（Rich Internet Applications, RIAs）指的是使用Web技术创建的具有丰富用户界面和交互性的应用程序

在我们日常使用的页面中往往都含有丰富有趣的富应用，例如：B站最热门的弹幕，抖音

正文：制作"架子鼓"

利用我们雄厚的HTML+CSS基础搭建出简易的架子鼓大框架

使用HTML搭建基础模型（这里我制作的比较简易，只使用了少量的块，作为开发者可以丰富自己的页面，这里就不多添加了~_~）

html 复制代码

<body>
    <div class="keys">
        <div class="key" data-key="65">
            <div class="title">A</div>
            <span class="sound">cilp</span>
        </div>
      //more。。。。。。。。。。
</body>

使用CSS浅浅美化一下（只介绍了keys部分，完整代码将会在最下方给出）

css 复制代码

.key{
    border: 4px solid #000;
    border-radius: 5px;
    margin: 10px;
    padding: 10px 5px;
    font-size: 15px;
    /*过渡动画*/
    transition: all .7s ease;
    width: 100px;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.5);
    /*立体感*/
    text-shadow: 0 0 10px #000;
}

接下来开始使用JS来实现架子鼓的功能

调用函数使用document.querySelectorAll方法获取所有类名为key的元素，并将它们存储在名为keys的变量中。

js 复制代码

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

遍历 keys 集合（由类名为 .key 的元素构成），在每次循环中处理集合中的一个元素。

js 复制代码

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

定义一个名为 playSound 的箭头函数，它用于处理键盘事件。当用户按下键盘上的键时，这个函数会被触发。

event 参数包含了关于触发事件的信息。
keyCode 变量存储了触发事件的键的键盘码。

js 复制代码

const playSound = (event) =>{
    //console.log('sound');
    const keyCode = event.keyCode;
    const audioFile = audioFiles[keyCode];

创建一个audioFiles 对象，它将键盘码映射到对应的音频文件路径。如果 keyCode 存在于 audioFiles 中，那么：

创建一个 Audio 对象 audio，并使用 audioFile 路径初始化它。
调用 audio.play() 播放音频文件。

js 复制代码

if (audioFile) {
        const audio = new Audio(audioFile);
        audio.play();

使用 querySelector 查找具有 data-key 属性等于 keyCode 的元素。

如果找到了匹配的元素 ele：
- 添加 playing CSS 类，以改变元素的样式，表示键被按下。
- 使用 setTimeout 函数，在800毫秒后执行一个箭头函数，该函数会：
  - 移除 playing 类，恢复元素的原始状态。
  - 暂停音频（如果仍在播放）。
  - 将音频的当前时间设置为0，以便下次播放时从头开始。

js 复制代码

const ele = document.querySelector(`.key[data-key="${keyCode}"]`);//选择器
     //console.log(ele);
     if (ele){
         ele.classList.add('playing');
         setTimeout(()=>{
              ele.classList.remove('playing')
              audio.pause();
              audio.currentTime = 0; // 重置音频到开头
            },800)
        }

在最后，使用 addEventListener 方法向全局 window 对象添加了一个事件监听器，监听的是 keyup 事件。keyup 事件在用户释放键盘上的键时触发。当这个事件发生时，会调用传递的回调函数 playSound。

js 复制代码

window.addEventListener('keyup',playSound)

至此,简易的网页drumpKit架子鼓就做好了

可惜这里无法展示完整的功能

下面带来完整代码（html + css + js）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rich Web Application With HTML5</title>
    <link rel="stylesheet" href="./common.css">
</head>
<body>
    <div class="keys">
        <div class="key" data-key="65">
            <div class="title">A</div>
            <span class="sound">cilp</span>
        </div>
        <div class="key" data-key="83">
            <div class="title">S</div>
            <span class="sound">hihat</span>
        </div>
        <div class="key" data-key="68">
            <div class="title">D</div>
            <span class="sound">kick</span>
        </div>
        <div class="key" data-key="70">
            <div class="title">F</div>
            <span class="sound">openhat</span>
        </div>
        <div class="key" data-key="71">
            <div class="title">G</div>
            <span class="sound">boom</span>
        </div>
        <div class="key" data-key="72">
            <div class="title">H</div>
            <span class="sound">sound</span>
        </div>
        <div class="key" data-key="74">
            <div class="title">J</div>
            <span class="sound">snare</span>
        </div>
        <div class="key" data-key="75">
            <div class="title">K</div>
            <span class="sound">tom</span>
        </div>
        <div class="key" data-key="76">
            <div class="title">L</div>
            <span class="sound">tink</span>
        </div>
    </div>
    <script src="./commom.js"></script>
</body>
</html>

css 复制代码

/*css reset*/
html{
    font-size: 10px;/*css inhert */
    background: url('./11.JPG') bottom center;
    background-size: cover;
}
html,body{
    height: 100%;
}
.keys{
    display: flex;
    min-height: 100%;
    align-items: center;
    justify-content: center;
}
.key{
    border: 4px solid #000;
    border-radius: 5px;
    margin: 10px;
    padding: 10px 5px;
    font-size: 15px;
    /*过渡动画*/
    transition: all .7s ease;
    width: 100px;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.5);
    /*立体感*/
    text-shadow: 0 0 10px #000;
}

.key:title{
    font-size: 40px;
}
.sound{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: aquamarine;

}
.playing{
    transform: scale(1.1);
    border-color: aquamarine;
    box-shadow: 0 0 5px aquamarine;
}

js 复制代码

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

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

    //key.addEventListener
}

const audioFiles = {
    65: 'html5/drumpKit/sounds/clap.wav', // 数字1
    83: 'html5/drumpKit/sounds/hihat.wav', // 数字2
    68: 'html5/drumpKit/sounds/kick.wav', 
    70: 'html5/drumpKit/sounds/openhat.wav', 
    71: 'html5/drumpKit/sounds/boom.wav', 
    72: 'html5/drumpKit/sounds/ride.wav', 
    74: 'html5/drumpKit/sounds/snare.wav', 
    75: 'html5/drumpKit/sounds/tom.wav', 
    76: 'html5/drumpKit/sounds/tink.wav', 
    // ... 添加更多键和对应的音频文件
  };


const playSound = (event) =>{
    //console.log('sound');
    const keyCode = event.keyCode;
    const audioFile = audioFiles[keyCode];


    if (audioFile) {
        const audio = new Audio(audioFile);
        audio.play();


     //console.log(keyCode)
     const ele = document.querySelector(`.key[data-key="${keyCode}"]`);//选择器
     //console.log(ele);
     if (ele){
         ele.classList.add('playing');
         setTimeout(()=>{
              ele.classList.remove('playing')
              audio.pause();
              audio.currentTime = 0; // 重置音频到开头
            },800)
        }
    }
}



window.addEventListener('keyup',playSound)

JS交互开发富应用，在键盘上弹奏drumpKit架子鼓

前言

正文：制作"架子鼓"

接下来开始使用JS来实现架子鼓的功能

至此,简易的网页drumpKit架子鼓就做好了