瀏覽器節拍製作工具在排程每個音符時,如果都使用驅動喇叭的同一個 AudioContext 時鐘,就能在步進時機上做到數學上的精確,而線上鼓機正是採取這種做法,而不是只依賴 JavaScript 的計時器。它的 16 個步進每一個都是十六分音符,而此工具中的 BPM 定義為「每分鐘四分音符數」,與 MusicXML 4.0 中 tempo 屬性的定義一致。這樣一個統一的定義讓整個網格變得可預測:一個四分音符的長度是 60 ÷ BPM 秒,所以每個十六分音符步進的長度是 60 / BPM / 4 秒。在 120 BPM 時,相鄰步進之間正好是 0.125 秒,而完整的 16 步小節則是 2.0 秒,這些數字與工具的測試套件所驗證的結果相同。將相同的公式套用於 40 與 240 這兩個邊界值,則會得到 0.375 秒與 0.0625 秒的步進長度。由於每個可聽見的音符都是在 AudioContext 的時間軸上排程,而不是從 setTimeout 回呼觸發,因此你聽到的節奏遵循的是確定性的排程,而不是主執行緒的飄移。
搜尋「beat maker online accuracy」的讀者通常一次想要三件事:一個他們可以驗證的公式、一種能看到工具在時間軸上實際行為的方式,以及一份誠實列出可能干擾脈衝的因素清單。下面的章節會依序涵蓋這些內容,僅使用鼓機本身所公開的輸入、預設值與邊界。
瀏覽器節拍製作工具如何計算步進時機
這類音序器中的速度通常標示為「BPM」,但此處的 BPM 是一個特定的音樂單位。線上鼓機將 BPM 視為每分鐘四分音符數,這符合MusicXML 4.0 對 tempo 屬性的定義。四分音符是在 4/4 拍中持續一個拍點的單位,而網格將每個這樣的拍點再細分為四個十六分音符步進,這正是小節中會有 16 格的原因。
有了這個定義,每個步進的長度就能用一行算式算出來:
步進長度(秒)= 60 / BPM / 4
這個公式與排程程式碼用來建立事件偏移的公式相同,因此你在計算機上看到的值,就是 AudioContext 實際播放的值。以預設速度為例,可以把整個計算鏈寫得更明確:
- BPM = 120
- 步進長度 = 60 ÷ 120 ÷ 4 = 0.5 ÷ 4 = 0.125 秒
- 16 步小節 = 0.125 × 16 = 2.0 秒
相同的數值也直接從規格中得出:120 BPM 下的一個四分音符長度為 0.5 秒,而十六分音符是四分音符的四分之一。2 秒的小節長度,也是大多數聆聽者預期典型 4/4 律動循環的速度,這也是 120 成為預設值的原因之一。
線上鼓機的 BPM 範圍與速度錨點
鼓機並不接受使用者可能輸入的任意數字。速度輸入欄位僅接受 40 到 240 之間的整數十進位數,任何其他輸入(空白、分數、帶正負號、指數記號、附帶單位文字,或單純超出範圍)都會回傳一個可恢復的錯誤訊息,而不是悄悄強制改為預設值。這條輸入規則是第一道精確度防線:它能避免排程器收到一個、其意義在後續流程中從未被一致認定的數值。
在這個範圍中,有三個特定的錨點被完整記載,它們構成了一份實用的對照表,適合用來比較各家瀏覽器節拍製作工具:
| 速度 | 步進長度 (60 / BPM / 4) | 完整 16 步小節 |
|---|---|---|
| 40 BPM(下邊界) | 0.375 秒 | 6.0 秒 |
| 120 BPM(預設值) | 0.125 秒 | 2.0 秒 |
| 240 BPM(上邊界) | 0.0625 秒 | 1.0 秒 |
40 到 240 的範圍是刻意設下的可用性與排程守則,而不是對音樂速度極限的主張。慢速律動的作品與非常快的節奏仍然落在這個範圍之外,但在範圍之內,輸入、算式、測試套件與可聽輸出一致地對齊。速度與步進長度之間的關係是線性的,因此任何被接受的 BPM 都會產生公式預測的步進長度,而小節長度永遠是該步進長度的 16 倍。
排程器如何讓網格與 Web Audio 保持同步
即使有了一個乾淨的公式,如果觸發每個音符的機制是 JavaScript 回呼,而不是音訊時鐘事件,瀏覽器音序器仍然可能產生飄移。鼓機採用了 look-ahead 排程器來避免這種情況。一個輕量級的計時器每 25 毫秒檢查一次,並將下一批音符預先排入 AudioContext 時間軸上,最多提前 100 毫秒。接著,可聽見的音源會使用其精確的排程開始時間,因此驅動節拍的是 AudioContext,而不是回呼。Web Audio API 1.1 的時間軸是整個鏈路上其他步驟所繼承的參考基準。
這樣的設計對精確度帶來幾項實際影響:
- 播放期間對圖形的編輯,會在下一個排程窗口被採用,因此即使你點擊開啟或關閉格子,網格仍然會持續向前推進。
- 在播放過程中更改速度會停止當前的播放、釋放其 AudioContext,並等待下一次有效的 Play 按下。這能避免以舊速度進行到一半的播放,與以新速度放置的音符同時並存。
- AudioContext 僅在 Play 處理程序中建立,這符合瀏覽器在音訊啟動前需要使用者手勢的政策。先前的 context 會在 Stop、新的啟動、播放錯誤,以及卸載時被關閉,因此延遲的恢復動作不會在你已經停止之後又讓聲音洩漏回來。
因此,排程是一條小而確定性的處理流程:由共用的時間函式建立步進編號與時間戳、在每個步進對當下的音軌進行快照,再交由 AudioContext 播放結果。測試套件所執行的同一組純函式,正是驅動實際播放的函式,這消除了「測試用公式」與「實際公式」分道揚鑣的常見風險。
使用線上鼓機建立可驗證的 16 步圖形
感受精確度故事最直接的方式,就是把排程器徹底操作一遍。整個工作流程分為三個有記載的步驟:
- 輸入一個 40 到 240 BPM 之間的整數速度。輸入欄位會拒絕空白、小數、正負號、指數記號,以及任何超出範圍的數字,因此送達排程器的數值,一定是一個已經通過公式測試的值。
- 在十六步的網格上切換大鼓、小鼓與 hi-hat 格點。初始圖形是個 four-on-the-floor 範例:大鼓落在四分音符位置、小鼓落在第二拍與第四拍,封閉 hi-hat 落在八分音符位置,你可以一次替換一格,而不會打斷持續移動的步進輪廓。
- 按下 Play 即可循環播放合成出來的節拍,按下 Stop 則釋放音訊,或使用 Clear pattern 將所有步進關閉。Stop 會關閉 AudioContext 並斷開追蹤中的音源;Clear 會將 48 格全部清回靜音;下一次按下 Play 時,則會從第一步開始重建一條乾淨的排程。
在這個循環下操作幾分鐘後,你可以直接聽到精確度的宣稱:在任何範圍內的速度下,步進都會等距排列;在第 16 步之後循環會乾淨地回到起點;指示器回到第一步的時間,正好就是公式所預測的小節長度。
即使算式正確,仍可能影響可聽時機的因素
數學上的精確與聽覺上的精確並不相同,而對「線上節拍製作工具究竟有多準」這個問題的公正回答,必須點出這道鴻溝的後半段。鼓機在算式與排程兩端都能完全掌控,但音訊鏈的其餘部分仍然存在已知的變動來源:
- 瀏覽器節流與被暫停的分頁。當分頁被隱藏或被節流時,25 毫秒的計時器可能會延遲。AudioContext 會繼續播放已經排定好的內容,因此循環不會以一般意義上的方式「跳格」,但長時間的暫停可能會讓可見的步進指示器,在下一個窗口觸發前短暫地與音訊不同步。
- 作業系統音訊延遲。即使排程完美無缺,聲音仍必須經過作業系統的音訊堆疊才能到達你的輸出裝置。這段往返在 Windows、macOS、Linux、行動裝置,以及藍牙輸出路徑之間都不相同,可能會讓你聽到的聲音相對於視覺點擊,在任一方向上偏移幾毫秒。
- 裝置取樣率與輸出硬體。Web Audio 節點會以建立 AudioContext 時所設定的取樣率執行,而外接 DAC、耳機擴大機與藍牙喇叭各自會加入額外的緩衝。鼓機並不是數位音訊工作站,也不是 AudioWorklet 引擎,因此它並不保證跨裝置能達到樣本等級完全一致的渲染結果。
- 合成音色的變動。大鼓、小鼓與 hi-hat 都是在播放時即時生成。小鼓與 hi-hat 每次擊發都使用新產生的雜訊緩衝區,因此連續兩次小鼓擊發在統計上相似,但並非逐位元相同;確切的音色會因瀏覽器的音訊實作、輸出硬體與取樣率而略有差異。
這些都不是工具的錯誤,也不會改變步進的算式;它們是任何瀏覽器音序器都會有的常見注意事項。如果一個專案需要跨裝置的樣本級精準同步、延遲校正,或是渲染完成的音軌分軌檔,正確的做法是把圖形的概念移轉到專用的音樂應用程式。對於想知道這種精確度故事在另一個音訊工具中如何呈現的讀者,Audio Pitch Changer Accuracy: Math, Limits, and Results 中對於變速處理算式的解析,會以相同的公式、測試與極限討論,示範一個重取樣處理流程。
對於「線上節拍製作工具究竟有多準」這個問題,誠實的回答是「比過去更準,但涵蓋範圍比 DAW 小」。在有記載的範圍內,依循有記載的輸入規則,決定步進長度的只有公式 60 / BPM / 4,決定步進何時播放的只有 AudioContext,兩端都有測試套件作為錨點。邊界(40 與 240)、預設值(120)、look-ahead 參數(25 毫秒輪詢、提前 100 毫秒),以及三種合成音色,就是這份合約的全部內容。鼓機最適合用來勾勒直接的十六分音符想法、學習步進音序,以及測試基本脈動;它也清楚說明了自己不做的事:沒有 swing、沒有三連音、沒有力度、沒有各軌音量、沒有錄音、沒有匯出、沒有 MIDI 同步,也沒有背景分頁保證。了解這份清單本身就是精確度故事的一部分,因為「在已知範圍內精準」是一個比「在某種未指定的意義上精準」更強的說法。
若想更深入了解,請參閱Beat Maker Online Explained: 16-Step Sequencer Basics。