建立鼓组网站-css教程-PHP中文网

Build a Drum Kit Website

介绍

各位开发者大家好！我很高兴与您分享我的最新项目：鼓组。该项目是练习 JavaScript 的一种有趣且交互式的方式，特别是在处理用户输入和音频播放方面。无论您是想要深入研究 JavaScript 的初学者还是热爱音乐和编码的人，这个项目都非常适合您。

项目概况

鼓套件 是一个模拟鼓组的交互式 Web 应用程序。用户可以通过单击鼓按钮或按键盘上的相应键来播放声音。该项目演示了如何使用事件、音频和 CSS 动画来创建响应灵敏且引人入胜的用户体验。

特征

交互式鼓按钮：播放不同鼓声的可点击按钮。
键盘控制：按下特定按键即可触发鼓声。
视觉反馈：按下按钮时会产生动画，提供即时视觉反馈。
响应式设计：布局可根据不同的屏幕尺寸进行调整，确保跨设备的体验一致。

使用的技术

HTML：提供鼓组界面的结构。
CSS：设置鼓组的样式，包括按钮动画和整体布局。
JavaScript：处理用户交互、声音播放和动画。

项目结构

以下是项目结构的快速浏览：

Drum-Kit/
├── index.html
├── styles.css
└── index.js

登录后复制

index.html：包含鼓组的 HTML 结构。
styles.css：包括鼓组和动画的 CSS 样式。
index.js：管理用户交互、音效和动画。

安装

要开始该项目，请按照以下步骤操作：

克隆存储库：

git clone https://github.com/abhishekgurjar-in/Drum-Kit.git

登录后复制

打开项目目录:
```
cd Drum-Kit
```
登录后复制
运行项目:
- 在网络浏览器中打开index.html 文件以查看鼓组的运行情况。

用法

在网络浏览器中打开网站。
点击鼓按钮或按下相应的按键（w、a、s、d、j、k、l）来演奏不同的鼓声。
按下按钮时观察按钮动画以获得视觉反馈。

代码说明

超文本标记语言

index.html 文件设置鼓组的结构，包括每个鼓声音的按钮和页脚。这是一个片段：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Drum Kit</title>
    <link rel="stylesheet" href="styles.css" />
    <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" />
  </head>
  <body>
    <h1 id="title">Drum ? Kit</h1>
    <div class="set">
      <button class="w drum">w</button>
      <button class="a drum">a</button>
      <button class="s drum">s</button>
      <button class="d drum">d</button>
      <button class="j drum">j</button>
      <button class="k drum">k</button>
      <button class="l drum">l</button>
    </div>
    <script src="index.js" charset="utf-8"></script>
    <footer>Made with ❤️ by Abhishek Gurjar</footer>
  </body>
</html>

登录后复制

CSS

styles.css 文件设置鼓组的样式，包括鼓按钮和动画。以下是一些关键样式：

body {
  text-align: center;
  background-color: #283149;
}

h1 {
  font-size: 5rem;
  color: #DBEDF3;
  font-family: "Arvo", cursive;
  text-shadow: 3px 0 #DA0463;
}

footer {
  color: #DBEDF3;
  font-family: sans-serif;
}

.w { background-image: url("images/tom1.png"); }
.a { background-image: url("images/tom2.png"); }
.s { background-image: url("images/tom3.png"); }
.d { background-image: url("images/tom4.png"); }
.j { background-image: url("images/snare.png"); }
.k { background-image: url("images/crash.png"); }
.l { background-image: url("images/kick.png"); }

.set {
  margin: 10% auto;
}

.pressed {
  box-shadow: 0 3px 4px 0 #DBEDF3;
  opacity: 0.5;
}

.drum {
  outline: none;
  border: 10px solid #404B69;
  font-size: 5rem;
  font-family: 'Arvo', cursive;
  line-height: 2;
  font-weight: 900;
  color: #DA0463;
  text-shadow: 3px 0 #DBEDF3;
  border-radius: 15px;
  display: inline-block;
  width: 150px;
  height: 150px;
  text-align: center;
  margin: 10px;
  background-color: white;
}

登录后复制

JavaScript

index.js 文件控制鼓组的功能，包括声音播放和按钮动画。这是一个片段：

const numberOfDrumButtons = document.querySelectorAll(".drum").length;

for (let i = 0; i < numberOfDrumButtons; i++) {
  document.querySelectorAll(".drum")[i].addEventListener("click", function () {
    const buttonInnerHTML = this.innerHTML;

    makeSound(buttonInnerHTML);
    buttonAnimation(buttonInnerHTML);
  });
}

document.addEventListener("keypress", function (event) {
  makeSound(event.key);
  buttonAnimation(event.key);
});

function makeSound(key) {
  switch (key) {
    case "w":
      const tom1 = new Audio("sounds/tom-1.mp3");
      tom1.play();
      break;
    case "a":
      const tom2 = new Audio("sounds/tom-2.mp3");
      tom2.play();
      break;
    case "s":
      const tom3 = new Audio("sounds/tom-3.mp3");
      tom3.play();
      break;
    case "d":
      const tom4 = new Audio("sounds/tom-4.mp3");
      tom4.play();
      break;
    case "j":
      const snare = new Audio("sounds/snare.mp3");
      snare.play();
      break;
    case "k":
      const crash = new Audio("sounds/crash.mp3");
      crash.play();
      break;
    case "l":
      const kick = new Audio("sounds/kick-bass.mp3");
      kick.play();
      break;
    default:
      console.log(key);
  }
}

function buttonAnimation(currentKey) {
  const activeButton = document.querySelector("." + currentKey);
  activeButton.classList.add("pressed");

  setTimeout(function () {
    activeButton.classList.remove("pressed");
  }, 100);
}

登录后复制