ドラムキット Web サイトを構築する

導入

開発者の皆さん、こんにちは！私の最新プロジェクトであるドラムキットを皆さんと共有できることを嬉しく思います。このプロジェクトは、特にユーザー入力とオーディオ再生の処理において 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. プロジェクトを実行します:

   • Web ブラウザでindex.html ファイルを開いて、ドラムキットの動作を確認します。

使用法

1. Web ブラウザで Web サイトを開きます。
2. ドラムボタンをクリックするか、対応するキーを押して (w、a、s、d、j、k、l) さまざまなドラムサウンドを再生します。
3. ボタンを押したときのアニメーションを観察してください。視覚的なフィードバックが得られます。

コードの説明

HTML

index.html ファイルは、各ドラムサウンドのボタンやフッターなど、ドラムキットの構造を設定します。スニペットは次のとおりです:

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

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 アプリケーションを試し、独自の楽しく魅力的なプロジェクトを作成するきっかけとなることを願っています。自由にコードを調べてカスタマイズし、独自の作業で使用してください。コーディングを楽しんでください!

クレジット

このプロジェクトは、インタラクティブな Web 要素を作成するための JavaScript の可能性を紹介するために作成されました。

著者

• アビシェク・グルジャル
  • GitHub プロフィール

以上がドラムキット Web サイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。