Bina Laman Web Kit Drum-tutorial css-php.cn

Bina Laman Web Kit Drum

王林

Lepaskan： 2024-08-15 06:03:02

asal

182 orang telah melayarinya

Build a Drum Kit Website

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

Salin selepas log masuk

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:

Klon repositori:

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

Salin selepas log masuk

Buka direktori projek:
```
cd Drum-Kit
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam penyemak imbas web untuk melihat kit dram beraksi.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Klik butang dram atau tekan kekunci yang sepadan (w, a, s, d, j, k, l) untuk memainkan bunyi dram yang berbeza.
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:

<!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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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!