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

ドラミング効果を実現する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);
    
    // キーを押した後にエフェクトを移動します})

キーコード対応図

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JSはクリックドロップ効果を実装します

<<:  Dockerコンテナでユーザーを分離する方法

>>:  MySQL コール初心者が犯しがちな 11 の間違いのまとめ

推薦する

Vueはスクロールバースタイルを実装します

最初はブラウザのスクロールバーのスタイルを変更して効果を実現したいと思っていましたが、情報を調べてみ...

Javascriptでシングルトンパターンを実装する方法

目次概要コードの実装シングルトンパターンの簡易版改良版プロキシバージョンシングルトンモード遅延シング...

MySQL実践スキル: 2つのテーブルに異なるデータがあるかどうかを比較する方法の分析

この記事では、MySQL が 2 つのテーブルを比較して、異なるデータがあるかどうかを確認する方法を...

MySQLで日付と時刻を照会する方法

序文:プロジェクト開発では、一部のビジネス テーブル フィールドで日付と時刻の型が使用されることが多...

openlayers6 マップオーバーレイの一般的な 3 つの用途 (ポップアップウィンドウマーカーテキスト)

目次1. 前に書く2. ポップアップウィンドウを実装するためのオーバーレイ2.1 vueページのad...

Linux でコマンドまたはプロセスの実行時間を調べる方法

Unix ライクなシステムでは、コマンドまたはプロセスの実行がいつ開始されたか、またプロセスがどのく...

Tomcat9 のダウンロード、インストール、設定 + Eclipse への統合に関する詳細なチュートリアル

トムキャット公式サイトtomcatはローカルサーバーと同等であり、Webページを開くことができます設...

Vueは携帯電話のカメラとアルバムを呼び出す機能を実装します

この記事では、携帯電話のカメラとアルバムにアクセスするためのVueの具体的なコードを参考までに共有し...

MySQL binlog を使用して誤って削除されたデータベースを復元する方法

目次1 現在のデータベースの内容を表示し、データベースをバックアップする2 bin_log関数を有効...

Google Chromeの自動入力問題に対する完璧な解決策

Google Chrome では、ログインに成功すると、パスワードを記憶するかどうかを尋ねるメッセー...

Deepin Linuxでカーネルを手動でアップグレードする方法

deepinとUbuntuどちらもdebianをベースにしたディストリビューションであり、ここではU...

nginx を最適化する 6 つの方法

1. Nginxの同時実行性を最適化する [root@proxy ~]# ab -n 2000 -c...

LeetCode の SQL 実装 (182. 重複するメールボックス)

[LeetCode] 182.重複メールPerson という名前のテーブル内のすべての重複メールを...

MySQL (8 および 5.7) の Docker インストール

この記事では、Dockerを使用してMySQLデータベースとリモートアクセス構成をデプロイする方法を...

ワンクリックで雨や雪のエフェクトを実現する ThingJS パーティクルエフェクト

目次1. パーティクルエフェクト2. シーンを読み込む3. さまざまな粒子効果の実現エンディング: ...