Créer un site Web de kit de batterie-tutoriel CSS-php.cn

Créer un site Web de kit de batterie

王林

Libérer： 2024-08-15 06:03:02

original

241 Les gens l'ont consulté

Build a Drum Kit Website

Introduction

Bonjour, amis développeurs ! Je suis ravi de partager mon dernier projet avec vous : un Kit de batterie. Ce projet est une manière amusante et interactive de pratiquer JavaScript, notamment dans la gestion des entrées utilisateur et de la lecture audio. Que vous soyez un débutant souhaitant vous plonger dans JavaScript ou quelqu'un qui aime la musique et le codage, ce projet est parfait pour vous.

Aperçu du projet

Le Drum Kit est une application Web interactive qui simule une batterie. Les utilisateurs peuvent jouer des sons en cliquant sur les boutons de batterie ou en appuyant sur les touches correspondantes de leur clavier. Le projet montre comment travailler avec des événements, de l'audio et des animations CSS pour créer une expérience utilisateur réactive et engageante.

Caractéristiques

Boutons de batterie interactifs : boutons cliquables qui jouent différents sons de batterie.
Contrôles du clavier : appuyez sur des touches spécifiques pour déclencher des sons de batterie.
Commentaire visuel : les boutons s'animent lorsqu'ils sont enfoncés, fournissant un retour visuel immédiat.
Conception réactive : la mise en page s'adapte à différentes tailles d'écran, garantissant une expérience cohérente sur tous les appareils.

Technologies utilisées

HTML : Fournit la structure de l'interface du kit de batterie.
CSS : stylise le kit de batterie, y compris les animations des boutons et la disposition générale.
JavaScript : gère les interactions utilisateur, la lecture du son et les animations.

Structure du projet

Voici un aperçu rapide de la structure du projet :

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

Copier après la connexion

index.html : Contient la structure HTML du kit de batterie.
styles.css : inclut les styles CSS pour le kit de batterie et les animations.
index.js : gère les interactions des utilisateurs, les effets sonores et les animations.

Installation

Pour démarrer le projet, suivez ces étapes :

Cloner le dépôt :

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

Copier après la connexion

Ouvrez le répertoire du projet :
```
cd Drum-Kit
```
Copier après la connexion
Exécuter le projet :
- Ouvrez le fichier index.html dans un navigateur Web pour voir le kit de batterie en action.

Usage

Ouvrez le site Web dans un navigateur Web.
Cliquez sur les boutons de batterie ou appuyez sur les touches correspondantes (w, a, s, d, j, k, l) pour jouer différents sons de batterie.
Observez les animations des boutons lorsque vous appuyez dessus pour obtenir un retour visuel.

Explication du code

HTML

Le fichier index.html définit la structure du kit de batterie, comprenant des boutons pour chaque son de batterie et un pied de page. En voici un extrait :

<!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>

Copier après la connexion

CSS

Le fichier styles.css stylise le kit de batterie, y compris les boutons de batterie et les animations. Voici quelques styles clés :

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;
}

Copier après la connexion

Javascript

Le fichier index.js contrôle les fonctionnalités du kit de batterie, y compris la lecture du son et les animations des boutons. En voici un extrait :

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);
}

Copier après la connexion

Démo en direct

Vous pouvez consulter la démo live du Drum Kit ici.

Conclusion

Construire ce kit de batterie a été une expérience fantastique qui m'a permis de me plonger dans la gestion des événements et les capacités audio de JavaScript. J'espère que ce projet vous incitera à expérimenter des applications Web interactives et à créer vos propres projets amusants et engageants. N'hésitez pas à explorer le code, à le personnaliser et à l'utiliser dans votre propre travail. Bon codage !