瀏覽器鼓機可以在不下載任何音訊樣本的情況下建立並循環一段節奏,因為每一次的大鼓、小鼓與 hi-hat 擊打,都是由 JavaScript 透過 W3C Web Audio API 即時生成的。Online Drum Machine 完全內建在一個網頁中:無需下載、無需註冊、無需上傳音訊檔案,也不需要向任何第三方樣本主機取得授權。你可以在 40 到 240 BPM 之間選擇速度,在一個分成三個音軌的 16 步格子上切換格子,然後按下 Play 來循環播放結果。大鼓是一個正弦波振盪器,其頻率會下降而增益會衰減;小鼓與 hi-hat 則使用新生成的雜訊緩衝區,並透過濾波器與包絡器塑形。由於這些音色是在本地合成,而不是從錄音播放,因此沒有任何東西需要授權、沒有任何東西需要擷取,也不會有任何資料離開你的裝置。這個格子始終代表四個四分音符拍,再細分為十六個等長的十六分音符步,這使得計算拍點以及對應到常見的 4/4 拍號都非常容易。本文將帶你了解這個工具能做什麼、它的 BPM 數學如何運作、三種合成音色的聽感如何,以及如何在不安裝任何軟體的情況下組合出第一段循環。

16 步格子與三種音色
格子是整個音序器的心臟。它包含由左至右的十六個步,以及由上至下的三個列。每一列對應一種樂器:最上方是大鼓、中間是小鼓、最下方是 hi-hat。總共提供 48 個可切換的格子。點擊任一格即可在該步開啟該樂器;再點一次即可關閉。各格是獨立的——關閉小鼓格子並不會影響同一欄中的大鼓格子,而你也可以在調整大鼓時讓 hi-hat 列保持開啟。
這個格子始終代表四個四分音符拍,再細分為十六個等長的十六分音符步,因此第 1 步是重拍,而第 5、9、13 步則分別標記第二、第三與第四拍的起點。當你按下 Play 時,一個移動的外框會在循環播放時標示出目前的步,讓你可以清楚看到自己在小節中的位置。這個外框使用色加上邊框,而非動畫,這表示即使是要求減少動畫的使用者,仍能獲得相同的定位回饋。每個格子按鈕也具有明確的開或關按下狀態,以及具描述性的無障礙標,而水平捲動則讓十六個步在狹窄的螢幕上仍可使用,而不會把觸控目標縮成難以辨識的小點。
當你首次開啟鼓機時,格子會預先填入一個簡單的 four-on-the-floor 起始圖案:大鼓落在每個四分音符(第 1、5、9、13 步)、小鼓落在第二拍與第四拍(第 5 步與第 13 步),閉合 hi-hat 則落在每個八分音符(第 1、3、5、7、9、11、13、15 步)。這是一個乾淨的圖案,你可以一次替換一個格子,而不必從無聲開始。按下「Clear pattern」會一次關閉全部 48 個格子,讓你隨時回到空白的小節重新開始。
設定速度、建立圖案並播放
- 在瀏覽器中開啟鼓機,並找到格子附近的速度欄位。
- 輸入 40 到 240 之間的整數。在本工具中,BPM 代表每分鐘的四分音符數(對應 MusicXML sound element所使用的速度定義),因此 120 是輕鬆的步行節奏,而 90 則是典型的嘻哈速度。
- 點擊大鼓、小鼓或 hi-hat 列中的任一格,即可在該十六分音符步開啟該樂器。再點一次即可關閉。這個格子始終涵蓋四拍的一個小節,而你所切換的格子將成為 Play 重複播放的循環內容。
- 按下 Play。一個 look-ahead 排程器每 25 毫秒輪詢一次,並提前最多 100 毫秒將事件排入 AudioContext 時間軸,因此即使 JavaScript 正忙於其他工作,循環仍能保持緊密。
- 觀察移動的步驟外框來確認目前位置。在循環播放時編輯格子——新的切換會被下一個排程視窗接收,讓改變幾乎立即可聽見。
- 當你想要釋放音訊資源並讓播放靜音時,請按 Stop。Stop 會清除計時器、停止並中斷合成的音訊來源,並關閉目前的 AudioContext。
- 按下「Clear pattern」可一次關閉全部 48 個格子,在不離開頁面的情況下從無聲重新開始。
- 若要更改速度,請輸入一個介於 40 到 240 之間的有效整數,然後再次按下 Play。在播放期間編輯速度欄位會自動停止目前的播放,確保排程器不會混用兩個不同的速度。
BPM 與步進時序:節奏背後的數字
由於本工具的 BPM 代表每分鐘的四分音符數,因此單個四分音符的長度為 60 除以 BPM 所得的秒數。格子在每個四分音符內包含四個十六分音符步,因此每步的長度為 60 / BPM / 4 秒。在預設的 120 BPM 下,即 60 / 120 / 4 = 0.125 秒每步,完整的 16 步小節共需 2 秒。40 到 240 BPM 的範圍是有意的可用性與排程防護,而不是在聲稱真實鼓手能打多快。
| BPM 設定 | 步進長度 (秒) | 小節長度 (秒) | 採用此值的原因 |
|---|---|---|---|
| 40 | 0.375 | 6.000 | 可接受速度範圍的下限 |
| 120 | 0.125 | 2.000 | 預載圖案的預設起始速度 |
| 240 | 0.0625 | 1.000 | 可接受速度範圍的上限 |
速度欄位是嚴格的:僅接受 40 到 240 之間的整數十進位數字。空白輸入、含小數的數字、正負號、指數表示法、單位文字,以及超出範圍的值,都會顯示一個可恢復的錯誤,讓你可以重試,而不是鎖住欄位。如果瀏覽器的音訊初始化或事件排程失敗,工具會回報一個可恢復的訊息,並讓你再次按下 Play,而不是維持一個錯誤的播放狀態。在播放期間編輯速度會停止目前的播放並釋放其音訊上下文;在輸入有效值後按下 Play,則會從第一步乾淨地開始。
這個免費工具未包含的功能
這是一個專注的 16 步速寫板,而非完整的數位音訊工作站。免費版本刻意省略了製作人可能期待於商業鼓機的多項功能:
- 無 swing 或 shuffle:每一步都是等距的直十六分音符。
- 無三連音:格子鎖定在四個四分音符內的十六分音符。
- 無力度、強調或個別音軌音量:每次擊打都以相同的固定音量播放。
- 無效果、EQ、殘響或壓縮:三種音色皆為樸素的合成包絡。
- 無錄音、匯出、bounce 或 stem 渲染:循環無法存成檔案。
- 無 MIDI 輸入或輸出、無 Ableton Link,也無樣本精度的跨裝置同步。
- 無背景分頁保證:瀏覽器的大量節流、暫停的分頁、裝置變更,以及高系統負載,仍可能影響你所聽到的內容。
如果你需要正式的編曲、渲染後的 stems 或延遲校正,請將此圖案概念轉移至專用的音樂應用程式。Web Audio 排程器可減少一般主執行緒的抖動,但它並非 AudioWorklet 引擎,也不保證在不同裝置上呈現完全相同的結果。若想以相同這個 16 步版面作為學習輔助,請參考免費速寫 16 步鼓節指南。
音色行為與瀏覽器變數
所有三種音色都是在播放時透過瀏覽器的 Web Audio 節點合成,因此無需下載任何音訊樣本,也不適用任何外部樣本授權。大鼓是一個短促的正弦波振盪器,其頻率快速下降而增益衰減,產生具有衝擊力的低頻 thud。小鼓使用一個新生成的雜訊緩衝區,透過高通濾波器與增益包絡塑形;hi-hat 則使用更短、更安靜的雜訊爆發,並具有更高的高通截止頻率。由於小鼓與 hi-hat 仰賴隨機生成的雜訊,因此每一次擊打都會與前一次略有不同。
這種合成特性意味著音色會隨著瀏覽器的音訊實作、輸出硬體、取樣率,以及每次小鼓或 hi-hat 擊打所產生的隨機雜訊而有所不同。AudioContext 只會在你按下 Play 之後才建立,以遵守要求使用者手勢才能啟動音訊的瀏覽器。Stop、新的播放嘗試、播放錯誤,以及元件卸載,皆會清除排程計時器、停止並中斷被追蹤的音訊來源節點、清空來源集合,並關閉目前的 AudioContext。非同步的 resume 會進行世代檢查,因此延遲完成的呼叫不會在 Stop 或卸載之後意外地重新啟動音訊。
在按下 Play 之前,請將裝置音量保持在中等,尤其是使用耳機時,因為合成的瞬態訊號在某些輸出系統上可能聽起來更響亮。本工具最適合用於速寫直十六分音符的概念、學習步進音序,或測試基本的脈動;若要更進一步,請把這個圖案視為起點,並將它移至更完整的製作環境中。