Bina Laman Web Kit Drum

pengenalan

Helo, rakan pembangun! Saya teruja untuk berkongsi projek terbaharu saya dengan anda: Drum Kit. Projek ini ialah cara yang menyeronokkan dan interaktif untuk mempraktikkan JavaScript, terutamanya dalam mengendalikan input pengguna dan main balik audio. Sama ada anda seorang pemula yang ingin mendalami JavaScript atau seseorang yang menggemari muzik dan pengekodan, projek ini sesuai untuk anda.

Gambaran Keseluruhan Projek

Drum Kit ialah aplikasi web interaktif yang menyerupai set dram. Pengguna boleh memainkan bunyi dengan mengklik pada butang dram atau menekan kekunci yang sepadan pada papan kekunci mereka. Projek ini menunjukkan cara bekerja dengan acara, audio dan animasi CSS untuk mencipta pengalaman pengguna yang responsif dan menarik.

Ciri-ciri

• Butang Drum Interaktif: Butang boleh klik yang memainkan bunyi dram yang berbeza.
• Kawalan Papan Kekunci: Tekan kekunci tertentu untuk mencetuskan bunyi gendang.
• Maklum Balas Visual: Butang bernyawa apabila ditekan, memberikan maklum balas visual serta-merta.
• Reka Bentuk Responsif: Reka letak dilaraskan kepada saiz skrin yang berbeza, memastikan pengalaman yang konsisten merentas peranti.

Teknologi yang Digunakan

• HTML: Menyediakan struktur antara muka kit dram.
• CSS: Menggayakan kit dram, termasuk animasi butang dan reka letak keseluruhan.
• JavaScript: Mengendalikan interaksi pengguna, main balik bunyi dan animasi.

Struktur Projek

Berikut ialah pandangan ringkas pada struktur projek:

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

• index.html: Mengandungi struktur HTML kit dram.
• styles.css: Termasuk gaya CSS untuk kit dram dan animasi.
• index.js: Mengurus interaksi pengguna, kesan bunyi dan animasi.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

1. Klon repositori:
   

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

2. Buka direktori projek:
   

   cd Drum-Kit
   

3. Jalankan projek:

   • Buka fail index.html dalam penyemak imbas web untuk melihat kit dram beraksi.

Penggunaan

1. Buka tapak web dalam penyemak imbas web.
2. Klik butang dram atau tekan kekunci yang sepadan (w, a, s, d, j, k, l) untuk memainkan bunyi dram yang berbeza.
3. Perhatikan animasi butang apabila ditekan untuk mendapatkan maklum balas visual.

Penerangan Kod

HTML

Fail index.html menyediakan struktur kit dram, termasuk butang untuk setiap bunyi dram dan pengaki. Berikut adalah coretan:

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

Fail styles.css menggayakan kit dram, termasuk butang dram dan animasi. Berikut ialah beberapa gaya utama:

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

Fail index.js mengawal kefungsian kit dram, termasuk main balik bunyi dan animasi butang. Berikut adalah coretan:

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

Demo Langsung

Anda boleh melihat demo langsung Drum Kit di sini.

Kesimpulan

Membina Kit Drum ini merupakan pengalaman hebat yang membolehkan saya menyelami keupayaan pengendalian acara dan audio JavaScript. Saya harap projek ini memberi inspirasi kepada anda untuk bereksperimen dengan aplikasi web interaktif dan mencipta projek anda sendiri yang menyeronokkan dan menarik. Jangan ragu untuk meneroka kod, menyesuaikannya dan menggunakannya dalam kerja anda sendiri. Selamat mengekod!

Kredit

Projek ini dicipta untuk mempamerkan potensi JavaScript untuk mencipta elemen web interaktif.

Pengarang

• Abhishek Gurjar
  • Profil GitHub

Atas ialah kandungan terperinci Bina Laman Web Kit Drum. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!