私は、マウスクリックで再生するか、ユーザーがキーボードで指定されたキーワードを押すとき、7つの異なる音でドラム・キットをつくりました.

ドラムキット

Read ahead to know the development process of this project else click the link below to see the app running live!

https://drumkit-vercelhack.vercel.app/

考え💡!

さて、それはかなり簡単で、私はJavaScriptとDOMのスキルを試してみたかったし、その過程で私はFor-Loops 私はすぐにブログで十分に実現するでしょう.

どうしたらいいの🤔?

再生7種類の基本的なドラムキットに基づいてね.

このボタンをクリックすると、各ボタンに記載されているキーを押して再生します.

ソースコードはGitHub , それをチェックアウトし、それをフォークし、多分いくつかのプルのリクエストをもたらす-私はgithubにアクティブです.

開発プロセス🛠

私は反応の学習段階にいました、そして、私はHTML ~ CSS ~ JS以外の何も知らなかったです.それで、私はそれとともに前進しました、しかし、私がいったんされるならば、私はあなたにそれを保証します.

HTMLを使用したページの構造化

最初のタスクは、最初に3つのセクションを含むページを構成することです-ヘッダー、ドラムボタン、フッター.

ヘッダーのために、私はH 1タグを使用して、それからtext-align: center; プロパティをbodyタグに適用します.

それから、7つのボタンを作って、divタグでそれをすべて包みました.

それからフッター.

構造化は、ボタンの相互作用のためにスクリプトを書くことに挑戦したことが十分に簡単でした.

ボタンへの相互作用の実装。

相互作用または基本的にボタンをクリックして聞く.何が心に最初にマウスクリックのためのすべてのボタンのためにイベントリスナーを加えることになっています.
今、あなたが実際に考えるならば、各々のボタンにイベントリスナーを加えることは多くのコードをとります.どのように、我々はより良い方法でこれをしますか?
ループのための救助に!
forループを開き、i = 0を初期化します.今、私は.drum すべてのボタン要素にクラスを指定し、クエリセレクタを使用してすべての要素を選択し、すべてのボタンを含む配列を返します.

> document.querySelectorAll(".drum") 
NodeList(7) [button.w.drum, button.a.drum, button.s.drum, button.d.drum, button.j.drum, button.k.drum, button.l.drum]

配列番号は0から始まり、すべてのボタン要素を選択してイベントリスナーを追加するには、この利点を使用できます.
次の仕事はサウンドを再生することです.このために私は関数と呼ばれましたmakeSound() これは1つの値だけをとります.各ボタンを再生する必要があります音に対応します.このため、私はいくつかのドラムサウンドを検索し、それらをすべて別のフォルダに入れてください.ボタンの名前を取得するには、変数を使用してinnerhtmlの値を格納し、関数に渡します.私はスイッチケースを使用して音を再生します.

var buttonName = this.innerHTML;
makeSound(buttonName);

そのため、それぞれのボタンの名前をそれぞれ合計で7ケースになります.

ボタンの名前が一致する場合、オーディオのファイル位置を取る変数が作成されます.

variableName.play() - オーディオファイルを再生し、ループを使用してbreak; 文.

function makeSound(key) {
  switch (key) {
    case "w":
      var tom1 = new Audio('sounds/tom-1.mp3');
      tom1.play();
      break;

    case "a":
      var tom2 = new Audio("sounds/tom-2.mp3");
      tom2.play();
      break;

    case "s":
      var tom3 = new Audio("sounds/tom-3.mp3");
      tom3.play();
      break;

    case "d":
      var tom4 = new Audio("sounds/tom-4.mp3");
      tom4.play();
      break;

    case "j":
      var crash = new Audio("sounds/crash.mp3");
      crash.play();
      break;

    case "k":
      var kickBass = new Audio("sounds/kick-bass.mp3");
      kickBass.play();
      break;

    case "l":
      var snare = new Audio("sounds/snare.mp3");
      snare.play();
      break;

    default:
      console.log(this.innerHTML);
      break;
  }
}

だから、ボタンをクリックしてドラムサウンドを再生すると、今は、ユーザーがキーを押すと、ドラムサウンドを再生するに移動しましょう行われます.これについては、再び我々のフレンドリーなイベントリスナーを使用して聞くためにkeydown イベントが発生したときに上記の配列を返すイベント

> KeyboardEvent {isTrusted: true, key: "c", code: "KeyC", location: 0, ctrlKey:false, .....}

我々はちょうどそれぞれの音を再生するために有効にする私たちのスイッチケースの重要な値を把握する必要があります.
今私が追加した別のものは、彼がボタンをクリックしたことを保証するためにユーザーからのフィードバックを与えることです.

このため、私のCSSファイルのクラスを.pressed そして、名前で新しい機能を作りましたmakeAnimation() .

この関数は1つの値をとり、ボタンの名前です.それぞれのボタンに対応するクラス名を付けます.この関数の内部では、押されたボタンのクラス名を格納する新しい変数を作成し、連結セレクタを使用して渡されたボタン名をクエリーセレクタに追加し、次に新しく作成したクラスを追加します.pressed をクリックすると、不透明度が変更されますclassName.classList.add("pressed") .

この後も、短い時間の後にこのクラスを削除する必要がありますsetTimeout() 関数は100 msのタイムアウトを設定し、クラス名を削除するのに十分速い.

function makeAnimation(currentKey){
  var activeButton = document.querySelector("." + currentKey);
  activeButton.classList.add("pressed");

  setTimeout(function(){
    activeButton.classList.remove("pressed");
  }, 100);
}

これにより、私はプロジェクトの主な目標を達成しました.そして、すべての楽しい部分であったVercelに配備する準備ができました.

展開🛰

私がしなければならなかったすべては、最初に新しいVercel口座を作ることでした.

私のgithubアカウントにリンクします.

すべてのコードを含むリポジトリを選択します.

を含むディレクトリを選択しますindex.html ファイルはルートディレクトリで、デフォルトとして残しました.

そして最後にそれを展開!🚀

ここまで読んでいただきありがとうございます.もし修正があればコメント欄で知らせてください.もしこの記事があなたに役立つならば❤.