一款基於瀏覽器的 16 步鼓機節奏編輯器,可在建置、播放與調整踢鼓、小鼓與閉鈆的節奏,範圍為 40–240 BPM,整個過程完全在頁面內進行,無需建立帳號、上傳檔案或下載音色樣本。線上鼓機讓所有操作都在本機完成:速度輸入、四十八個可切換的格子(三排十六格)、合成音色與播放排程器,全都存在你目前的分頁中,而非遠端伺服器。AudioContext 只會在第一次按下播放按鈕後才建立,這是為了配合那些在使用者互動前封鎖音訊的瀏覽器。由於踢鼓是正弦振盪器,而小鼓與閉鈆是播放時即時產生的短暫雜訊緩衝區,因此這個工具永遠不會連線到音色樣本主機,也不可能繼承第三方音色樣本的授權。預讀式排程器每 25 毫秒輪詢一次,並將接下來的事件提前最多 100 毫秒排入 Web Audio 時間軸,讓實際聲音能在準確排定的起始時間觸發,而非依賴 JavaScript 計時器回呼作為節拍時鐘。

為什麼「無需註冊」會改變工作流程
最近用過現代音樂應用程式的人都知道其中的摩擦:電子郵件驗證牆、確認連結、工作區重新導向,以及在撥放任何一個音之前就要求網路往返的雲端素材庫。純瀏覽器的節拍製作工具繞過了所有這些步驟。沒有帳號要建立、沒有大頭貼要設定、沒有訂閱方案要比較,也不用等待專案同步。頁面載入後格子就會出現,並已預先放好一段起始節奏:一段四拍底鼓的範例,每拍都有踢鼓,第二拍與第四拍有小鼓,八分音符位置有閉鈆。這段起始節奏只是個起點,你可以一次清掉一個格子,或用「清除節奏」一次全部清空。
這個承諾中「無需上傳」的一半同樣重要。一個會把你的音訊串流到伺服器去渲染節拍的工具,即使目的地值得信賴,也會引發明顯的隱私疑慮。這款線上鼓機沒有東西可以串流,因為三個音色根本不是檔案,而是由 Web Audio 節點即時產生的。踢鼓是短暫的正弦振盪器,其頻率會下降並搭配增益衰減包絡,小鼓與閉鈆則是即時建立、由高通濾波器與增益包絡塑形的雜訊緩衝區。把網路請求從渲染迴圈中移除,代表這個工具在飯店大廳的 Wi-Fi 連線下跟在家用光纖下一樣載入,就算公司 VPN 斷線時依然可用。
如何無需註冊就能製作節拍
開啟工具、輸入速度、點亮幾個格子、然後按下播放。頁面載入後,每個步驟都可以任意順序執行。
- 在 BPM 欄位中輸入 40 到 240 之間的整數;該欄位會以可復原的錯誤訊息,拒絕空白輸入、小數、分數、正負號、指數標記、單位文字,以及超出範圍的數字。
- 在踢鼓、小鼓與閉鈆三排中點擊格子來設定啟用的十六分音符步進。每一排有十六個等寬格子,所以點亮小鼓排的第五格,就會在每個小節的第五步觸發小鼓。
- 如果想要一個參考節拍,先聽預設的四拍底鼓範例,或按下「清除節奏」從靜音開始,在空白格子上打造自己的節拍。
- 按下播放來啟動循環。AudioContext 會在這個手勢中建立,這正是瀏覽器在允許音訊輸出前的要求。
- 想要停止聲音並釋放音訊資源時,按下停止;想要一次關閉全部四十八個格子時,按下「清除節奏」。
- 如果在播放中變更 BPM,目前的播放會停止,音訊環境也會關閉。重新輸入有效的整數並再次按下播放,就會以新速度從第一步重新開始。
- 播放進行中也可以編輯格子;接下來的排程區間會自動套用這個變更,所以你可以不停下循環就直接塑造過門。
解讀 16 步格子與節奏數學
格子永遠是四個四分音符拍,再劃分為十六個等分的十六分音符步進。由於速度欄位以「每分鐘四分音符數」為基準——這個慣例記載於 W3C MusicXML 4.0 中關於 sound 元素的文件——一個四分音符的長度是 60 ÷ BPM 秒。因為每個四分音符包含四個十六分音符,每一步的長度是 60 ÷ BPM ÷ 4 秒。以 120 BPM 為例:60 ÷ 120 ÷ 4 = 每步 0.125 秒,一個完整的 16 步小節長 0.125 × 16 = 2.0 秒。把速度加倍到 240 BPM,每步會減半為 0.0625 秒,小節變為 1 秒;減半到 60 BPM 時,每步延長為 0.25 秒,小節為 4 秒。範圍內其他 BPM 的完整算式,都可以用同一個公式計算。
| BPM | 每步長度 (60 ÷ BPM ÷ 4 秒) | 完整 16 步小節 |
|---|---|---|
| 40 (允許的最低值) | 0.375 秒 | 6.0 秒 |
| 120 (預設值) | 0.125 秒 | 2.0 秒 |
| 240 (允許的最高值) | 0.0625 秒 | 1.0 秒 |
這三個錨點直接取自已驗證的產品限制。當循環進行時,一個會移動的步進外框會標示出目前位置;當使用者設定了減少動畫偏好時,會以單純的顏色與外框變化來呈現,而非依賴動畫。每個格子按鈕同時具有開啟或關閉的按下狀態,並提供具描述性的無障礙標籤。橫向捲動讓所有十六個步驟在窄螢幕上依然可用,而不會把觸控目標縮到難以辨識。
哪些留在本機、哪些不會
節奏、速度、排程器、AudioContext,以及三個合成音色,全都存在你的瀏覽器分頁中。你的節拍內容完全不會離開這個頁面。即使在按下播放之前也是如此:頁面只會建立一次,而 AudioContext 只在使用者手勢之後才會建立,這與 Web Audio API 1.1 規格中所描述的生命週期一致。停止、重新開始的嘗試、播放錯誤,以及元件卸載,都會清除排程計時器、停止並中斷已追蹤的音源節點、清空音源集合,並關閉目前的 AudioContext。非同步的恢復動作會經過世代檢查,因此延遲完成的回應不會在停止或卸載之後重新啟動音訊。
有少數副作用是任何瀏覽器播放音訊時都會有的,並非這款工具本身的限制。合成音色在不同裝置上聽起來可能略有差異,因為音色取決於瀏覽器的音訊實作、輸出硬體、取樣率,以及每次小鼓與閉鈆觸發時產生的隨機雜訊。嚴重的分頁節流、被暫停的背景分頁、裝置變更或高系統負載,都可能影響你聽到的聲音;這些行為來自周圍的瀏覽器環境,而非頁面的邏輯。這款工具也不是設計成數位音訊工作站、AudioWorklet 引擎,或保證跨機器產生完全相同音色的渲染器。
線上鼓機誠實的限制
格子只支援直接的十六分音符。不支援 swing、三連音、力度分層、各軌道音量、加重音、效果鏈、錄音、匯出、MIDI 輸入或輸出,也不支援任意拍號。速度輸入刻意採用嚴格限制:只接受 40 到 240 之間的整數,讓排程器與其測試對應到單一已驗證的行為,而不是自由格式的公式。這個範圍是刻意設計的使用性與排程保護機制,並非對音樂速度極限的宣告。
如果你需要上述任何功能,正確的做法是把這個工具視為草稿本,把節奏概念搬到專門的音樂應用程式。按下播放前請把裝置音量調到中等,特別是使用耳機時,因為合成音的短暫脈衝在某些輸出系統上聽起來可能比錄製的鼓聲樣本更響。你可以搭配免費線上節拍製作指南取得更快到達同一個格子的捷徑,或是用同一個 BPM 在另一個分頁開啟線上節拍器,在打造過門時對照點擊與小鼓觸發。
如果你正在比較選項,Drum Machine for Live Use: Build a Looping Beat in Your Browser對此有詳細介紹。