ドラミング効果を実現する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 の間違いのまとめ

推薦する

Dockerはコンテナ外のコンテナ内でコマンドを実行します

コンテナ内でコマンドを実行したいが、コンテナに入りたくない場合があります。ではどうすればいいでしょう...

Div CSS 命名標準 CSS クラスの命名規則 (SEO 標準に準拠)

検索エンジン最適化 (SEO) では実行すべきタスクが多数ありますが、その中でもコードの最適化は重要...

MySQL 起動失敗の問題とシナリオ分析

1. ワンストップソリューション1. 問題の分析と特定 # MySQL設定ファイルを見つけて、MyS...

nginx 設定ファイルパスとリソースファイルパスを表示する方法

nginx 設定ファイルのパスを表示する nginx -t 経由nginx -t コマンドの本来の機...

Nginx ポート競合を解決するトラブルシューティング方法の例

問題の説明データ転送に Nginx を使用し、フロントエンドとバックエンドが分離された Spring...

Centos7.3 Nginx をインストールして展開し、https を設定する方法

設置環境1. gccのインストールnginxをインストールするには、まず公式サイトからダウンロードし...

フローティング要素が親要素の高さを崩す原因と解決策の詳細な説明

フローティング要素は、親要素の高さを縮小します。要素を float float:left/right...

MySQL 最適化のヒント: 重複削除の実装方法の分析 [数百万のデータ]

この記事では、MySQL 最適化のヒントで重複したエントリを削除する方法を例を使って説明します。ご参...

Linuxカーネルマクロcontainer_ofの詳細な分析

1. 前述の通り数年前、Linux ドライバーのコードを読んでいたときにこのマクロを見ました。長い間...

初めてDockerイメージを構築、実行、公開、取得するための詳細な手順

1. はじめに以前は、Python アプリケーションの作成を開始したい場合、最初のステップはマシンに...

CSS ロリポップを描くサンプルコード

背景: 毎日少しずつ進歩し、少しずつ積み重ねていけば、どんどん良くなっていきますコード: <!...

Javascript デザインパターン プロトタイプ モードの詳細

目次1. プロトタイプモード例1例2例3 2. オブザーバーパターン1. プロトタイプモードプロトタ...

TomcatコンポーネントはWebサーバーのアーキテクチャの進化を示しています

1. tomcat とは誰ですか? 2. Tomcat は何ができますか? Tomcat は Web...

MySQLパラダイムの使用に関する詳細な説明

1. パラダイムこのパラダイムの英語名は Normal Form であり、1970 年代にリレーショ...

mysql での rpm インストールの詳細な説明

インストールとアンインストールの表示 # rpm -qa | grep mysql を表示 # アン...