ドラミング効果を実現するJavascript

この記事では、ドラミング効果を実現するためのJavascriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

対応するキーボードを長押しすると、異なる音が表示されます

<div class="keys">
  <div データキー="65" クラス="キー">
   <kbd>あ</kbd>
   <span class="sound">拍手</span>
  </div>
  <div データキー="83" クラス="キー">
   <kbd>さ</kbd>
   <span class="sound">ハイハット</span>
  </div>
  <div データキー="68" クラス="キー">
   <kbd>だ</kbd>
   <span class="sound">キック</span>
  </div>
  <div データキー="70" クラス="キー">
   <kbd>ふ</kbd>
   <span class="sound">オープンハット</span>
  </div>
  <div データキー="71" クラス="キー">
   <kbd>こ</kbd>
   <span class="sound">ブーム</span>
  </div>
  <div データキー="72" クラス="キー">
   <kbd>は</kbd>
   <span class="sound">乗る</span>
  </div>
  <div データキー="74" クラス="キー">
   <kbd>じ</kbd>
   <span class="sound">スネア</span>
  </div>
  <div データキー="75" クラス="キー">
   
   <kbd>か</kbd>
   <span class="sound">トム</span>
  </div>
  <div データキー="76" クラス="キー">
   <kbd>ラ</kbd>
   <span class="sound">チン</span>
  </div>
  </div>
 
  <audio データキー="65" src="sounds/clap.wav"></audio>
  <audio データキー="83" src="sounds/hihat.wav"></audio>
  <audio データキー="68" src="sounds/kick.wav"></audio>
  <audio データキー="70" src="sounds/openhat.wav"></audio>
  <audio データキー="71" src="sounds/boom.wav"></audio>
  <audio データキー="72" src="sounds/ride.wav"></audio>
  <audio データキー="74" src="sounds/snare.wav"></audio>
  <audio データキー="75" src="sounds/tom.wav"></audio>
  <audio データキー="76" src="sounds/tink.wav"></audio>

CSS部分:

html{
 フォントサイズ: 10px;
 背景: url('../img/background.jpg') 下部中央;
 背景サイズ: カバー;
}

本文、html {
 マージン: 0;
 パディング: 0;
 フォントファミリー: サンセリフ;
}

.キー {
 ディスプレイ: フレックス;
 フレックス: 1;
 最小高さ: 100vh;
 アイテムの位置を中央揃えにします。
 コンテンツの中央揃え: 中央;
}

。鍵 {
 境界線: .4rem 黒一色;
 境界線の半径: .5rem;
 マージン: 1rem;
 フォントサイズ: 1.5rem;
 パディング: 1rem .5rem;
 遷移: すべて 0.07 秒の緩和;
 幅: 10rem;
 テキスト配置: 中央;
 色: 白;
 背景: rgba(0,0,0,0.4);
 テキストシャドウ: 0 0 .5rem 黒;
}

.プレイ中{
 変換: スケール(1.1);
 境界線の色: #ffc600;
 ボックスシャドウ: 0 0 1rem #ffc600;
}

KBd {
 表示: ブロック;
 フォントサイズ: 4rem;
}

。音 {
 フォントサイズ: 1.2rem;
 テキスト変換:大文字;
 文字間隔: .1rem;
 色: #ffc600;
}

最初のステップは、キーボードを押して音を鳴らすことです

window.addEventListener("keydown",function(e){
   console.log(e.keyCode);
   定数 audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
   定数キー = document.querySelector(`div[data-key="${e.keyCode}"]`)
   // 各再生後に初期化します if (!audio) return;
    オーディオの現在の時間 = 0;
    オーディオを再生します。

     key.classList.add('再生中');

     setTimeout(関数(){
     key.classList.remove('再生中');
     },70);
    
    // キーを押した後にエフェクトを移動します})

キーコード対応図