Hallo, liebe Entwickler! Ich freue mich, mein neuestes Projekt mit Ihnen zu teilen: einDrum Kit. Dieses Projekt ist eine unterhaltsame und interaktive Möglichkeit, JavaScript zu üben, insbesondere im Umgang mit Benutzereingaben und der Audiowiedergabe. Egal, ob Sie ein Anfänger sind, der in JavaScript eintauchen möchte, oder jemand, der Musik und Programmieren liebt, dieses Projekt ist perfekt für Sie.
DasDrum Kitist eine interaktive Webanwendung, die ein Schlagzeug simuliert. Benutzer können Sounds abspielen, indem sie auf die Trommeltasten klicken oder die entsprechenden Tasten auf ihrer Tastatur drücken. Das Projekt zeigt, wie man mit Ereignissen, Audio und CSS-Animationen arbeitet, um ein reaktionsfähiges und ansprechendes Benutzererlebnis zu schaffen.
Hier ein kurzer Blick auf die Projektstruktur:
Drum-Kit/ ├── index.html ├── styles.css └── index.js
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/Drum-Kit.git
Öffnen Sie das Projektverzeichnis:
cd Drum-Kit
Führen Sie das Projekt aus:
Die Datei index.html legt die Struktur des Drum-Kits fest, einschließlich der Schaltflächen für jeden Drum-Sound und einer Fußzeile. Hier ist ein Ausschnitt:
Drum Kit Drum ? Kit
Die Datei „styles.css“ stilisiert das Schlagzeug, einschließlich der Schlagzeugtasten und Animationen. Hier sind einige wichtige Stile:
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; }
Die Datei index.js steuert die Funktionalität des Schlagzeugs, einschließlich der Tonwiedergabe und Tastenanimationen. Hier ist ein Ausschnitt:
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); }
Hier können Sie sich die Live-Demo des Drum-Kits ansehen.
Der Bau dieses Schlagzeugs war eine fantastische Erfahrung, die es mir ermöglichte, in die Event-Handling- und Audiofunktionen von JavaScript einzutauchen. Ich hoffe, dass dieses Projekt Sie dazu inspiriert, mit interaktiven Webanwendungen zu experimentieren und Ihre eigenen unterhaltsamen und ansprechenden Projekte zu erstellen. Erkunden Sie den Code, passen Sie ihn an und verwenden Sie ihn in Ihrer eigenen Arbeit. Viel Spaß beim Codieren!
Dieses Projekt wurde erstellt, um das Potenzial von JavaScript für die Erstellung interaktiver Webelemente zu demonstrieren.
Das obige ist der detaillierte Inhalt vonErstellen Sie eine Drum-Kit-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!