Einführung

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.

Projektübersicht

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.

Merkmale

• Interaktive Drum-Buttons: Anklickbare Buttons, die verschiedene Drum-Sounds abspielen.
• Tastatursteuerung: Drücken Sie bestimmte Tasten, um Schlagzeugklänge auszulösen.
• Visuelles Feedback: Tasten werden beim Drücken animiert und geben so sofortiges visuelles Feedback.
• Responsive Design: Das Layout passt sich an unterschiedliche Bildschirmgrößen an und sorgt so für ein einheitliches Erlebnis auf allen Geräten.

Verwendete Technologien

• HTML: Stellt die Struktur der Drum-Kit-Schnittstelle bereit.
• CSS: Gestaltet das Schlagzeug, einschließlich der Tastenanimationen und des Gesamtlayouts.
• JavaScript: Verwaltet Benutzerinteraktionen, Tonwiedergabe und Animationen.

Projektstruktur

Hier ein kurzer Blick auf die Projektstruktur:

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

• index.html: Enthält die HTML-Struktur des Schlagzeugs.
• styles.css: Enthält CSS-Stile für das Schlagzeug und Animationen.
• index.js: Verwaltet Benutzerinteraktionen, Soundeffekte und Animationen.

Installation

Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:

1. Klonen Sie das Repository:
   

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

   Nach dem Login kopieren

2. Öffnen Sie das Projektverzeichnis:
   

   cd Drum-Kit

   Nach dem Login kopieren

3. Führen Sie das Projekt aus:

   • Öffnen Sie die Datei index.html in einem Webbrowser, um das Schlagzeug in Aktion zu sehen.

Verwendung

1. Öffnen Sie die Websitein einem Webbrowser.
2. Klicken Sie auf die Drum-Tastenoderdrücken Sie die entsprechenden Tasten(w, a, s, d, j, k, l), um verschiedene Drum-Sounds abzuspielen.
3. Beobachten Sie die Tastenanimationenbeim Drücken, um visuelles Feedback zu erhalten.

Code-Erklärung

HTML

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
 
 w a s d j k l 
    

CSS

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

JavaScript

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

Live-Demo

Hier können Sie sich die Live-Demo des Drum-Kits ansehen.

Abschluss

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!

Credits

Dieses Projekt wurde erstellt, um das Potenzial von JavaScript für die Erstellung interaktiver Webelemente zu demonstrieren.

Autor

• Abhishek Gurjar
  • GitHub-Profil

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!