Synth Keyboard ❤️

📗 參考

• CSSTricks ⟩ How to Code a Playable Synth Keyboard ⭐️

• 維基 ⟩ 八度 (Octave)

📘 手冊

👥 相關

synth keyboard

八度（英語：Octave，亦稱為完全八度）是音程的一種，它的組成是由2個相同音名但來自不同音域所組成。兩音的距離為 12 個半音，而頻率的比例是 2:1，換而言之，較高音的頻率為較低音的兩倍。

Pitch Formula

計算音頻的公式：

$\boxed{\text{pitch }=a\cdot 2^{\frac{n}{12}}}$

• $a$: 440 Hz ( pitch of $A_4$)

• $n$: number of notes above or below $A_4$

Notes

The gain is a unitless value, changing with time, that is multiplied to each corresponding sample of all input channels. If modified, the new gain is instantly applied, causing unaesthetic 'clicks' in the resulting audio. To prevent this from happening, never change the value directly but use the exponential interpolation methods on the AudioParam interface. 📘 GainNode

• z-index only works on positioned elements❗️

Live Demo

3. JS

2. CSS

1. HTML

Code

💾 replit

HTML

<!-- 
 store the note value in a custom `note` attribute 
 so it’s easy to access in JavaScript

 our keyboard covers just over an octave, 
 starting at C₃ and ending at F₄.
-->
<ul id="keyboard">
  <li note="C"  octave="3" class="white no-offset">A</li>
  <li note="C#" octave="3" class="black">W</li>
  <li note="D"  octave="3" class="white">S</li>
  <li note="D#" octave="3" class="black">E</li>
  <li note="E"  octave="3" class="white">D</li>
  <li note="F"  octave="3" class="white no-offset">F</li>
  <li note="F#" octave="3" class="black">T</li>
  <li note="G"  octave="3" class="white">G</li>
  <li note="G#" octave="3" class="black">Y</li>
  <li note="A"  octave="4" class="white">H</li>
  <li note="A#" octave="4" class="black">U</li>
  <li note="B"  octave="4" class="white">J</li>
  <li note="C2" octave="4" class="white no-offset">K</li>
  <li note="C#2" octave="4" class="black">O</li>
  <li note="D2" octave="4" class="white">L</li>
  <li note="D#2" octave="4" class="black">P</li>
  <li note="E2" octave="4" class="white">;</li>
  <li note="F2" octave="4" class="white no-offset">'</li>
</ul>

CSS

JS