Erstellen Sie eine Drum-Kit-Website

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

• 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
   

2. Öffnen Sie das Projektverzeichnis:
   

   cd Drum-Kit
   

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 Website in einem Webbrowser.
2. 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.
3. 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:

8b05045a5be5764f313ed5b9168a17e6
2cf86155e6fe984523d87d7c3f8662dc
  93f0f5c25f18dab9d176bd4f6de5d30e
    37c4eb5109be9bfa4ea9e5c231a37be0
    b2386ffb911b14667cb8f0f91ea547a7Drum Kit6e916e0f7d1e588d4f442bf645aedb2f
    14d13e98ea612ebaf5524878bba079c7
    a529d501bd43260127412109e0c165f0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    4cc3f2f27241bff45c0eb97469e3154bDrum ? Kit473f0a7621bec819994bb5020d29372a
    6fe4c85fa23811ad3b4f95e80c67d9b6
      a363111c4c97db79a33be1e7c9faeacdw65281c5ac262bf6d81768915a4a77ac0
      040c7d2ea3d126856c2768c245c34acba65281c5ac262bf6d81768915a4a77ac0
      32f01e34bbd63039390f0166cc02bbe3s65281c5ac262bf6d81768915a4a77ac0
      8a646e68c59c77869073ea0de90cf8a0d65281c5ac262bf6d81768915a4a77ac0
      c7113ff65de7ed91c48c5a0c80aadfbbj65281c5ac262bf6d81768915a4a77ac0
      79b9cca3663eb92ea95d2f995be299fbk65281c5ac262bf6d81768915a4a77ac0
      c1185b1f8daf584f7ca679734825f6fcl65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
    96d2c81a82afe2994a2bf7f85a438d4b2cacc6d41bbb37262a98f745aa00fbf0
    c37f8231a37e88427e62669260f0074dMade with ❤️ by Abhishek Gurjar84122da5b51c58ef54d7045814144010
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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

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

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!