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

Build a Drum Kit Website

Introduction

Bonjour, amis développeurs ! Je suis ravi de partager mon dernier projet avec vous : unDrum Kit. 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

LeDrum Kitest 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 des utilisateurs, 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 référentiel:

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 Webdans un navigateur Web.
Cliquez sur les boutons de batterieouappuyez sur les touches correspondantes(w, a, s, d, j, k, l) pour jouer différents sons de batterie.
Observez les animations des boutonslorsque 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. Voici un extrait :

    Drum Kit   
  Drum ? Kit
         
  Made with ❤️ by Abhishek Gurjar

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. 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 en direct du Drum Kit ici.

Conclusion

Construire ce Drum Kit 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 !