Einführung
Hallo, liebe Entwickler! Ich freue mich, mein neuestes Projekt mit Ihnen zu teilen: ein Schlagzeug. 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
Das Drum Kit ist 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.
-
Responsives 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 Drum-Kit, einschließlich der Tastenanimationen und des Gesamtlayouts.
-
JavaScript: Verarbeitet Benutzerinteraktionen, Tonwiedergabe und Animationen.
Projektstruktur
Hier ein kurzer Blick auf die Projektstruktur:
Drum-Kit/
├── index.html
├── styles.css
└── index.js
Nach dem Login kopieren
-
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:
-
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/Drum-Kit.git
Nach dem Login kopieren
-
Öffnen Sie das Projektverzeichnis:
cd Drum-Kit
Nach dem Login kopieren
-
Führen Sie das Projekt aus:
- Öffnen Sie die Datei index.html in einem Webbrowser, um das Schlagzeug in Aktion zu sehen.
Verwendung
-
Öffnen Sie die Website in einem Webbrowser.
-
Klicken Sie auf die Drum-Tasten oder drücken Sie die entsprechenden Tasten (w, a, s, d, j, k, l), um verschiedene Drum-Sounds abzuspielen.
-
Beobachten Sie die Tastenanimationen beim 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:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Drum Kit</title>
<link rel="stylesheet" href="styles.css" />
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" />
</head>
<body>
<h1 id="title">Drum ? Kit</h1>
<div class="set">
<button class="w drum">w</button>
<button class="a drum">a</button>
<button class="s drum">s</button>
<button class="d drum">d</button>
<button class="j drum">j</button>
<button class="k drum">k</button>
<button class="l drum">l</button>
</div>
<script src="index.js" charset="utf-8"></script>
<footer>Made with ❤️ by Abhishek Gurjar</footer>
</body>
</html>
Nach dem Login kopieren
CSS
Die Datei „styles.css“ stilisiert das Drum-Kit, einschließlich der Drum-Tasten 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;
}
Nach dem Login kopieren
JavaScript
Die Datei index.js steuert die Funktionalität des Drum-Kits, 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);
}
Nach dem Login kopieren
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
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!
