首頁 > web前端 > css教學 > 主體

建立鼓組網站

王林
發布: 2024-08-15 06:03:02
原創
241 人瀏覽過

Build a Drum Kit Website

介紹

各位開發者大家好!我很高興與您分享我的最新項目:鼓組。該專案是練習 JavaScript 的一種有趣且互動的方式,特別是在處理用戶輸入和音訊播放方面。無論您是想要深入研究 JavaScript 的初學者還是熱愛音樂和編碼的人,這個專案都非常適合您。

項目概況

鼓套件 是一個模擬鼓組的互動式 Web 應用程式。使用者可以透過點擊鼓按鈕或按鍵盤上的對應鍵來播放聲音。該專案演示瞭如何使用事件、音訊和 CSS 動畫來創建響應靈敏且引人入勝的使用者體驗。

特徵

  • 互動式鼓鈕:可播放不同鼓聲的可點擊按鈕。
  • 鍵盤控制:按下特定按鍵即可觸發鼓聲。
  • 視覺回饋:按下按鈕時會產生動畫,提供即時視覺回饋。
  • 響應式設計:版面可依不同的螢幕尺寸調整,確保跨裝置的體驗一致。

使用的技術

  • HTML:提供鼓組介面的結構。
  • CSS:設定鼓組的樣式,包括按鈕動畫和整體版面。
  • JavaScript:處理使用者互動、聲音播放和動畫。

專案結構

以下是專案結構的快速瀏覽:

Drum-Kit/
├── index.html
├── styles.css
└── index.js
登入後複製
  • index.html:包含鼓組的 HTML 結構。
  • styles.css:包含鼓組和動畫的 CSS 樣式。
  • index.js:管理使用者互動、音效和動畫。

安裝

要開始該項目,請按照以下步驟操作:

  1. 複製儲存庫

    git clone https://github.com/abhishekgurjar-in/Drum-Kit.git
    
    登入後複製
  2. 開啟專案目錄:

    cd Drum-Kit
    
    登入後複製
  3. 運行項目:

    • 在網頁瀏覽器中開啟index.html 檔案以查看鼓組的運作。

用法

  1. 在網頁瀏覽器中開啟網站
  2. 點選鼓鈕按下對應的按鍵(w、a、s、d、j、k、l)來演奏不同的鼓聲。
  3. 按下按鈕時觀察按鈕動畫以獲得視覺回饋。

程式碼說明

超文本標記語言

index.html 檔案設定鼓組的結構,包括每個鼓聲音的按鈕和頁腳。這是一個片段:

<!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>
登入後複製

CSS

styles.css 檔案設定鼓組的樣式,包括鼓按鈕和動畫。以下是一些關鍵樣式:

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

index.js 檔案控制鼓組的功能,包括聲音播放和按鈕動畫。這是一個片段:

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);
}
登入後複製

現場演示

您可以在這裡查看鼓組的現場示範。

結論

建立這個鼓套件是一次奇妙的體驗,它讓我能夠深入了解 JavaScript 的事件處理和音訊功能。我希望這個專案能夠激勵您嘗試互動式 Web 應用程式並創建您自己的有趣且引人入勝的專案。請隨意探索程式碼、對其進行自訂並在您自己的工作中使用它。快樂編碼!

製作人員

建立此專案是為了展示 JavaScript 在建立互動式 Web 元素方面的潛力。

作者

  • 阿布舍克·古賈爾
    • GitHub 簡介

以上是建立鼓組網站的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!