この記事では、ドラミング効果を実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: MySQL コール初心者が犯しがちな 11 の間違いのまとめ
最初はブラウザのスクロールバーのスタイルを変更して効果を実現したいと思っていましたが、情報を調べてみ...
目次概要コードの実装シングルトンパターンの簡易版改良版プロキシバージョンシングルトンモード遅延シング...
この記事では、MySQL が 2 つのテーブルを比較して、異なるデータがあるかどうかを確認する方法を...
序文:プロジェクト開発では、一部のビジネス テーブル フィールドで日付と時刻の型が使用されることが多...
目次1. 前に書く2. ポップアップウィンドウを実装するためのオーバーレイ2.1 vueページのad...
Unix ライクなシステムでは、コマンドまたはプロセスの実行がいつ開始されたか、またプロセスがどのく...
トムキャット公式サイトtomcatはローカルサーバーと同等であり、Webページを開くことができます設...
この記事では、携帯電話のカメラとアルバムにアクセスするためのVueの具体的なコードを参考までに共有し...
目次1 現在のデータベースの内容を表示し、データベースをバックアップする2 bin_log関数を有効...
Google Chrome では、ログインに成功すると、パスワードを記憶するかどうかを尋ねるメッセー...
deepinとUbuntuどちらもdebianをベースにしたディストリビューションであり、ここではU...
1. Nginxの同時実行性を最適化する [root@proxy ~]# ab -n 2000 -c...
[LeetCode] 182.重複メールPerson という名前のテーブル内のすべての重複メールを...
この記事では、Dockerを使用してMySQLデータベースとリモートアクセス構成をデプロイする方法を...
目次1. パーティクルエフェクト2. シーンを読み込む3. さまざまな粒子効果の実現エンディング: ...