Créer un site Web de kit de batterie

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

• 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 :

1. Cloner le dépôt :
   

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

2. Ouvrez le répertoire du projet :
   

   cd Drum-Kit
   

3. Exécuter le projet :

   • Ouvrez le fichier index.html dans un navigateur Web pour voir le kit de batterie en action.

Usage

1. Ouvrez le site Web dans un navigateur Web.
2. 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.
3. 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 :

8b05045a5be5764f313ed5b9168a17e6
2cf86155e6fe984523d87d7c3f8662dc
  93f0f5c25f18dab9d176bd4f6de5d30e
    37c4eb5109be9bfa4ea9e5c231a37be0
    b2386ffb911b14667cb8f0f91ea547a7Drum Kit6e916e0f7d1e588d4f442bf645aedb2f
    14d13e98ea612ebaf5524878bba079c7
    a529d501bd43260127412109e0c165f0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    4cc3f2f27241bff45c0eb97469e3154bDrum ? Kit473f0a7621bec819994bb5020d29372a
    6fe4c85fa23811ad3b4f95e80c67d9b6
      a363111c4c97db79a33be1e7c9faeacdw65281c5ac262bf6d81768915a4a77ac0
      040c7d2ea3d126856c2768c245c34acba65281c5ac262bf6d81768915a4a77ac0
      32f01e34bbd63039390f0166cc02bbe3s65281c5ac262bf6d81768915a4a77ac0
      8a646e68c59c77869073ea0de90cf8a0d65281c5ac262bf6d81768915a4a77ac0
      c7113ff65de7ed91c48c5a0c80aadfbbj65281c5ac262bf6d81768915a4a77ac0
      79b9cca3663eb92ea95d2f995be299fbk65281c5ac262bf6d81768915a4a77ac0
      c1185b1f8daf584f7ca679734825f6fcl65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
    96d2c81a82afe2994a2bf7f85a438d4b2cacc6d41bbb37262a98f745aa00fbf0
    c37f8231a37e88427e62669260f0074dMade with ❤️ by Abhishek Gurjar84122da5b51c58ef54d7045814144010
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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

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

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 !

Crédits

Ce projet a été créé pour mettre en valeur le potentiel de JavaScript pour créer des éléments Web interactifs.

Auteur

• Abhishek Gurjar
  • Profil GitHub

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!