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.
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.
Voici un aperçu rapide de la structure du projet :
Drum-Kit/ ├── index.html ├── styles.css └── index.js
Pour démarrer le projet, suivez ces étapes :
Cloner le référentiel:
git clone https://github.com/abhishekgurjar-in/Drum-Kit.git
Ouvrez le répertoire du projet:
cd Drum-Kit
Exécuter le projet:
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
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; }
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); }
Vous pouvez consulter la démo en direct du Drum Kit ici.
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 !
Ce projet a été créé pour mettre en valeur le potentiel de JavaScript pour créer des éléments Web interactifs.
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!