likes
comments
collection
share

节奏狂潮：打造一个互动式鼓乐富应用

作者站长头像
站长
· 阅读数 53
节奏狂潮：打造一个互动式鼓乐富应用

概述

随着 HTML5 技术的进步，网页开发者能够创建越来越多互动性强、富有创意的应用。这篇文章将带你通过一个名为drump kit的互动式音乐鼓乐项目，深入了解富应用的概念和实现方法。我们将详细讲解如何使用 HTML、CSS 和 JavaScript 构建一个可以通过键盘敲击模拟鼓乐的网页应用，让我们来体验一下赛博鼓手！

目录

一、富应用的概念

二、示例项目概述

三、HTML结构

四、CSS样式

五、 JavaScript交互

六、总结

一、富应用的概念

富应用（Rich Internet Application，RIA）是指那些通过现代网页技术提供与桌面应用程序相似用户体验的网页应用。富应用与传统网页应用的区别在于其更强的交互性、更好的多媒体支持和优化的性能。以下是富应用的主要特点：

  • 交互性强：通过 JavaScript 和 Ajax 技术，富应用实现了流畅即时的用户交互。
  • 多媒体支持：HTML5 的音频、视频标签以及 Canvas API，使得富应用可以轻松集成音视频和动画元素。
  • 性能优化：富应用通常使用异步加载数据和内容，减少页面刷新次数，提升用户体验。
  • 响应式设计：使用 CSS3 媒体查询和 Flexbox 等布局技术，确保在不同设备和屏幕尺寸下提供一致的体验。

二、示例项目概述

drump kit是一个互动式音乐鼓乐富应用，用户可以通过按键盘上的按键来模拟不同的鼓声。该项目展示了 HTML、CSS 和 JavaScript 的综合应用，特别是如何利用这些技术创建一个用户体验良好的富应用。

项目文件结构如下：

  • index.html：定义网页结构的 HTML 文件。
  • common.css：包含样式定义的 CSS 文件。
  • common.js：实现交互功能的 JavaScript 文件。
  • sounds 文件夹：存放鼓乐声音文件。

三、HTML结构

在本项目中，我们使用 div 元素创建了代表每个鼓键的块，并使用 data-key 属性存储每个键的键码，同时添加了 audio 元素以便在按键时播放相应的声音。

标签结构层次

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>drump kit</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">clap</span>
            <audio src="sounds/clap.wav" data-key="65"></audio>
        </div>
        <div class="key" data-key="83">
            <div class="title">S</div>
            <span class="sound">hithat</span>
            <audio src="sounds/hithat.wav" data-key="83"></audio>
        </div>
        <div class="key" data-key="68">
            <div class="title">D</div>
            <span class="sound">kick</span>
            <audio src="sounds/kick.wav" data-key="68"></audio>
        </div>
        <div class="key" data-key="70">
            <div class="title">F</div>
            <span class="sound">openhat</span>
            <audio src="sounds/openhat.wav" data-key="70"></audio>
        </div>
        <div class="key" data-key="71">
            <div class="title">G</div>
            <span class="sound">boom</span>
            <audio src="sounds/boom.wav" data-key="71"></audio>
        </div>
        <div class="key" data-key="72">
            <div class="title">H</div>
            <span class="sound">ride</span>
            <audio src="sounds/ride.wav" data-key="72"></audio>
        </div>
        <div class="key" data-key="74">
            <div class="title">J</div>
            <span class="sound">snare</span>
            <audio src="sounds/snare.wav" data-key="74"></audio>
        </div>
        <div class="key" data-key="75">
            <div class="title">K</div>
            <span class="sound">tom</span>
            <audio src="sounds/tom.wav" data-key="75"></audio>
        </div>
        <div class="key" data-key="76">
            <div class="title">L</div>
            <span class="sound">tink</span>
            <audio src="sounds/tink.wav" data-key="76"></audio>
        </div>
    </div>
    <script src="./common.js"></script>
</body>
</html>

四、CSS 样式

CSS 用于为网页添加样式，使其更加美观。我们使用了 Flexbox 来实现键的水平和垂直居中布局，并添加了过渡动画和按键按下时的效果。

html {
    font-size: 10px; /* CSS inherit */
    background: url('./background.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 black;
    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 black; /* 立体感 */
}

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

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

五、JavaScript 交互

JavaScript 负责添加网页的交互功能。在这个项目中，我们监听 keydown 事件，当按下键时，我们通过 data-key 属性找到相应的 div 元素，并添加 playing 类来触发 CSS 动画，同时播放对应的音频。具体请看如下注释。

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

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

// 定义播放声音的函数
const playSound = (event) => {
    // 获取按键的建码
    const keyCode = event.keyCode;
      // 选择与键码对应的鼓键元素和音频元素
    const ele = document.querySelector(`.key[data-key="${keyCode}"]`);
    const audio = document.querySelector(`audio[data-key="${keyCode}"]`);
   // console.log(ele);
     // 如果找到对应的元素
    if (ele && audio) {
        // 添加 'playing' 类触发动画效果
        ele.classList.add('playing');
        // 将音频的播放时间重置为开始
        audio.currentTime = 0; 
        // 播放音频
        audio.play();
        
        setTimeout(() => {
            // 在 800 毫秒后移除 'playing' 类，结束动画效果
            ele.classList.remove('playing');
        }, 800);
    }
};

window.addEventListener('keydown', playSound); // 监听键盘按键事件

这便是我们完成的一个简单而又有趣的富应用！如果想获取源码可以到github获取。

节奏狂潮：打造一个互动式鼓乐富应用

总结

通过这个项目，展示了如何利用 HTML5、CSS 和 JavaScript 构建一个简单的富应用。富应用利用现代网页技术，实现了与桌面应用程序类似的用户体验。通过结构化的 HTML 来定义页面布局，使用 CSS 添加样式和动画效果，并使用 JavaScript 添加交互功能，这种富应用不仅能提高用户体验，还能展示 HTML5 的强大功能。希望这个项目能帮助各位更好地理解和掌握 HTML5 的使用技巧，并激发各位创建更多有趣和有用的网页应用！

转载自:https://juejin.cn/post/7369903163803680783
评论
请登录