一個基於瀏覽器的免 App 節拍製作工具是一種完全在網頁內運作的鼓機排序器,而 Online Drum Machine 就是以此方式打造:每一次的大鼓、小鼓與閉合 hi-hat 敲擊,都在播放時使用瀏覽器的 Web Audio 引擎即時合成,因此你不需要安裝程式、下載音色包、建立帳號,或將音訊傳送到伺服器。該圖樣是一個固定的 16 步格網,劃分為四個四分音符拍,每個速度(BPM)為 40 到 240 之間的整數,其中 BPM 代表每分鐘的四分音符數,而一個十六分音符步的持續時間遵循公式 步持續時間 = 60 ÷ BPM ÷ 4 秒。在預設的 120 BPM 下,每步為 0.125 秒,這意味著完整的 16 步小節在循環前恰好持續 2 秒。這項單一的時間規則正是讓聽覺結果感覺像穩定脈動的原因,因為每一步都使用短暫的 look-ahead 排程器放置在 Web Audio 時間軸上,而非依賴 JavaScript 計時器回呼作為節拍時鐘。
整個使用體驗都是在本機進行。開啟頁面並不會從任何網路主機擷取任何音訊樣本,AudioContext 只會在你按下 Play 之後才會建立(這符合要求使用者手勢後才能播放聲音的瀏覽器規範),而 Stop 會乾淨地拆除音訊圖,使暫停的分頁無法在背景持續播放。如果你曾經因為想測試一個節奏想法、卻不想在電腦上安裝一整套數位音訊工作站而搜尋「beat maker online without app」,這正是為此打造的工作流程:開啟頁面、點選格子、設定速度、按下 Play,然後聆聽。

此處「免 App」的真正含義
「online without app」這個詞組通常代表讀者有三項期待:不需要安裝、不需要註冊、不需要上傳。Online Drum Machine 滿足這三項。沒有安裝程式、沒有瀏覽器擴充功能、沒有首次執行精靈,也沒有建立帳號。在整個工作流程中的任何環節,也都沒有上傳的步驟,無論是圖樣、音檔,還是音色庫,都不需要上傳。大鼓音色是由一個短暫的正弦振盪器產生,其頻率會下降而增益會衰減。小鼓與閉合 hi-hat 則是由 Web Audio 在本機新建立的雜訊緩衝區產生,各自透過高通濾波器與增益包絡塑形。這就是為什麼啟動該工具不會聯絡任何音色主機,也不會繼承任何第三方音色授權;唯一的網路請求就是載入頁面本身。
由於 AudioContext 只會在你按下 Play 時才會建構,本工具也遵循瀏覽器「音訊必須在使用者手勢後才能啟動」的規則。如果音訊初始化或排程因任何原因失敗,工具會顯示一則可復原的訊息,並讓你重新按下 Play,而不是回報一個錯誤的播放狀態。Stop、重新開始的嘗試、播放錯誤,以及元件卸載時,都會清除排程計時器、停止並中斷已追蹤的來源節點、清空來源集合,並關閉目前的 AudioContext,因此不會有半運作狀態的音訊圖留在背景中。
瀏覽器節拍製作工具與安裝版 DAW 的差異
一套安裝版的數位音訊工作站是為了長時間作業、數十條軌道、外掛效果、自動化曲線、MIDI 同步,以及渲染 stems 而打造。Online Drum Machine 並不是要成為其中之一。它是一個精簡的 16 步節奏排序器,擁有三個音色、三個控制項,以及一個速度欄位。這樣小的介面正是它能夠在無需下載的情況下保持實用的原因,同時也是為何該工具能如此貼切地對應「beat maker online without app」背後的搜尋意圖:頁面本身就是完整的程式。
| 能力 | Online Drum Machine | 安裝版 DAW |
|---|---|---|
| 需要安裝 | 否 | 是 |
| 擷取音色庫 | 否,於本機合成 | 通常是 |
| 鼓音色數量 | 3(大鼓、小鼓、hi-hat) | 眾多,並含多麥克風取樣 |
| 圖樣解析度 | 固定的 16 個十六分音符步 | 可變,通常含自動化 |
| 速度範圍 | 40 到 240 BPM(整數) | 通常更廣 |
| 匯出或錄音 | 不支援 | 支援 |
| MIDI 輸入或輸出 | 不支援 | 支援 |
| 啟動音訊需要使用者手勢 | 是(按下 Play) | 否 |
Web Audio 的排程模型是另一項有意義的差異。生產環境的播放每 25 毫秒輪詢一次,並在 AudioContext 時間軸上提前排程至多 100 毫秒。可聽見的音源使用其精確的 Web Audio 起始時間,而非將 JavaScript 計時器回呼視為節拍時鐘,這能減少一般的主執行緒抖動,但並不保證跨裝置能達到樣本級一致的渲染結果。瀏覽器嚴格的節流、暫停的分頁、裝置變更,以及高系統負載,仍可能影響你聽到的內容。
逐步打造你的第一個節拍
如果你的目標是在不離開瀏覽器的情況下勾勒出一段可用的 16 步循環,使用此工具的流程既簡短又明確。
- 開啟 Online Drum Machine。前往任何現代的桌面或行動瀏覽器中的 Online Drum Machine 頁面。該頁面會載入一個四拍踩大鼓的入門圖樣:大鼓落在四個四分音符位置,小鼓落在第二與第四拍,閉合 hi-hat 落在八個八分音符位置。這個入門圖樣僅供示範,可以一次替換一個步驟。
- 設定速度。在 BPM 欄位中輸入 40 到 240 之間的整數。預設 120 BPM 會使每步為 0.125 秒,而一個小節為 2 秒。任何超出 40 到 240 範圍、小數、符號、指數、單位文字,或是空白的欄位,都會顯示一則可復原的錯誤,而不是靜默失敗。
- 切換格網上的格子。點選大鼓、小鼓或 hi-hat 排中的任一格子,可在對應的十六分音符步上開啟該樂器,再點一次即可關閉。格網永遠代表四個四分音符拍,劃分為十六個等分的十六分音符步,因此你正在編輯的欄位具有固定的音樂意義。
- 按下 Play 以循環播放節拍。首次按下會建立 AudioContext 並啟動 look-ahead 排程器。隨著圖樣循環,一道移動的外框會高亮顯示目前的步驟,當使用者要求減少動畫時,色彩過渡會被抑制。
- 按下 Stop 以釋放音訊。Stop 會清除排程器、停止並中斷所有已追蹤的來源節點,並關閉 AudioContext。你可以在播放期間自由編輯格子;下一個排程窗口會套用這些編輯。
- 按下 Clear pattern 重新開始。Clear 會在單一動作中關閉全部 48 個格子,留下完全靜音的格網,準備好迎接新的靈感。
這六個步驟的循環就是整個核心工作流程。如果你想參考類似的瀏覽器端速寫方式,同一工具的筆電專用指南以略微不同的角度介紹了相同的控制項。
BPM 與步進時間的具體數字
此工具的速度遵循 MusicXML 的慣例:BPM 代表每分鐘的四分音符數。由於每個四分音符被劃分為四個十六分音符步,因此一步的持續時間為 60 ÷ BPM ÷ 4 秒。你可以使用該公式預估在支援範圍內的任何速度下,16 步小節將花費多少時間;當你試聽圖樣時,也可以將下列邊界值作為快速的參考點。
| 速度 (BPM) | 每個十六分音符步的秒數 | 每個 16 步小節的秒數 |
|---|---|---|
| 40 (下限) | 0.375 | 6.000 |
| 120 (預設) | 0.125 | 2.000 |
| 240 (上限) | 0.0625 | 1.000 |
使用上述公式在預設 120 BPM 的運算範例:步持續時間 = 60 ÷ 120 ÷ 4 = 60 ÷ 480 = 0.125 秒,因此完整的 16 步小節 = 16 × 0.125 = 2.000 秒後開始循環。40 BPM 與 240 BPM 兩列為速度輸入的書面邊界,超出該範圍時,工具會顯示可復原的錯誤,而非靜默地夾限制值。
控制項、限制,以及工具不會做的事
這裡剛好有三個 transport 風格的控制項:Play、Stop,以及 Clear pattern。Play 啟動循環,且是唯一會建立 AudioContext 的時機。Stop 釋放音訊資源並關閉 context。Clear pattern 將全部 48 個格子歸零,也就是三排十六格,讓你從靜音開始勾勒。
這些限制是有意為之。格網解析度固定為十六個直接的十六分音符步;沒有 swing、沒有三連音細分、沒有每步力度、沒有重音、沒有每軌音量、沒有效果、沒有錄音、沒有匯出、沒有 MIDI 輸入或輸出、沒有任意的拍號,也不在背景分頁中保證行為。如果你需要製作編曲、跨裝置的精確同步、渲染 stems,或是延遲校準,建議的下一步是把圖樣概念帶到一個專門的音樂應用程式中。這些省略都不是 bug;它們是讓該工具維持在單一瀏覽器頁面、無需下載即可啟動所必須付出的代價。
在播放進行時編輯速度也會停止目前的運行。這是刻意的設計:它能防止已按舊速度排程的事件,與新速度下剛啟動的排程重疊。在你輸入介於 40 到 240 之間的有效整數並再次按下 Play 之後,新的循環會從第一步乾淨地開始,而非在小節中間啟動。
Browser Behavior, Audio Quality, and Common Pitfalls
Because the three voices are synthesized at playback time, their tone is shaped by the browser's Web Audio implementation, the output hardware, the sample rate, and the random noise generated for each snare or hi-hat hit. Two runs of the same pattern on the same browser can sound subtly different on those last two voices; that is the expected behavior of locally generated noise, not a bug. The Web Audio API specification describes how nodes like oscillators, gain stages, and filters schedule events on a shared timeline, which is the same model this tool uses to keep the loop stable. If you want a deeper read on the underlying audio graph primitives, the W3C Web Audio API 1.1 specification is the canonical reference.
A few practical pitfalls are worth knowing up front. Keep your device volume moderate before pressing Play, especially with headphones, because synthesized transients can sound louder on some output systems than the looping volume suggests. If a tab is suspended by the browser to save power, audio scheduling can be throttled and the loop will drift or stop; refocusing the tab is usually enough to resume normal playback. Editing the BPM field with an invalid value, such as a decimal like 119.5, a negative number, scientific notation, or a string with text, surfaces a recoverable message instead of changing tempo, so you can correct it and try again without reloading the page. The accessibility behavior is also worth noting: each grid button exposes an on and off pressed state and a descriptive label, and the moving step indicator uses an outline rather than relying on color when reduced-motion is requested.
For most readers, the right mental model is simple: the page is the app, the grid is the pattern, and Play is the moment audio starts. That is exactly what makes a beat maker online without an app feel like a one-click sketchpad rather than another piece of software to manage.
For a deeper look, see Online Metronome on iPhone: No App, Just Browser Clicks.