與lookahead調(diào)度器實(shí)現(xiàn))
基于瀏覽器的鼓機(jī)/節(jié)拍音序器是 Web Audio API 學(xué)習(xí)路徑中訓(xùn)練價(jià)值很高的項(xiàng)目之一。它沒有后端依賴卻同時(shí)涉及實(shí)時(shí)音頻調(diào)度、聲音合成、步進(jìn)網(wǎng)格交互、視覺反饋和性能優(yōu)化多個(gè)層面。很多開發(fā)者一接觸到這類項(xiàng)目首先想到的是“播放一段采樣音頻”但真正把鼓機(jī)做成可用的工具核心難點(diǎn)其實(shí)在時(shí)鐘模型和交互響應(yīng)上。下面從零開始實(shí)現(xiàn)一個(gè)可以直接在瀏覽器里運(yùn)行的鼓點(diǎn)/節(jié)拍音序器代碼盡量保持最小閉環(huán)但工程結(jié)構(gòu)會(huì)按可擴(kuò)展的方式來組織。整個(gè)項(xiàng)目會(huì)完成三部分能力用 Web Audio API 合成 Kick、Snare、Hihat 三種基礎(chǔ)鼓聲用 lookahead 調(diào)度器驅(qū)動(dòng) 16 步循環(huán)提供可點(diǎn)擊的步進(jìn)網(wǎng)格和 BPM、Swing 控制。文章末尾會(huì)給出常見故障排查表和生產(chǎn)環(huán)境注意點(diǎn)方便你在自己的項(xiàng)目中繼續(xù)擴(kuò)展。1. 先理解Web鼓機(jī)/節(jié)拍音序器的三個(gè)技術(shù)底座1.1 鼓機(jī)音序器到底在做什么鼓機(jī)音序器通常由一條條橫向的軌道組成每條軌道對應(yīng)一種鼓聲比如底鼓、軍鼓、踩镲。縱向把一個(gè)小節(jié)平均切成若干份最常用的是 16 份也就是 16 分音符。用戶在每個(gè)格子上決定“這個(gè)位置是否觸發(fā)聲音”形成一個(gè)循環(huán)模式。播放引擎按固定 BPM 從第一格走到最后一格遇到被激活的格子就觸發(fā)對應(yīng)聲音。這個(gè)機(jī)制聽起來簡單但落地時(shí)有一個(gè)容易被忽略的問題聲音的觸發(fā)不能依賴系統(tǒng)的 setInterval 或 setTimeout 精確計(jì)時(shí)。瀏覽器主線程上的定時(shí)器會(huì)受到頁面渲染、事件回調(diào)、垃圾回收影響在復(fù)雜頁面里偏差可能達(dá)到幾十毫秒甚至更多。對于旋律性音序器幾十毫秒的偏差已經(jīng)能被耳朵明顯察覺。因此鼓機(jī)項(xiàng)目首先要建立正確的音頻時(shí)鐘模型。1.2 Web Audio API為什么用合成音比音頻文件更可控Web 音序器要發(fā)聲有兩種做法。第一種是加載采樣文件用 AudioBufferSourceNode 播放錄音第二種是用 OscillatorNode、噪聲緩沖區(qū)和 GainNode 現(xiàn)場合成出鼓聲。采樣方案音色真實(shí)但文件加載、跨域、內(nèi)存占用和波形編輯會(huì)增加復(fù)雜度。合成方案在代碼層面更容易控制頻率、時(shí)值和音量包絡(luò)也更容易做出參數(shù)化調(diào)整。對于學(xué)習(xí) Web Audio API 的人來說合成鼓聲是更好的練習(xí)起點(diǎn)。合成鼓聲的核心思路是每種鼓聲本質(zhì)上是一段能量快速衰減的音頻信號(hào)。底鼓是一個(gè)從高到低快速掃頻的低頻振蕩器軍鼓是噪聲疊加一個(gè)帶通濾波的共鳴聲踩镲是高通濾波后的短噪聲。把這些聲音拆成振蕩器、噪聲源和濾波器的組合代碼結(jié)構(gòu)就非常清晰了。1.3 時(shí)序模型為什么不能用setInterval直接播放聲音初學(xué)者最自然的做法是setInterval(() { playKick(); steps.forEach((active, index) { if (active index currentStep) playSound(); }); }, intervalMs);這段代碼的問題在于setInterval 的回調(diào)時(shí)間不精確。瀏覽器在標(biāo)簽頁切到后臺(tái)時(shí)會(huì)降低定時(shí)器頻率主線程一旦被長任務(wù)占用回調(diào)會(huì)堆積或延遲。更關(guān)鍵的是聲音播放用的是audioCtx.currentTime這是一個(gè)獨(dú)立于頁面主線程的高精度音頻時(shí)鐘。正確做法是“提前安排”也就是 lookahead scheduling每隔幾十毫秒檢查一次未來 100 毫秒左右需要播放哪些聲音用audioCtx.currentTime計(jì)算精確的觸發(fā)時(shí)間把播放事件安排到時(shí)間軸上。這樣即使主線程在某個(gè)時(shí)刻發(fā)生了延遲只要提前安排過音頻引擎依然會(huì)在正確的時(shí)間點(diǎn)發(fā)聲。下面所有代碼都會(huì)圍繞這個(gè)模型展開。2. 環(huán)境準(zhǔn)備與最小項(xiàng)目骨架先讓瀏覽器出聲2.1 開發(fā)環(huán)境要求這個(gè)項(xiàng)目不依賴構(gòu)建工具直接使用瀏覽器原生模塊和 Web Audio API。建議環(huán)境如下項(xiàng)目推薦配置說明瀏覽器Chrome / Edge / Firefox 最新版各瀏覽器對 AudioContext 支持已基本一致開發(fā)服務(wù)本地靜態(tài)服務(wù)器或 VS Code Live Serverfile:// 協(xié)議下模塊加載有限制Node.js可選僅用于啟動(dòng) http-server不安裝也不影響閱讀編輯器VS Code 或任意代碼編輯器無強(qiáng)制要求如果你的瀏覽器比較舊需要關(guān)注AudioContext是否為webkitAudioContext?，F(xiàn)代瀏覽器可以直接使用標(biāo)準(zhǔn)名稱但為了兼容可以加一行兜底。2.2 項(xiàng)目結(jié)構(gòu)與頁面骨架先建立如下目錄結(jié)構(gòu)drum-sequencer/ ├── index.html ├── styles.css └── app.js這是最簡結(jié)構(gòu)適合獨(dú)立運(yùn)行。后面如果項(xiàng)目變大可以考慮 Vite TypeScript但學(xué)習(xí)階段先保持文件少邏輯更容易跟蹤。index.html負(fù)責(zé)頁面結(jié)構(gòu)一組 BPM 控制、播放按鈕、清空按鈕以及一個(gè)用于展示 16 步網(wǎng)格的容器。網(wǎng)格先不寫死由 JavaScript 根據(jù)軌道數(shù)據(jù)動(dòng)態(tài)生成。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleWeb Drum Sequencer/title link relstylesheet hrefstyles.css / /head body div classapp div classtoolbar button idplayButtonPlay/button labelBPM input idbpmSlider typerange min60 max180 value90 //label span idbpmValue90/span button idclearButtonClear/button /div div idstepGrid classstep-grid/div /div script srcapp.js/script /body /html注意播放按鈕的類型是button默認(rèn)行為不會(huì)提交表單避免刷新頁面。BPM 使用 range 控件雖然精度有限但交互直觀適合手動(dòng)調(diào)試。2.3 初始化AudioContext并解決瀏覽器自動(dòng)播放策略瀏覽器不允許頁面加載后直接播放音頻必須在用戶手勢事件中創(chuàng)建或恢復(fù) AudioContext。這個(gè)限制是為了防止網(wǎng)頁突然發(fā)聲。所以初始化邏輯要放到按鈕點(diǎn)擊事件里。let audioCtx null; let masterGain null; async function initAudio() { if (!audioCtx) { const Context window.AudioContext || window.webkitAudioContext; audioCtx new Context(); masterGain audioCtx.createGain(); masterGain.gain.value 0.8; masterGain.connect(audioCtx.destination); } if (audioCtx.state suspended) { await audioCtx.resume(); } }這里有兩個(gè)關(guān)鍵點(diǎn)。第一audioCtx全局只創(chuàng)建一次避免重復(fù)創(chuàng)建多個(gè)音頻上下文。第二masterGain作為主音量總線所有鼓聲都連接到這個(gè)節(jié)點(diǎn)上后續(xù)加壓縮器、限制器也更方便。在點(diǎn)擊播放按鈕時(shí)先調(diào)用await initAudio()再啟動(dòng)調(diào)度器。這樣能保證用戶手勢觸發(fā)時(shí)音頻上下文處于運(yùn)行狀態(tài)。2.4 主音量與音頻總線系統(tǒng)中的音頻信號(hào)流大概是振蕩器/噪聲源 - 濾波/增益節(jié)點(diǎn) - masterGain - audioCtx.destinationdestination是瀏覽器音頻輸出設(shè)備。中間加一層masterGain是為了統(tǒng)一控制總音量并為后續(xù)加效果器留下插入點(diǎn)。比如你可以在這里插入一個(gè)DynamicsCompressorNode防止多個(gè)鼓聲同時(shí)觸發(fā)時(shí)聲音過載。在合成鼓聲的代碼里每個(gè)聲音內(nèi)部有自己的音量包絡(luò)節(jié)點(diǎn)最終連接到masterGain。這樣不同聲音之間不會(huì)互相修改對方的增益音頻總線保持干凈。3. 用Web Audio API合成三款基礎(chǔ)鼓聲3.1 Kick頻率包絡(luò)才是低鼓的靈魂底鼓的聽感來自頻率快速下落和振幅快速衰減。實(shí)現(xiàn)上使用一個(gè)OscillatorNode波形選正弦波頻率從 150Hz 左右指數(shù)下降到 50Hz 左右。這里的指數(shù)下降很重要因?yàn)槿硕鷮︻l率的感知近似對數(shù)關(guān)系指數(shù)變化聽感更自然。function playKick(time) { const osc audioCtx.createOscillator(); const gain audioCtx.createGain(); osc.type sine; osc.frequency.setValueAtTime(150, time); osc.frequency.exponentialRampToValueAtTime(50, time 0.1); gain.gain.setValueAtTime(1, time); gain.gain.exponentialRampToValueAtTime(0.001, time 0.2); osc.connect(gain); gain.connect(masterGain); osc.start(time); osc.stop(time 0.22); }exponentialRampToValueAtTime不能從 0 開始所以起始值要設(shè)為正數(shù)。停止時(shí)間比包絡(luò)結(jié)束時(shí)間略長保證尾音不會(huì)被硬生生切斷。time參數(shù)來自調(diào)度器不是立即播放。所有聲音函數(shù)都要接收一個(gè)time參數(shù)并在該時(shí)間點(diǎn)安排聲音事件。這一點(diǎn)是 Web Audio 程序與普通播放器最大的區(qū)別。3.2 Snare噪聲源配合帶通濾波軍鼓的聽感比底鼓復(fù)雜通常由“噪聲爆破”和一個(gè)帶通頻率的“鼓身共鳴”組成。噪聲部分使用一個(gè)預(yù)先創(chuàng)建的AudioBuffer填充隨機(jī)數(shù)。共鳴部分可以用一個(gè)振蕩器但為了減小代碼量這里主要用濾波噪聲實(shí)現(xiàn)。function createNoiseBuffer() { const length audioCtx.sampleRate * 1; const buffer audioCtx.createBuffer(1, length, audioCtx.sampleRate); const data buffer.getChannelData(0); for (let i 0; i length; i) { data[i] Math.random() * 2 - 1; } return buffer; }軍鼓播放函數(shù)function playSnare(time) { const noise audioCtx.createBufferSource(); noise.buffer noiseBuffer; noise.loop true; const filter audioCtx.createBiquadFilter(); filter.type bandpass; filter.frequency.setValueAtTime(1800, time); filter.frequency.exponentialRampToValueAtTime(800, time 0.08); const gain audioCtx.createGain(); gain.gain.setValueAtTime(0.7, time); gain.gain.exponentialRampToValueAtTime(0.001, time 0.12); noise.connect(filter); filter.connect(gain); gain.connect(masterGain); noise.start(time); noise.stop(time 0.15); }noiseBuffer是全局創(chuàng)建一次還是每次都不一樣影響音色一致性。如果每次在函數(shù)里調(diào)用Math.random()生成隨機(jī)噪聲軍鼓會(huì)帶有不穩(wěn)定的沙沙感。實(shí)際項(xiàng)目中創(chuàng)建一次噪聲 Buffer播放同一個(gè) Buffer 會(huì)更穩(wěn)定。3.3 Hihat高通濾波與短時(shí)噪聲踩镲是高頻噪聲。實(shí)現(xiàn)上比軍鼓更簡單噪聲源加高通濾波器包絡(luò)時(shí)間更短。function playHihat(time) { const noise audioCtx.createBufferSource(); noise.buffer noiseBuffer; noise.loop true; const filter audioCtx.createBiquadFilter(); filter.type highpass; filter.frequency.value 7000; const gain audioCtx.createGain(); gain.gain.setValueAtTime(0.5, time); gain.gain.exponentialRampToValueAtTime(0.001, time 0.04); noise.connect(filter); filter.connect(gain); gain.connect(masterGain); noise.start(time); noise.stop(time 0.05); }這里最核心的參數(shù)是0.04秒的衰減時(shí)間。踩镲的延音越短節(jié)奏感越清晰?？梢约右粋€(gè)控件讓用戶調(diào)整這個(gè)值但要注意過小的值可能導(dǎo)致 click 聲因?yàn)檎穹j(luò)從 0.5 到 0.001 的下降過程太短。3.4 為什么包絡(luò)要使用指數(shù)變化而非直接賦值如果代碼寫成gain.gain.value 0.001聲音會(huì)瞬間從 1 掉到 0.001產(chǎn)生可聽見的爆破聲。正確做法是使用setValueAtTime和exponentialRampToValueAtTime讓增益在一段時(shí)間內(nèi)平滑變化。在 Web Audio API 中setValueAtTime相當(dāng)于在時(shí)間軸上放一個(gè)錨點(diǎn)exponentialRampToValueAtTime從錨點(diǎn)值開始指數(shù)過渡到目標(biāo)值。指數(shù)曲線更接近真實(shí)樂器的自然衰減而且不會(huì)出現(xiàn)線性變化里那種“突然結(jié)束”的聽感。同樣的道理也可以應(yīng)用到濾波器頻率、振蕩器頻率上。底鼓要做出“下滑”效果用的就是頻率包絡(luò)。理解包絡(luò)是合成鼓聲的重要分水嶺。4. 實(shí)現(xiàn)lookahead步進(jìn)調(diào)度器與16步網(wǎng)格4.1 音序狀態(tài)與步進(jìn)數(shù)據(jù)結(jié)構(gòu)音序器的核心數(shù)據(jù)結(jié)構(gòu)是 track 數(shù)組。每條 track 包含名稱、16 個(gè) 0/1 狀態(tài)、以及對應(yīng)的聲音播放函數(shù)。const stepsPerBar 16; const tracks [ { name: Kick, steps: [1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0], sound: playKick }, { name: Snare, steps: [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], sound: playSnare }, { name: Hihat, steps: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], sound: playHihat } ]; let currentStep 0; let nextNoteTime 0; let timerId null; let isPlaying false;播放狀態(tài)只用三個(gè)變量當(dāng)前步進(jìn)序號(hào)、下一個(gè)音符的絕對時(shí)間、定時(shí)器 ID。不要在播放過程中重建整個(gè) audioCtx。4.2 lookahead調(diào)度器的核心循環(huán)調(diào)度器每隔 25ms 運(yùn)行一次。每次運(yùn)行時(shí)不斷把未來 0.1 秒內(nèi)需要播放的事件安排進(jìn)音頻時(shí)鐘。const lookaheadMs 25; const scheduleAheadTime 0.1; function startSequencer() { if (isPlaying) return; isPlaying true; const secondsPerBeat 60 / bpm; nextNoteTime audioCtx.currentTime 0.05; currentStep 0; timerId setInterval(scheduler, lookaheadMs); } function scheduler() { while (nextNoteTime audioCtx.currentTime scheduleAheadTime) { scheduleStep(currentStep, nextNoteTime); advanceStep(); } } function scheduleStep(step, time) { tracks.forEach((track) { if (track.steps[step]) { track.sound(time); } }); } function advanceStep() { const secondsPerBeat 60 / bpm; const secondsPerStep secondsPerBeat / 4; nextNoteTime secondsPerStep; currentStep (currentStep 1) % stepsPerBar; }這段代碼的關(guān)鍵在于while循環(huán)。假設(shè)setInterval延遲了 30ms但上一輪已經(jīng)安排了未來 0.1 秒內(nèi)的事件那么音頻不會(huì)斷。即使當(dāng)前回調(diào)發(fā)生延遲audioCtx.currentTime也不會(huì)后退已經(jīng)在時(shí)間軸上安排好的聲音會(huì)照常播放。注意secondsPerStep用secondsPerBeat / 4表示一個(gè) 16 分音符。如果 BPM 是 90每拍 0.667 秒每個(gè) 16 分音符約 0.167 秒。這個(gè)時(shí)間單位在調(diào)度器內(nèi)部累積不能用Date.now()來算節(jié)奏否則會(huì)受到系統(tǒng)時(shí)鐘和主線程忙閑的影響。4.3 步進(jìn)網(wǎng)格的DOM渲染與交互網(wǎng)格 DOM 可以由 JS 動(dòng)態(tài)生成。每一列對應(yīng)一個(gè) step每一行對應(yīng)一個(gè) track。為了保證點(diǎn)擊順序正確外層容器按 row 排列每個(gè) row 是一行按鈕。const stepGrid document.getElementById(stepGrid); tracks.forEach((track, trackIndex) { const row document.createElement(div); row.className step-row; track.steps.forEach((active, stepIndex) { const cell document.createElement(button); cell.dataset.track trackIndex; cell.dataset.step stepIndex; cell.classList.toggle(active, active 1); cell.addEventListener(click, () { track.steps[stepIndex] track.steps[stepIndex] ? 0 : 1; cell.classList.toggle(active); }); row.appendChild(cell); }); stepGrid.appendChild(row); });注意這樣實(shí)現(xiàn)的數(shù)據(jù)流是單向的按鈕負(fù)責(zé)更新數(shù)組數(shù)組是權(quán)威數(shù)據(jù)源。調(diào)度器讀數(shù)組決定是否播放聲音視覺狀態(tài)由數(shù)組變化驅(qū)動(dòng)。不要在點(diǎn)擊按鈕時(shí)直接播放聲音否則會(huì)出現(xiàn)“雙擊調(diào)音色”和“播放時(shí)編輯沖突”的問題。當(dāng)前播放位置的可視化可以在scheduler中更新一個(gè)currentStep指示器。最簡單的方法是在每次調(diào)度后把上一列的 active 指示移除給當(dāng)前列添加playing類。由于視覺更新不需要音頻級精度直接在scheduler回調(diào)里做是可以接受的。4.4 BPM、Swing和樣本輸出的參數(shù)設(shè)計(jì)BPM 雖然可以在調(diào)度器運(yùn)行時(shí)動(dòng)態(tài)讀取bpmSlider.value但要注意音符間隔是不斷累積的。如果用戶把 BPM 從 90 拉高到 150已經(jīng)排隊(duì)的聲音不會(huì)立即改變必須等待下一個(gè)音符時(shí)間更新。這種處理在實(shí)時(shí)演出中可以接受但如果你希望 BPM 變化立即生效需要停機(jī)重置nextNoteTime和currentStep。Swing 是鼓機(jī)中常見的節(jié)奏擺動(dòng)效果。實(shí)現(xiàn)上可以把偶數(shù)步或者每兩個(gè)步進(jìn)的第二半延后一定比例比如 60% 的位置。簡單做法是每次advanceStep時(shí)根據(jù) stepIndex 判斷是否加上偏移量function advanceStep() { const secondsPerBeat 60 / bpm; const secondsPerStep secondsPerBeat / 4; const swingOffset currentStep % 2 1 ? secondsPerStep * swingAmount : 0; nextNoteTime secondsPerStep swingOffset; currentStep (currentStep 1) % stepsPerBar; }swingAmount范圍通常取 -0.1 到 0.1表示最長偏移不超過一個(gè) 16 分音符的 10%。這個(gè)功能會(huì)讓音序器更接近真實(shí)鼓機(jī)的操作習(xí)慣。BPM、Swing 和音量都屬于“實(shí)時(shí)可調(diào)參數(shù)”。在實(shí)現(xiàn)時(shí)最好把所有參數(shù)集中到配置對象里統(tǒng)一從界面讀取避免散落在不同函數(shù)中。5. 運(yùn)行驗(yàn)證、性能觀察與生產(chǎn)環(huán)境差異5.1 啟動(dòng)本地服務(wù)并完成基本驗(yàn)證在項(xiàng)目目錄下啟動(dòng)一個(gè)本地靜態(tài)服務(wù)npx http-server .瀏覽器打開http://localhost:8080點(diǎn)擊 Play 按鈕。第一次點(diǎn)擊時(shí)必須能聽到聲音同時(shí) 16 步網(wǎng)格中應(yīng)該能看到當(dāng)前步進(jìn)的高亮移動(dòng)。驗(yàn)證清單驗(yàn)證點(diǎn)操作預(yù)期結(jié)果首次點(diǎn)擊點(diǎn)擊 Play立即聽到底鼓、軍鼓、踩镲循環(huán)音量控制調(diào)整masterGain.gain.value音量平滑變化BPM 調(diào)節(jié)拖動(dòng) BPM 滑桿節(jié)奏快慢變化無爆音步進(jìn)開關(guān)點(diǎn)擊任一格對應(yīng)聲音出現(xiàn)或消失暫停/恢復(fù)再次點(diǎn)擊 Play從當(dāng)前步繼續(xù)播放不重頭開始這里暫停按鈕如果復(fù)用 Play 按鈕需要注意狀態(tài)機(jī)。推薦使用獨(dú)立狀態(tài)stopSequencer()時(shí)將isPlaying置 false清除timerId。5.2 用時(shí)間戳日志驗(yàn)證調(diào)度偏差音頻調(diào)度是否準(zhǔn)確可以在scheduleStep中記錄當(dāng)前audioCtx.currentTime和nextNoteTime的差值function scheduleStep(step, time) { const drift Math.abs(time - audioCtx.currentTime); if (drift 0.005) { console.warn(Schedule drift:, drift, step:, step); } // 實(shí)際觸發(fā)聲音 }這個(gè)日志只能說明當(dāng)前安排時(shí)間與音頻時(shí)鐘的偏差。如果偏差小于 5ms基本正常。正常情況下lookahead 可以保證偏差很小。如果經(jīng)常出現(xiàn)大于 50ms 的情況說明定時(shí)器被嚴(yán)重阻塞或scheduleAheadTime設(shè)得過小。5.3 性能觀察與移動(dòng)端注意點(diǎn)調(diào)度器每 25ms 運(yùn)行一次也就是每秒約 40 次。事件處理本身很輕但如果在scheduler里做了太多 DOM 操作比如每個(gè) step 都創(chuàng)建新 DOM 節(jié)點(diǎn)頁面會(huì)明顯卡頓。移動(dòng)端瀏覽器對 AudioContext 的限制更嚴(yán)格。除了要求用戶手勢觸發(fā)外部分瀏覽器在鎖屏或切換到后臺(tái)時(shí)會(huì)暫停音頻。即使代碼正確也建議在頁面visibilitychange事件中暫停調(diào)度器避免回來時(shí)音符錯(cuò)亂。document.addEventListener(visibilitychange, () { if (document.hidden isPlaying) { stopSequencer(); } });從生產(chǎn)環(huán)境角度看還需要考慮音頻上下文被系統(tǒng)打斷的情況比如來電?？梢员O(jiān)聽interrupted事件但該事件在不同瀏覽器中支持度不一因此實(shí)際項(xiàng)目要結(jié)合平臺(tái)行為做降級處理。5.4 學(xué)習(xí)環(huán)境與生產(chǎn)環(huán)境的差異學(xué)習(xí)階段使用原生 JS 和單 HTML 文件便于理解。生產(chǎn)級音序器則需要考慮關(guān)注點(diǎn)學(xué)習(xí)環(huán)境做法生產(chǎn)環(huán)境建議模塊組織一個(gè)app.js使用 ES Module 拆分 Scheduler、Synth、UI狀態(tài)管理全局變量可觀察對象或狀態(tài)庫避免 UI 與狀態(tài)不同步音量保護(hù)固定 0.8加入壓縮器控制峰值移動(dòng)端體驗(yàn)桌面優(yōu)先調(diào)整觸控事件、防誤觸、響應(yīng)式布局離線能力無考慮 PWA緩存靜態(tài)資源測試手動(dòng)驗(yàn)證對調(diào)度器和步進(jìn)狀態(tài)寫自動(dòng)化測試如果計(jì)劃做成在線工具建議把 scheduler 和 synth 拆成獨(dú)立模塊。調(diào)度器只負(fù)責(zé)發(fā)送“什么時(shí)間播放哪個(gè)聲音”的事件合成器只負(fù)責(zé)生成聲音UI 只負(fù)責(zé)讀寫狀態(tài)。這樣無論是接 MIDI 輸入還是擴(kuò)展采樣器都不必重寫底層。6. 常見故障排查沒聲音、爆音、節(jié)奏漂移6.1 點(diǎn)擊播放后沒有聲音在開發(fā)這類項(xiàng)目時(shí)沒聲音是最常見的問題。先按以下順序檢查是否調(diào)用了initAudio()并完成resume()。如果audioCtx.state suspended所有聲音都不會(huì)輸出。是否在用戶手勢事件中處理音頻。如果不是在點(diǎn)擊事件里創(chuàng)建AudioContext瀏覽器會(huì)拒絕播放。是否設(shè)置了音量為零。masterGain.gain.value 0不會(huì)報(bào)錯(cuò)但也不會(huì)有聲音。是否連接了masterGain到audioCtx.destination。缺失連接是新手常見疏漏。瀏覽器控制臺(tái)是否有報(bào)錯(cuò)。比如AudioContext was not allowed to start會(huì)自動(dòng)提示原因。調(diào)試時(shí)可以添加狀態(tài)顯示console.log(audioCtx.state, audioCtx.currentTime);如果 state 是suspended把resume()放在 Play 按鈕回調(diào)的最前面。6.2 聲音出現(xiàn)爆音或失真爆音主要來源于增益瞬間跳變。代碼里如果直接用gain.gain.value 1然后立刻用gain.gain.value 0會(huì)產(chǎn)生直流跳變。應(yīng)該全部使用setValueAtTime加exponentialRampToValueAtTime或linearRampToValueAtTime。另一個(gè)常見原因是多個(gè)鼓聲同時(shí)觸發(fā)時(shí)所有聲音疊加超過 0dB。比如默認(rèn) 16 分音符的踩镲加上底鼓、軍鼓同時(shí)觸發(fā)峰值可能非常高。解決方案是加入DynamicsCompressorNodeconst compressor audioCtx.createDynamicsCompressor(); compressor.threshold.value -12; compressor.knee.value 20; compressor.ratio.value 12; compressor.attack.value 0.003; compressor.release.value 0.25; masterGain.connect(compressor); compressor.connect(audioCtx.destination);壓縮器不能替代正常的音量包絡(luò)它只是防止瞬時(shí)峰值過載。兩者配合使用聲音會(huì)更穩(wěn)定。6.3 節(jié)奏越來越不跟手如果 BPM 看起來正確但一段時(shí)間后節(jié)奏越來越慢或者某個(gè)聲音明顯偏移問題通常出在時(shí)間累積方式上。錯(cuò)誤寫法是在scheduler中每次用Date.now()計(jì)算間隔// 錯(cuò)誤示例 setInterval(() { playKick(); }, 60000 / bpm / 4);正確做法是維護(hù)一個(gè)絕對時(shí)間nextNoteTime每次advanceStep時(shí)累加secondsPerStep。這樣即使某一次回調(diào)延遲也不會(huì)改變后續(xù)音符的絕對時(shí)間。如果你在scheduleStep中觀察到 drift 持續(xù)增大還可以把scheduleAheadTime調(diào)大一些比如從 0.1 調(diào)到 0.2。6.4 排查順序速查表現(xiàn)象檢查項(xiàng)處理建議沒有聲音AudioContext 狀態(tài)在用戶手勢中調(diào)用resume()沒有聲音節(jié)點(diǎn)連接檢查gain.connect(masterGain)和masterGain.connect(destination)有爆音包絡(luò)是否平滑用setValueAtTimeexponentialRampToValueAtTime有爆音峰值過高增加壓縮器或降低音量節(jié)奏漂移是否使用audioCtx.currentTime改用 lookahead 調(diào)度后臺(tái)回來錯(cuò)亂定時(shí)器是否被抑制監(jiān)聽visibilitychange停止/恢復(fù)排查時(shí)不要憑感覺猜先在關(guān)鍵位置加日志確認(rèn)音頻上下文狀態(tài)、連接路徑和調(diào)度時(shí)間三個(gè)點(diǎn)再逐步縮小范圍。7. 最佳實(shí)踐、擴(kuò)展方向與練習(xí)建議7.1 Web音序器最佳實(shí)踐清單這個(gè)項(xiàng)目用到的思路可以作為以后做瀏覽器音樂應(yīng)用的基礎(chǔ)清單音頻上下文全局只創(chuàng)建一次不要每次播放都new AudioContext()。所有聲音播放函數(shù)都接收time參數(shù)不要在函數(shù)內(nèi)部用now()獲取時(shí)間。聲音調(diào)度必須有前瞻量不能依賴setInterval的精確性。音量包絡(luò)避免數(shù)值突變。噪聲 Buffer 創(chuàng)建一次后復(fù)用不要每次播放都生成。將所有可調(diào)參數(shù)集中在配置對象中方便 UI 綁定。播放狀態(tài)和步進(jìn)數(shù)據(jù)獨(dú)立維護(hù)UI 只做展示和交互。在生產(chǎn)環(huán)境加入壓縮器和錯(cuò)誤日志。這些清單解決的是“程序能跑但能不能長期用”的問題。如果只是課堂作業(yè)可能不需要全部做到但如果想把項(xiàng)目發(fā)布成真正可用的工具這些就是底線。7.2 擴(kuò)展方向采樣器、多通道、導(dǎo)出與MIDI當(dāng)前實(shí)現(xiàn)是合成鼓聲。更真實(shí)的鼓機(jī)需要支持采樣器加載外部 WAV 文件把文件內(nèi)容變成AudioBuffer之后用AudioBufferSourceNode播放。這個(gè)改造不會(huì)改變調(diào)度器邏輯只需把track.sound替換成采樣播放函數(shù)。多通道指每個(gè)軌道有獨(dú)立的音量和效果器發(fā)送量。這需要把masterGain拆成每個(gè) track 一個(gè)GainNode再統(tǒng)一連接到 master。以后加混響、延時(shí)也可以掛到通道上。導(dǎo)出音頻是音序器工具的一個(gè)重要功能?？梢允褂肙fflineAudioContext在無播放狀態(tài)下快速渲染整個(gè)模式的音頻然后通過MediaRecorder或AudioBuffer轉(zhuǎn) WAV 導(dǎo)出。這個(gè)過程比較適合熟悉 Web Audio 后再深入。MIDI 支持可以面向外部鍵盤或控制器的輸入。Web MIDI API 允許瀏覽器訪問 MIDI 設(shè)備但需要用戶授權(quán)。擴(kuò)展時(shí)可以在調(diào)度器之外增加一個(gè)事件監(jiān)聽層把 MIDI Note On/Off 映射到步進(jìn)寫入或聲音觸發(fā)。7.3 對初學(xué)者的練習(xí)路徑如果第一次接觸 Web Audio不建議直接寫完整音序器?？梢园此牟絹砭毾葘懸粋€(gè)按鈕點(diǎn)擊后播放單個(gè)底鼓的頁面。加入第二個(gè)聲音把按鈕改成鍵盤觸發(fā)。做固定間隔的循環(huán)播放體會(huì) setInterval 的不足。依照本文思路實(shí)現(xiàn) lookahead 調(diào)度器。每一步都驗(yàn)證“聲音有沒有變化”“節(jié)奏是否穩(wěn)定”“用戶操作是否及時(shí)反饋”。練完這套路徑再去看采樣器、效果器、可視化波形會(huì)有更清晰的方向。鼓機(jī)/節(jié)拍音序器項(xiàng)目不只是一個(gè)前端玩具它把瀏覽器音頻引擎、實(shí)時(shí)系統(tǒng)調(diào)度和交互設(shè)計(jì)壓縮在一個(gè)可以獨(dú)立運(yùn)行的小項(xiàng)目中。真正理解 lookahead scheduling 和 Web Audio 時(shí)間模型之后再去開發(fā)更復(fù)雜的音樂編輯器或?qū)崟r(shí)演出工具會(huì)順暢很多。 基于Web Audio API的瀏覽器鼓機(jī)與lookahead調(diào)度器實(shí)現(xiàn)
基于瀏覽器的鼓機(jī)/節(jié)拍音序器是 Web Audio API 學(xué)習(xí)路徑中訓(xùn)練價(jià)值很高的項(xiàng)目之一。它沒有后端依賴卻同時(shí)涉及實(shí)時(shí)音頻調(diào)度、聲音合成、步進(jìn)網(wǎng)格交互、視覺反饋和性能優(yōu)化多個(gè)層面。很多開發(fā)者一接觸到這類項(xiàng)目首先想到的是“播放一段采樣音頻”但真正把鼓機(jī)做成可用的工具核心難點(diǎn)其實(shí)在時(shí)鐘模型和交互響應(yīng)上。下面從零開始實(shí)現(xiàn)一個(gè)可以直接在瀏覽器里運(yùn)行的鼓點(diǎn)/節(jié)拍音序器代碼盡量保持最小閉環(huán)但工程結(jié)構(gòu)會(huì)按可擴(kuò)展的方式來組織。整個(gè)項(xiàng)目會(huì)完成三部分能力用 Web Audio API 合成 Kick、Snare、Hihat 三種基礎(chǔ)鼓聲用 lookahead 調(diào)度器驅(qū)動(dòng) 16 步循環(huán)提供可點(diǎn)擊的步進(jìn)網(wǎng)格和 BPM、Swing 控制。文章末尾會(huì)給出常見故障排查表和生產(chǎn)環(huán)境注意點(diǎn)方便你在自己的項(xiàng)目中繼續(xù)擴(kuò)展。1. 先理解Web鼓機(jī)/節(jié)拍音序器的三個(gè)技術(shù)底座1.1 鼓機(jī)音序器到底在做什么鼓機(jī)音序器通常由一條條橫向的軌道組成每條軌道對應(yīng)一種鼓聲比如底鼓、軍鼓、踩镲。縱向把一個(gè)小節(jié)平均切成若干份最常用的是 16 份也就是 16 分音符。用戶在每個(gè)格子上決定“這個(gè)位置是否觸發(fā)聲音”形成一個(gè)循環(huán)模式。播放引擎按固定 BPM 從第一格走到最后一格遇到被激活的格子就觸發(fā)對應(yīng)聲音。這個(gè)機(jī)制聽起來簡單但落地時(shí)有一個(gè)容易被忽略的問題聲音的觸發(fā)不能依賴系統(tǒng)的 setInterval 或 setTimeout 精確計(jì)時(shí)。瀏覽器主線程上的定時(shí)器會(huì)受到頁面渲染、事件回調(diào)、垃圾回收影響在復(fù)雜頁面里偏差可能達(dá)到幾十毫秒甚至更多。對于旋律性音序器幾十毫秒的偏差已經(jīng)能被耳朵明顯察覺。因此鼓機(jī)項(xiàng)目首先要建立正確的音頻時(shí)鐘模型。1.2 Web Audio API為什么用合成音比音頻文件更可控Web 音序器要發(fā)聲有兩種做法。第一種是加載采樣文件用 AudioBufferSourceNode 播放錄音第二種是用 OscillatorNode、噪聲緩沖區(qū)和 GainNode 現(xiàn)場合成出鼓聲。采樣方案音色真實(shí)但文件加載、跨域、內(nèi)存占用和波形編輯會(huì)增加復(fù)雜度。合成方案在代碼層面更容易控制頻率、時(shí)值和音量包絡(luò)也更容易做出參數(shù)化調(diào)整。對于學(xué)習(xí) Web Audio API 的人來說合成鼓聲是更好的練習(xí)起點(diǎn)。合成鼓聲的核心思路是每種鼓聲本質(zhì)上是一段能量快速衰減的音頻信號(hào)。底鼓是一個(gè)從高到低快速掃頻的低頻振蕩器軍鼓是噪聲疊加一個(gè)帶通濾波的共鳴聲踩镲是高通濾波后的短噪聲。把這些聲音拆成振蕩器、噪聲源和濾波器的組合代碼結(jié)構(gòu)就非常清晰了。1.3 時(shí)序模型為什么不能用setInterval直接播放聲音初學(xué)者最自然的做法是setInterval(() { playKick(); steps.forEach((active, index) { if (active index currentStep) playSound(); }); }, intervalMs);這段代碼的問題在于setInterval 的回調(diào)時(shí)間不精確。瀏覽器在標(biāo)簽頁切到后臺(tái)時(shí)會(huì)降低定時(shí)器頻率主線程一旦被長任務(wù)占用回調(diào)會(huì)堆積或延遲。更關(guān)鍵的是聲音播放用的是audioCtx.currentTime這是一個(gè)獨(dú)立于頁面主線程的高精度音頻時(shí)鐘。正確做法是“提前安排”也就是 lookahead scheduling每隔幾十毫秒檢查一次未來 100 毫秒左右需要播放哪些聲音用audioCtx.currentTime計(jì)算精確的觸發(fā)時(shí)間把播放事件安排到時(shí)間軸上。這樣即使主線程在某個(gè)時(shí)刻發(fā)生了延遲只要提前安排過音頻引擎依然會(huì)在正確的時(shí)間點(diǎn)發(fā)聲。下面所有代碼都會(huì)圍繞這個(gè)模型展開。2. 環(huán)境準(zhǔn)備與最小項(xiàng)目骨架先讓瀏覽器出聲2.1 開發(fā)環(huán)境要求這個(gè)項(xiàng)目不依賴構(gòu)建工具直接使用瀏覽器原生模塊和 Web Audio API。建議環(huán)境如下項(xiàng)目推薦配置說明瀏覽器Chrome / Edge / Firefox 最新版各瀏覽器對 AudioContext 支持已基本一致開發(fā)服務(wù)本地靜態(tài)服務(wù)器或 VS Code Live Serverfile:// 協(xié)議下模塊加載有限制Node.js可選僅用于啟動(dòng) http-server不安裝也不影響閱讀編輯器VS Code 或任意代碼編輯器無強(qiáng)制要求如果你的瀏覽器比較舊需要關(guān)注AudioContext是否為webkitAudioContext?，F(xiàn)代瀏覽器可以直接使用標(biāo)準(zhǔn)名稱但為了兼容可以加一行兜底。2.2 項(xiàng)目結(jié)構(gòu)與頁面骨架先建立如下目錄結(jié)構(gòu)drum-sequencer/ ├── index.html ├── styles.css └── app.js這是最簡結(jié)構(gòu)適合獨(dú)立運(yùn)行。后面如果項(xiàng)目變大可以考慮 Vite TypeScript但學(xué)習(xí)階段先保持文件少邏輯更容易跟蹤。index.html負(fù)責(zé)頁面結(jié)構(gòu)一組 BPM 控制、播放按鈕、清空按鈕以及一個(gè)用于展示 16 步網(wǎng)格的容器。網(wǎng)格先不寫死由 JavaScript 根據(jù)軌道數(shù)據(jù)動(dòng)態(tài)生成。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleWeb Drum Sequencer/title link relstylesheet hrefstyles.css / /head body div classapp div classtoolbar button idplayButtonPlay/button labelBPM input idbpmSlider typerange min60 max180 value90 //label span idbpmValue90/span button idclearButtonClear/button /div div idstepGrid classstep-grid/div /div script srcapp.js/script /body /html注意播放按鈕的類型是button默認(rèn)行為不會(huì)提交表單避免刷新頁面。BPM 使用 range 控件雖然精度有限但交互直觀適合手動(dòng)調(diào)試。2.3 初始化AudioContext并解決瀏覽器自動(dòng)播放策略瀏覽器不允許頁面加載后直接播放音頻必須在用戶手勢事件中創(chuàng)建或恢復(fù) AudioContext。這個(gè)限制是為了防止網(wǎng)頁突然發(fā)聲。所以初始化邏輯要放到按鈕點(diǎn)擊事件里。let audioCtx null; let masterGain null; async function initAudio() { if (!audioCtx) { const Context window.AudioContext || window.webkitAudioContext; audioCtx new Context(); masterGain audioCtx.createGain(); masterGain.gain.value 0.8; masterGain.connect(audioCtx.destination); } if (audioCtx.state suspended) { await audioCtx.resume(); } }這里有兩個(gè)關(guān)鍵點(diǎn)。第一audioCtx全局只創(chuàng)建一次避免重復(fù)創(chuàng)建多個(gè)音頻上下文。第二masterGain作為主音量總線所有鼓聲都連接到這個(gè)節(jié)點(diǎn)上后續(xù)加壓縮器、限制器也更方便。在點(diǎn)擊播放按鈕時(shí)先調(diào)用await initAudio()再啟動(dòng)調(diào)度器。這樣能保證用戶手勢觸發(fā)時(shí)音頻上下文處于運(yùn)行狀態(tài)。2.4 主音量與音頻總線系統(tǒng)中的音頻信號(hào)流大概是振蕩器/噪聲源 - 濾波/增益節(jié)點(diǎn) - masterGain - audioCtx.destinationdestination是瀏覽器音頻輸出設(shè)備。中間加一層masterGain是為了統(tǒng)一控制總音量并為后續(xù)加效果器留下插入點(diǎn)。比如你可以在這里插入一個(gè)DynamicsCompressorNode防止多個(gè)鼓聲同時(shí)觸發(fā)時(shí)聲音過載。在合成鼓聲的代碼里每個(gè)聲音內(nèi)部有自己的音量包絡(luò)節(jié)點(diǎn)最終連接到masterGain。這樣不同聲音之間不會(huì)互相修改對方的增益音頻總線保持干凈。3. 用Web Audio API合成三款基礎(chǔ)鼓聲3.1 Kick頻率包絡(luò)才是低鼓的靈魂底鼓的聽感來自頻率快速下落和振幅快速衰減。實(shí)現(xiàn)上使用一個(gè)OscillatorNode波形選正弦波頻率從 150Hz 左右指數(shù)下降到 50Hz 左右。這里的指數(shù)下降很重要因?yàn)槿硕鷮︻l率的感知近似對數(shù)關(guān)系指數(shù)變化聽感更自然。function playKick(time) { const osc audioCtx.createOscillator(); const gain audioCtx.createGain(); osc.type sine; osc.frequency.setValueAtTime(150, time); osc.frequency.exponentialRampToValueAtTime(50, time 0.1); gain.gain.setValueAtTime(1, time); gain.gain.exponentialRampToValueAtTime(0.001, time 0.2); osc.connect(gain); gain.connect(masterGain); osc.start(time); osc.stop(time 0.22); }exponentialRampToValueAtTime不能從 0 開始所以起始值要設(shè)為正數(shù)。停止時(shí)間比包絡(luò)結(jié)束時(shí)間略長保證尾音不會(huì)被硬生生切斷。time參數(shù)來自調(diào)度器不是立即播放。所有聲音函數(shù)都要接收一個(gè)time參數(shù)并在該時(shí)間點(diǎn)安排聲音事件。這一點(diǎn)是 Web Audio 程序與普通播放器最大的區(qū)別。3.2 Snare噪聲源配合帶通濾波軍鼓的聽感比底鼓復(fù)雜通常由“噪聲爆破”和一個(gè)帶通頻率的“鼓身共鳴”組成。噪聲部分使用一個(gè)預(yù)先創(chuàng)建的AudioBuffer填充隨機(jī)數(shù)。共鳴部分可以用一個(gè)振蕩器但為了減小代碼量這里主要用濾波噪聲實(shí)現(xiàn)。function createNoiseBuffer() { const length audioCtx.sampleRate * 1; const buffer audioCtx.createBuffer(1, length, audioCtx.sampleRate); const data buffer.getChannelData(0); for (let i 0; i length; i) { data[i] Math.random() * 2 - 1; } return buffer; }軍鼓播放函數(shù)function playSnare(time) { const noise audioCtx.createBufferSource(); noise.buffer noiseBuffer; noise.loop true; const filter audioCtx.createBiquadFilter(); filter.type bandpass; filter.frequency.setValueAtTime(1800, time); filter.frequency.exponentialRampToValueAtTime(800, time 0.08); const gain audioCtx.createGain(); gain.gain.setValueAtTime(0.7, time); gain.gain.exponentialRampToValueAtTime(0.001, time 0.12); noise.connect(filter); filter.connect(gain); gain.connect(masterGain); noise.start(time); noise.stop(time 0.15); }noiseBuffer是全局創(chuàng)建一次還是每次都不一樣影響音色一致性。如果每次在函數(shù)里調(diào)用Math.random()生成隨機(jī)噪聲軍鼓會(huì)帶有不穩(wěn)定的沙沙感。實(shí)際項(xiàng)目中創(chuàng)建一次噪聲 Buffer播放同一個(gè) Buffer 會(huì)更穩(wěn)定。3.3 Hihat高通濾波與短時(shí)噪聲踩镲是高頻噪聲。實(shí)現(xiàn)上比軍鼓更簡單噪聲源加高通濾波器包絡(luò)時(shí)間更短。function playHihat(time) { const noise audioCtx.createBufferSource(); noise.buffer noiseBuffer; noise.loop true; const filter audioCtx.createBiquadFilter(); filter.type highpass; filter.frequency.value 7000; const gain audioCtx.createGain(); gain.gain.setValueAtTime(0.5, time); gain.gain.exponentialRampToValueAtTime(0.001, time 0.04); noise.connect(filter); filter.connect(gain); gain.connect(masterGain); noise.start(time); noise.stop(time 0.05); }這里最核心的參數(shù)是0.04秒的衰減時(shí)間。踩镲的延音越短節(jié)奏感越清晰?？梢约右粋€(gè)控件讓用戶調(diào)整這個(gè)值但要注意過小的值可能導(dǎo)致 click 聲因?yàn)檎穹j(luò)從 0.5 到 0.001 的下降過程太短。3.4 為什么包絡(luò)要使用指數(shù)變化而非直接賦值如果代碼寫成gain.gain.value 0.001聲音會(huì)瞬間從 1 掉到 0.001產(chǎn)生可聽見的爆破聲。正確做法是使用setValueAtTime和exponentialRampToValueAtTime讓增益在一段時(shí)間內(nèi)平滑變化。在 Web Audio API 中setValueAtTime相當(dāng)于在時(shí)間軸上放一個(gè)錨點(diǎn)exponentialRampToValueAtTime從錨點(diǎn)值開始指數(shù)過渡到目標(biāo)值。指數(shù)曲線更接近真實(shí)樂器的自然衰減而且不會(huì)出現(xiàn)線性變化里那種“突然結(jié)束”的聽感。同樣的道理也可以應(yīng)用到濾波器頻率、振蕩器頻率上。底鼓要做出“下滑”效果用的就是頻率包絡(luò)。理解包絡(luò)是合成鼓聲的重要分水嶺。4. 實(shí)現(xiàn)lookahead步進(jìn)調(diào)度器與16步網(wǎng)格4.1 音序狀態(tài)與步進(jìn)數(shù)據(jù)結(jié)構(gòu)音序器的核心數(shù)據(jù)結(jié)構(gòu)是 track 數(shù)組。每條 track 包含名稱、16 個(gè) 0/1 狀態(tài)、以及對應(yīng)的聲音播放函數(shù)。const stepsPerBar 16; const tracks [ { name: Kick, steps: [1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0], sound: playKick }, { name: Snare, steps: [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], sound: playSnare }, { name: Hihat, steps: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], sound: playHihat } ]; let currentStep 0; let nextNoteTime 0; let timerId null; let isPlaying false;播放狀態(tài)只用三個(gè)變量當(dāng)前步進(jìn)序號(hào)、下一個(gè)音符的絕對時(shí)間、定時(shí)器 ID。不要在播放過程中重建整個(gè) audioCtx。4.2 lookahead調(diào)度器的核心循環(huán)調(diào)度器每隔 25ms 運(yùn)行一次。每次運(yùn)行時(shí)不斷把未來 0.1 秒內(nèi)需要播放的事件安排進(jìn)音頻時(shí)鐘。const lookaheadMs 25; const scheduleAheadTime 0.1; function startSequencer() { if (isPlaying) return; isPlaying true; const secondsPerBeat 60 / bpm; nextNoteTime audioCtx.currentTime 0.05; currentStep 0; timerId setInterval(scheduler, lookaheadMs); } function scheduler() { while (nextNoteTime audioCtx.currentTime scheduleAheadTime) { scheduleStep(currentStep, nextNoteTime); advanceStep(); } } function scheduleStep(step, time) { tracks.forEach((track) { if (track.steps[step]) { track.sound(time); } }); } function advanceStep() { const secondsPerBeat 60 / bpm; const secondsPerStep secondsPerBeat / 4; nextNoteTime secondsPerStep; currentStep (currentStep 1) % stepsPerBar; }這段代碼的關(guān)鍵在于while循環(huán)。假設(shè)setInterval延遲了 30ms但上一輪已經(jīng)安排了未來 0.1 秒內(nèi)的事件那么音頻不會(huì)斷。即使當(dāng)前回調(diào)發(fā)生延遲audioCtx.currentTime也不會(huì)后退已經(jīng)在時(shí)間軸上安排好的聲音會(huì)照常播放。注意secondsPerStep用secondsPerBeat / 4表示一個(gè) 16 分音符。如果 BPM 是 90每拍 0.667 秒每個(gè) 16 分音符約 0.167 秒。這個(gè)時(shí)間單位在調(diào)度器內(nèi)部累積不能用Date.now()來算節(jié)奏否則會(huì)受到系統(tǒng)時(shí)鐘和主線程忙閑的影響。4.3 步進(jìn)網(wǎng)格的DOM渲染與交互網(wǎng)格 DOM 可以由 JS 動(dòng)態(tài)生成。每一列對應(yīng)一個(gè) step每一行對應(yīng)一個(gè) track。為了保證點(diǎn)擊順序正確外層容器按 row 排列每個(gè) row 是一行按鈕。const stepGrid document.getElementById(stepGrid); tracks.forEach((track, trackIndex) { const row document.createElement(div); row.className step-row; track.steps.forEach((active, stepIndex) { const cell document.createElement(button); cell.dataset.track trackIndex; cell.dataset.step stepIndex; cell.classList.toggle(active, active 1); cell.addEventListener(click, () { track.steps[stepIndex] track.steps[stepIndex] ? 0 : 1; cell.classList.toggle(active); }); row.appendChild(cell); }); stepGrid.appendChild(row); });注意這樣實(shí)現(xiàn)的數(shù)據(jù)流是單向的按鈕負(fù)責(zé)更新數(shù)組數(shù)組是權(quán)威數(shù)據(jù)源。調(diào)度器讀數(shù)組決定是否播放聲音視覺狀態(tài)由數(shù)組變化驅(qū)動(dòng)。不要在點(diǎn)擊按鈕時(shí)直接播放聲音否則會(huì)出現(xiàn)“雙擊調(diào)音色”和“播放時(shí)編輯沖突”的問題。當(dāng)前播放位置的可視化可以在scheduler中更新一個(gè)currentStep指示器。最簡單的方法是在每次調(diào)度后把上一列的 active 指示移除給當(dāng)前列添加playing類。由于視覺更新不需要音頻級精度直接在scheduler回調(diào)里做是可以接受的。4.4 BPM、Swing和樣本輸出的參數(shù)設(shè)計(jì)BPM 雖然可以在調(diào)度器運(yùn)行時(shí)動(dòng)態(tài)讀取bpmSlider.value但要注意音符間隔是不斷累積的。如果用戶把 BPM 從 90 拉高到 150已經(jīng)排隊(duì)的聲音不會(huì)立即改變必須等待下一個(gè)音符時(shí)間更新。這種處理在實(shí)時(shí)演出中可以接受但如果你希望 BPM 變化立即生效需要停機(jī)重置nextNoteTime和currentStep。Swing 是鼓機(jī)中常見的節(jié)奏擺動(dòng)效果。實(shí)現(xiàn)上可以把偶數(shù)步或者每兩個(gè)步進(jìn)的第二半延后一定比例比如 60% 的位置。簡單做法是每次advanceStep時(shí)根據(jù) stepIndex 判斷是否加上偏移量function advanceStep() { const secondsPerBeat 60 / bpm; const secondsPerStep secondsPerBeat / 4; const swingOffset currentStep % 2 1 ? secondsPerStep * swingAmount : 0; nextNoteTime secondsPerStep swingOffset; currentStep (currentStep 1) % stepsPerBar; }swingAmount范圍通常取 -0.1 到 0.1表示最長偏移不超過一個(gè) 16 分音符的 10%。這個(gè)功能會(huì)讓音序器更接近真實(shí)鼓機(jī)的操作習(xí)慣。BPM、Swing 和音量都屬于“實(shí)時(shí)可調(diào)參數(shù)”。在實(shí)現(xiàn)時(shí)最好把所有參數(shù)集中到配置對象里統(tǒng)一從界面讀取避免散落在不同函數(shù)中。5. 運(yùn)行驗(yàn)證、性能觀察與生產(chǎn)環(huán)境差異5.1 啟動(dòng)本地服務(wù)并完成基本驗(yàn)證在項(xiàng)目目錄下啟動(dòng)一個(gè)本地靜態(tài)服務(wù)npx http-server .瀏覽器打開http://localhost:8080點(diǎn)擊 Play 按鈕。第一次點(diǎn)擊時(shí)必須能聽到聲音同時(shí) 16 步網(wǎng)格中應(yīng)該能看到當(dāng)前步進(jìn)的高亮移動(dòng)。驗(yàn)證清單驗(yàn)證點(diǎn)操作預(yù)期結(jié)果首次點(diǎn)擊點(diǎn)擊 Play立即聽到底鼓、軍鼓、踩镲循環(huán)音量控制調(diào)整masterGain.gain.value音量平滑變化BPM 調(diào)節(jié)拖動(dòng) BPM 滑桿節(jié)奏快慢變化無爆音步進(jìn)開關(guān)點(diǎn)擊任一格對應(yīng)聲音出現(xiàn)或消失暫停/恢復(fù)再次點(diǎn)擊 Play從當(dāng)前步繼續(xù)播放不重頭開始這里暫停按鈕如果復(fù)用 Play 按鈕需要注意狀態(tài)機(jī)。推薦使用獨(dú)立狀態(tài)stopSequencer()時(shí)將isPlaying置 false清除timerId。5.2 用時(shí)間戳日志驗(yàn)證調(diào)度偏差音頻調(diào)度是否準(zhǔn)確可以在scheduleStep中記錄當(dāng)前audioCtx.currentTime和nextNoteTime的差值function scheduleStep(step, time) { const drift Math.abs(time - audioCtx.currentTime); if (drift 0.005) { console.warn(Schedule drift:, drift, step:, step); } // 實(shí)際觸發(fā)聲音 }這個(gè)日志只能說明當(dāng)前安排時(shí)間與音頻時(shí)鐘的偏差。如果偏差小于 5ms基本正常。正常情況下lookahead 可以保證偏差很小。如果經(jīng)常出現(xiàn)大于 50ms 的情況說明定時(shí)器被嚴(yán)重阻塞或scheduleAheadTime設(shè)得過小。5.3 性能觀察與移動(dòng)端注意點(diǎn)調(diào)度器每 25ms 運(yùn)行一次也就是每秒約 40 次。事件處理本身很輕但如果在scheduler里做了太多 DOM 操作比如每個(gè) step 都創(chuàng)建新 DOM 節(jié)點(diǎn)頁面會(huì)明顯卡頓。移動(dòng)端瀏覽器對 AudioContext 的限制更嚴(yán)格。除了要求用戶手勢觸發(fā)外部分瀏覽器在鎖屏或切換到后臺(tái)時(shí)會(huì)暫停音頻。即使代碼正確也建議在頁面visibilitychange事件中暫停調(diào)度器避免回來時(shí)音符錯(cuò)亂。document.addEventListener(visibilitychange, () { if (document.hidden isPlaying) { stopSequencer(); } });從生產(chǎn)環(huán)境角度看還需要考慮音頻上下文被系統(tǒng)打斷的情況比如來電?？梢员O(jiān)聽interrupted事件但該事件在不同瀏覽器中支持度不一因此實(shí)際項(xiàng)目要結(jié)合平臺(tái)行為做降級處理。5.4 學(xué)習(xí)環(huán)境與生產(chǎn)環(huán)境的差異學(xué)習(xí)階段使用原生 JS 和單 HTML 文件便于理解。生產(chǎn)級音序器則需要考慮關(guān)注點(diǎn)學(xué)習(xí)環(huán)境做法生產(chǎn)環(huán)境建議模塊組織一個(gè)app.js使用 ES Module 拆分 Scheduler、Synth、UI狀態(tài)管理全局變量可觀察對象或狀態(tài)庫避免 UI 與狀態(tài)不同步音量保護(hù)固定 0.8加入壓縮器控制峰值移動(dòng)端體驗(yàn)桌面優(yōu)先調(diào)整觸控事件、防誤觸、響應(yīng)式布局離線能力無考慮 PWA緩存靜態(tài)資源測試手動(dòng)驗(yàn)證對調(diào)度器和步進(jìn)狀態(tài)寫自動(dòng)化測試如果計(jì)劃做成在線工具建議把 scheduler 和 synth 拆成獨(dú)立模塊。調(diào)度器只負(fù)責(zé)發(fā)送“什么時(shí)間播放哪個(gè)聲音”的事件合成器只負(fù)責(zé)生成聲音UI 只負(fù)責(zé)讀寫狀態(tài)。這樣無論是接 MIDI 輸入還是擴(kuò)展采樣器都不必重寫底層。6. 常見故障排查沒聲音、爆音、節(jié)奏漂移6.1 點(diǎn)擊播放后沒有聲音在開發(fā)這類項(xiàng)目時(shí)沒聲音是最常見的問題。先按以下順序檢查是否調(diào)用了initAudio()并完成resume()。如果audioCtx.state suspended所有聲音都不會(huì)輸出。是否在用戶手勢事件中處理音頻。如果不是在點(diǎn)擊事件里創(chuàng)建AudioContext瀏覽器會(huì)拒絕播放。是否設(shè)置了音量為零。masterGain.gain.value 0不會(huì)報(bào)錯(cuò)但也不會(huì)有聲音。是否連接了masterGain到audioCtx.destination。缺失連接是新手常見疏漏。瀏覽器控制臺(tái)是否有報(bào)錯(cuò)。比如AudioContext was not allowed to start會(huì)自動(dòng)提示原因。調(diào)試時(shí)可以添加狀態(tài)顯示console.log(audioCtx.state, audioCtx.currentTime);如果 state 是suspended把resume()放在 Play 按鈕回調(diào)的最前面。6.2 聲音出現(xiàn)爆音或失真爆音主要來源于增益瞬間跳變。代碼里如果直接用gain.gain.value 1然后立刻用gain.gain.value 0會(huì)產(chǎn)生直流跳變。應(yīng)該全部使用setValueAtTime加exponentialRampToValueAtTime或linearRampToValueAtTime。另一個(gè)常見原因是多個(gè)鼓聲同時(shí)觸發(fā)時(shí)所有聲音疊加超過 0dB。比如默認(rèn) 16 分音符的踩镲加上底鼓、軍鼓同時(shí)觸發(fā)峰值可能非常高。解決方案是加入DynamicsCompressorNodeconst compressor audioCtx.createDynamicsCompressor(); compressor.threshold.value -12; compressor.knee.value 20; compressor.ratio.value 12; compressor.attack.value 0.003; compressor.release.value 0.25; masterGain.connect(compressor); compressor.connect(audioCtx.destination);壓縮器不能替代正常的音量包絡(luò)它只是防止瞬時(shí)峰值過載。兩者配合使用聲音會(huì)更穩(wěn)定。6.3 節(jié)奏越來越不跟手如果 BPM 看起來正確但一段時(shí)間后節(jié)奏越來越慢或者某個(gè)聲音明顯偏移問題通常出在時(shí)間累積方式上。錯(cuò)誤寫法是在scheduler中每次用Date.now()計(jì)算間隔// 錯(cuò)誤示例 setInterval(() { playKick(); }, 60000 / bpm / 4);正確做法是維護(hù)一個(gè)絕對時(shí)間nextNoteTime每次advanceStep時(shí)累加secondsPerStep。這樣即使某一次回調(diào)延遲也不會(huì)改變后續(xù)音符的絕對時(shí)間。如果你在scheduleStep中觀察到 drift 持續(xù)增大還可以把scheduleAheadTime調(diào)大一些比如從 0.1 調(diào)到 0.2。6.4 排查順序速查表現(xiàn)象檢查項(xiàng)處理建議沒有聲音AudioContext 狀態(tài)在用戶手勢中調(diào)用resume()沒有聲音節(jié)點(diǎn)連接檢查gain.connect(masterGain)和masterGain.connect(destination)有爆音包絡(luò)是否平滑用setValueAtTimeexponentialRampToValueAtTime有爆音峰值過高增加壓縮器或降低音量節(jié)奏漂移是否使用audioCtx.currentTime改用 lookahead 調(diào)度后臺(tái)回來錯(cuò)亂定時(shí)器是否被抑制監(jiān)聽visibilitychange停止/恢復(fù)排查時(shí)不要憑感覺猜先在關(guān)鍵位置加日志確認(rèn)音頻上下文狀態(tài)、連接路徑和調(diào)度時(shí)間三個(gè)點(diǎn)再逐步縮小范圍。7. 最佳實(shí)踐、擴(kuò)展方向與練習(xí)建議7.1 Web音序器最佳實(shí)踐清單這個(gè)項(xiàng)目用到的思路可以作為以后做瀏覽器音樂應(yīng)用的基礎(chǔ)清單音頻上下文全局只創(chuàng)建一次不要每次播放都new AudioContext()。所有聲音播放函數(shù)都接收time參數(shù)不要在函數(shù)內(nèi)部用now()獲取時(shí)間。聲音調(diào)度必須有前瞻量不能依賴setInterval的精確性。音量包絡(luò)避免數(shù)值突變。噪聲 Buffer 創(chuàng)建一次后復(fù)用不要每次播放都生成。將所有可調(diào)參數(shù)集中在配置對象中方便 UI 綁定。播放狀態(tài)和步進(jìn)數(shù)據(jù)獨(dú)立維護(hù)UI 只做展示和交互。在生產(chǎn)環(huán)境加入壓縮器和錯(cuò)誤日志。這些清單解決的是“程序能跑但能不能長期用”的問題。如果只是課堂作業(yè)可能不需要全部做到但如果想把項(xiàng)目發(fā)布成真正可用的工具這些就是底線。7.2 擴(kuò)展方向采樣器、多通道、導(dǎo)出與MIDI當(dāng)前實(shí)現(xiàn)是合成鼓聲。更真實(shí)的鼓機(jī)需要支持采樣器加載外部 WAV 文件把文件內(nèi)容變成AudioBuffer之后用AudioBufferSourceNode播放。這個(gè)改造不會(huì)改變調(diào)度器邏輯只需把track.sound替換成采樣播放函數(shù)。多通道指每個(gè)軌道有獨(dú)立的音量和效果器發(fā)送量。這需要把masterGain拆成每個(gè) track 一個(gè)GainNode再統(tǒng)一連接到 master。以后加混響、延時(shí)也可以掛到通道上。導(dǎo)出音頻是音序器工具的一個(gè)重要功能?？梢允褂肙fflineAudioContext在無播放狀態(tài)下快速渲染整個(gè)模式的音頻然后通過MediaRecorder或AudioBuffer轉(zhuǎn) WAV 導(dǎo)出。這個(gè)過程比較適合熟悉 Web Audio 后再深入。MIDI 支持可以面向外部鍵盤或控制器的輸入。Web MIDI API 允許瀏覽器訪問 MIDI 設(shè)備但需要用戶授權(quán)。擴(kuò)展時(shí)可以在調(diào)度器之外增加一個(gè)事件監(jiān)聽層把 MIDI Note On/Off 映射到步進(jìn)寫入或聲音觸發(fā)。7.3 對初學(xué)者的練習(xí)路徑如果第一次接觸 Web Audio不建議直接寫完整音序器?？梢园此牟絹砭毾葘懸粋€(gè)按鈕點(diǎn)擊后播放單個(gè)底鼓的頁面。加入第二個(gè)聲音把按鈕改成鍵盤觸發(fā)。做固定間隔的循環(huán)播放體會(huì) setInterval 的不足。依照本文思路實(shí)現(xiàn) lookahead 調(diào)度器。每一步都驗(yàn)證“聲音有沒有變化”“節(jié)奏是否穩(wěn)定”“用戶操作是否及時(shí)反饋”。練完這套路徑再去看采樣器、效果器、可視化波形會(huì)有更清晰的方向。鼓機(jī)/節(jié)拍音序器項(xiàng)目不只是一個(gè)前端玩具它把瀏覽器音頻引擎、實(shí)時(shí)系統(tǒng)調(diào)度和交互設(shè)計(jì)壓縮在一個(gè)可以獨(dú)立運(yùn)行的小項(xiàng)目中。真正理解 lookahead scheduling 和 Web Audio 時(shí)間模型之后再去開發(fā)更復(fù)雜的音樂編輯器或?qū)崟r(shí)演出工具會(huì)順暢很多。