各位開發者大家好!我很高興與您分享我的最新項目:鼓組。該專案是練習 JavaScript 的一種有趣且互動的方式,特別是在處理用戶輸入和音訊播放方面。無論您是想要深入研究 JavaScript 的初學者還是熱愛音樂和編碼的人,這個專案都非常適合您。
鼓套件 是一個模擬鼓組的互動式 Web 應用程式。使用者可以透過點擊鼓按鈕或按鍵盤上的對應鍵來播放聲音。該專案演示瞭如何使用事件、音訊和 CSS 動畫來創建響應靈敏且引人入勝的使用者體驗。
以下是專案結構的快速瀏覽:
Drum-Kit/ ├── index.html ├── styles.css └── index.js
要開始該項目,請按照以下步驟操作:
複製儲存庫:
git clone https://github.com/abhishekgurjar-in/Drum-Kit.git
開啟專案目錄:
cd Drum-Kit
運行項目:
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>
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; }
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 元素方面的潛力。
以上是建立鼓組網站的詳細內容。更多資訊請關注PHP中文網其他相關文章!