JavaScript Drum Kit


Posted by wayne201299 on 2023-09-21

在Web上做一個鼓吧
DEMO

實作

首先需要先監聽keyup event,得知鍵盤觸發的按鍵keycode

 window.addEventListener('keydown', function (e) {})

取得對應的音檔並撥放,透過data-key可以將每個按鍵連接到觸發的聲音

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
audio.play();

為按鍵添加點擊特效,先取得對應keycode的div,並添加class

const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
key.classList.add('playing');

當transition結束時,把正在播放的按鍵playing效果移除

監聽所有按鍵div,在transition結束時移除playingclass

const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removePlayingClass));
function removePlayingClass(e) {
      if (e.propertyName !== 'transform') return;
      this.classList.remove('playing');
}

接下來調整transition的時間,就大功告成了

transition: all 0.07s ease;

dataset

HTML 中的 dataset 是一個用於存儲自定義數據的屬性。它允許您將自定義數據關聯到 HTML 元素,以便您可以在 JavaScript 中訪問和操作這些數據。dataset 是一個對象,它包含了以 data- 開頭的屬性的鍵-值對,其中鍵是不包括 data- 前綴的部分。

以下舉一個例子

<div id="myElement" data-user-id="123" data-user-name="john_doe"></div>

<div> 元素有兩個自定義數據屬性 data-user-id 和 data-user-name。

在 JavaScript 中,可以通過元素的 dataset 屬性來訪問這些自定義數據

const element = document.getElementById('myElement');

// 訪問自定義數據
const userId = element.dataset.userId; // "123"
const userName = element.dataset.userName; // "john_doe"

可以使用 dataset 屬性來設置、讀取和修改這些自定義數據,這在動態生成 HTML 元素並將數據關聯到元素時非常有用。它通常用於在 JavaScript 中存儲元素相關的信息,以便稍後可以根據這些數據執行操作。

知識點

  • <audio>標籤可以撥放音檔
  • 可以透過document.querySelector去取得擁有指定porperty 的DOM Element
  • 監聽事件沒辦法監聽element陣列,一定要遍歷過一遍才行

補充資料

  • keycode,可以得到所有的JavaScript keycode

#javascript







Related Posts

滲透測試重新打底(1)--論Reconnaissance (偵查)

滲透測試重新打底(1)--論Reconnaissance (偵查)

Vue 模板運用 Template

Vue 模板運用 Template

Day00 - CERN ROOT 教學 | 動機、這是什麼

Day00 - CERN ROOT 教學 | 動機、這是什麼


Comments