虛擬鋼琴:用電腦鍵盤線上彈鋼琴
瀏覽器中的三個八度鋼琴:點選或觸碰琴鍵、使用電腦鍵盤演奏,或接上MIDI鍵盤。
每個音符皆透過Web Audio API即時合成,無須下載取樣。讀值會顯示你最後彈奏音符的精確頻率。
虛擬鋼琴:用電腦鍵盤線上彈鋼琴
瀏覽器中的三個八度鋼琴:點選或觸碰琴鍵、使用電腦鍵盤演奏,或接上MIDI鍵盤。
音域: C3 – B5
音量
上一個音符: 按下琴鍵開始
頻率 = 440 × 2^((n − 69) ÷ 12),其中n為MIDI音符編號。因此C4(n = 60)為261.63 Hz,A4(n = 69)恰為440.00 Hz。
MIDI:未連線
電腦鍵盤:A S D F G H J K L這一列從最低的C開始彈奏白鍵,W E T Y U O P彈奏其間的黑鍵。
電腦鍵盤與鋼琴琴鍵對照
WC#ED#TF#YG#UA#OC#PD#
ACSDDEFFGGHAJBKCLD;E'F
這些字母從目前的基準八度開始,彈奏畫面中三個八度裡較低的兩個;調整八度即可彈奏更高或更低的音符。
關於這款虛擬鋼琴
這是真正能演奏的樂器,不只是圖片。鍵盤涵蓋三個八度,預設從C3到B5,可用八度按鈕在C1至B7間移動。每個琴鍵都產生即時合成音色:兩個振盪器分別以三角波構成聲音主體,以及高一個八度、音量較小的正弦波增添圓潤感,再經快速起音與自然衰減包絡塑形。開啟延音後,音符可持續近三秒,如同踩住鋼琴的延音踏板。
共有三種演奏方式。直接點選或觸碰琴鍵;琴鍵以純CSS繪製,在桌面與觸控螢幕上表現一致。也可依多數音樂應用程式的通用對應方式,使用電腦鍵盤:主列A S D F G H J K L從畫面最低的C開始彈白鍵,上列W E T Y U及O、P彈其間黑鍵。這種配置反映鋼琴的實際排列,因此成為慣例:A-W-S-E-D正好對應C、升C、D、升D、E。最後,若瀏覽器支援Web MIDI(Chrome與Edge皆支援),按「啟用MIDI輸入」,即可直接演奏已連接的MIDI鍵盤。
琴鍵下方的頻率讀值,本身就是一堂小型樂理課。現代樂器採用以A4 = 440 Hz為基準的十二平均律:每升一個半音,頻率乘以2的十二次方根,約1.05946。彈A4會看到精確的440.00 Hz;彈C4,也就是中央C,會得到261.63 Hz;升一個八度至C5,數字便加倍至523.25 Hz。邊彈邊看數字,比課本圖解更能具體呈現音高的對數關係。
兩個八度也足以學習重要的音型。找出從C開始的白鍵大調音階,再建立音程:完全五度是七個半音(C4到G4),大三度是四個半音(C4到E4)。將它們疊成C大三和弦,再把三音降低一個琴鍵,變成C小三和弦。每個琴鍵都能顯示音名,讓你將聽見的聲音、看見的位置與樂譜名稱連結起來;熟悉布局後,再隱藏音名。
所有功能皆在頁面本機執行:不錄音、不上傳,首次載入後完全不需要網路連線。
試彈音符、音程與和弦
已確認的標準A440調音下的十二平均律頻率。
| 彈奏內容 | 預期顯示 | 學習重點 |
|---|---|---|
| A4(中央C右側的A) | 上一個音符:A4 · 440.00 Hz | 音樂會標準音高,也就是各樂團調音的參考。其他所有頻率皆由此推導。 |
| C4(中央C) | 上一個音符:C4 · 261.63 Hz | 鍵盤與大譜表的中心,比A4恰好低九個半音:440 ÷ 2^(9/12)。 |
| 先彈C4,再彈C5 | 先261.63 Hz,再523.25 Hz | 升高一個八度,頻率恰好加倍,是最協和的音程。 |
| 同時彈C4 – E4 – G4(開啟延音後快速按下) | 約261.63、329.63、392.00 Hz | C大三和弦:在根音上依序疊加大三度(4個半音)與小三度(3個半音)。 |
| 先彈A4,再彈E5(必要時升高八度) | 先440.00 Hz,再659.26 Hz | 完全五度:頻率比為1.498,幾乎等於平均律所近似的純律比例3:2。 |
如何彈奏虛擬鋼琴
- 點選或觸碰任意琴鍵,也可用電腦鍵盤:A S D F G H J K L對應白鍵,W E T Y U O P對應黑鍵。
- 使用「降低八度」與「升高八度」,將兩個八度的顯示範圍移至C1到B7之間。
- 開啟「延音」,讓音符如踩住延音踏板般持續響起;用「顯示音名」顯示或隱藏琴鍵標籤。
- 觀察讀值:它會顯示最後彈奏音符的名稱,以及以赫茲計的精確頻率。
- 有MIDI鍵盤嗎?在Chrome或Edge中按「啟用MIDI輸入」,即可直接彈奏。
虛擬鋼琴常見問題
為什麼A4顯示恰好440.00 Hz?
A4 = 440 Hz是國際標準音樂會音高(ISO 16)。十二平均律中的其他音符皆由此推導:每升一個半音,頻率乘以2的十二次方根,因此十二個半音,即一個八度,頻率恰好加倍至880 Hz。
電腦鍵盤如何對應琴鍵?為何這樣配置?
A S D F G H J K L從目前可見最低的C開始彈白鍵,W E T Y U O P彈其上方黑鍵,與GarageBand、Ableton Live、FL Studio及多數DAW的慣例相同。QWERTY各列實際排列如同鋼琴:上列按鍵位於下列按鍵之間,就像黑鍵位於白鍵之間。
聲音如何產生?
每個音符使用兩個Web Audio振盪器:以音符頻率的三角波提供溫暖主體,加上高一個八度且較輕的正弦波形成圓潤高頻,再通過起音為8 ms的增益包絡。關閉延音時約半秒衰減;開啟時接近三秒,如同踩住踏板。
所有瀏覽器都能使用MIDI輸入嗎?
Chromium瀏覽器(Chrome、Edge、Opera、Brave)支援Web MIDI;Safari與Firefox預設未提供。按鈕已做好相容性保護:不支援時只會顯示提示,點選琴鍵或使用電腦鍵盤仍可正常演奏。
適合用來學鋼琴嗎?
它很適合學習鍵盤布局,包括音名、音階、音程及和弦指型,也能配合精確頻率練耳。不過電腦按鍵不感應力度,無法訓練觸鍵強弱;改用真實鋼琴或MIDI鍵盤時,布局知識可直接運用。
為什麼聽不到聲音?
瀏覽器只允許使用者操作後發聲,因此音訊引擎在第一次點選或按鍵時啟動。若仍無聲,請檢查本頁音量滑桿、系統輸出裝置,以及分頁是否靜音。音符讀值無論如何都會更新,可用來確認按鍵已被辨識。