ブラウザ内でDAWを構築した方法。

スタック

• React + Viteフロントエンド
• Web Audio APIを音声グラフに使用
• AudioWorkletProcessorでカスタムDSP（メインスレッド外）
• WebAssemblyをパフォーマンスが重要なDSP（カスタムWASMビルド）に使用
• MessagePort + リングバッファを用いたUI ↔ ワークレット間通信
• YjsによるCRDTコラボレーション
• IndexedDBをプロジェクトの永続化およびサンプルのストレージに使用
• ハードウェアコントローラー入力用のWebMIDI
• OfflineAudioContextによるバウンス/エクスポート

1. オーディオグラフ

Soundbend のすべてのトラックは、次のようなチェーンを経由します：インストゥルメント → トラック FX チェーン → アクス送信 → ミキサー ストリップ → マスターバス → リミッター → 送信先。各矢印は Web Audio AudioNode 接続です。

Web Audioにより、AudioContext、GainNode、BiquadFilterNode、ConvolverNode、AnalyserNode、およびその他のノードを利用できます。これらはブラウザエンジン（V8/SpiderMonkey/JSC）によって最適化されています（すべて深く投資しています）。標準エフェクト（EQ、ゲインオートメーション、基本的なフィルタリング）には、ネイティブノードを使用します。これらは高速で信頼性が高くテストされています。

カスタムエフェクト — Airwindowsポート、サチュレーション、True-Peakリミッター — については、AudioWorkletProcessorに移行し、オーディオスレッド上で実行されます。リアルタイム優先度が保証され、非標準DSPには適切なアーキテクチャです。

class PurestDriveProcessor extends AudioWorkletProcessor {
  process(inputs, outputs) {
    const input = inputs[0];
    const output = outputs[0];
    // Airwindows PurestDrive port — ~30 LOC of saturation math
    for (let ch = 0; ch < input.length; ch++) {
      for (let i = 0; i < input[ch].length; i++) {
        const s = input[ch][i];
        // [...tape-saturation math...]
        output[ch][i] = processed;
      }
    }
    return true;
  }
}
registerProcessor('purest-drive', PurestDriveProcessor);

Workletsはpublic/audio-worklets/*.jsに含まれ、audioContext.audioWorklet.addModule(path)でロードされます。ロード後、グラフの任意の部分でAudioWorkletNodeをインスタンス化して処理を実行できます。処理はメインスレッドとは別に実行されるため、UIアニメーションが音声処理を妨げることはありません。

2. 5つのAirwindows Tier-1ポート

Chris Johnson's Airwindows は 2,500 以上のオーディオプラグインを MIT ライセンスで提供し、伝説的な味わいの DSP です。Soundbend の Wave 12 に搭載するために、5 つをブラウザ対応の AudioWorklets に移植しました：

• Pressure6 — 透明な圧縮が息を吹き返す
• ToTape9 — アナログテープの飽和モデル化
• PurestDrive — きめ細かな位相飽和で過激な高音を最小限に
• CreamCoat — 温もり + ハーモニックエキシター
• NotJustAnotherDither — ビット深度削減（マスタリング）用のTPDFディザリング

各ポートはAudioWorkletProcessorで約30～80 LOCの数学処理です。ポートはAirwindowsとビット単位で一致しません（C++とJSの数値エンジンでのFMA/デノーマル処理の違いによるものですが、音響的に一致しています。Nullテストにより、出力がゴールデンと比較して≤-80 dBFSの残差に抑えられるため、DSPの変更が検出されます。

3. トゥルーピークリミッター

現代のストリーミングプラットフォーム（Spotify、Apple Music、YouTube）は、ITU-R BS.1770-5に準拠した真ピークの音量正規化を強制しています。サンプルピークとインターサンプルピークは異なるものであり、信号がサンプル単位で-1 dBFSでピークしても、D/A変換後に0 dBFSを超える真ピークになる可能性があります。真ピークリミッターでない場合、DAコンバータでクリップが発生する可能性がありますが、DAWではクリーンと表示されます。

私たちのリミッターは完全なITU仕様を実装しています：4倍オーバーサンプリング、インターサンプルピーク検出、ラックアップ、ソフトニー解放。AudioWorklet形式でpublic/audio-worklets/true-peak-limiter-processor.jsにバンドルされています。参照実装（Oxford Limiter、iZotope Ozone Maximizer）との測定値はLUFS統合で0.1 dB以内に一致しています。

4. メインスレッド以外の通信

オーディオグラフはオーディオスレッドで実行されます。UIはメインスレッドで実行されます。パラメータの変更（ノブを回す、トラックをフェードさせる）はUI → オーディオに伝播する必要がありますが、オーディオが途切れないようにします。

Web Audioの AudioParam は標準パラメータ（GainNode gain、BiquadFilterNode frequency）に対してネイティブに処理します。カスタムワークレットパラメータの場合、UIメッセージには MessagePort と構造化クローンを使用し、高レートのオートメーションデータには SharedArrayBuffer に基づくリングバッファを使用します。

SharedArrayBufferには、Cross-Origin-Opener-Policy: same-origin + Cross-Origin-Embedder-Policy: require-corp ヘッダーが必要です。これらのヘッダーは、public/_headers で /soundbend および /pulse ルートに設定されています。Tape Delayは96kHzのリングバッファを使用してメッセージポートの遅延を回避します。

5. 5つのネイティブ楽器

Soundbendは5つのカスタム楽器を搭載しています。

FMシンセ — DX7 / Operatorをモデル化した6オペレータFM合成。アルゴリズムビジュアライザー + 完全な変調マトリックス。UI用に約800 LOCのJS、音声割り当て用に約300 LOCのワークレット。

Wavetable Synth — wavetable間の合成。スペクトルワーピング + ユニソン + ステレオ・デチューン。30種類以上のファクトリーワベーブル。wavetableのクロスフェードをオーディオレートで行うために ConvolverNode を使用します。

Analog Subtractive — 2-oscillator polysynth with Cytomic SVF filters. Cytomic is the state-variable filter topology that sounds right; naive SVF has aliasing issues above fc > SR/6. The Cytomic port handles this via zero-delay feedback math.

DrumRack + Sampler — パッドベースのサンプル再生で、各パッドのピッチ/フィルター/アンプエンベロープを調整可能。サンプルはIndexedDBに保存され、高速で呼び出せます。5種類のジャンル別ファクトリーキット（ブームバップ、トラップ、ハウス、DNB、アフロビート）を搭載。

SeedSynth + Geist (in the legacy AudioStudioEngine — now merged into Soundbend as of Wave 14) — a genetic patch-generator (Synplant 2-class) and a Geist-style drum machine. These are the proprietary IP that made the consolidation doctrine a big deal — we had to preserve bit-identical behavior through a 30k-line merge. 100-seed null-test passed post-merge.

6. ミキサー + オーディオミキサー

適切なミキサー — トラックごとのフェーダーだけでなく、トラックごとのFXインサート、フェーダー前後でのアシスト送信、マスターバス — がDAWとシーケンサーを分けるものです。Soundbendのミキサークラスは約655 LOC（src/audio/mixer.js）です。各トラックは、インサートスロット、送信タップポイント、メータリングを備えたAudioNodeグラフです。

難しいのはプリフェーダーとポストフェーダーのアUX送信です。プリフェーダーはトラックボリュームにかかわらずリバーブバスに送信します（クラシックな用途：トラックフェードに影響されない平行リバーブ）。ポストフェーダーはトラックボリュームに比例します。両方とも提供されます。

7. MIDI + WAMプラグインホスト

WebMIDIは成熟しています — USB-MIDIキーボードからのコントローラー入力は、どのUSB-MIDIキーボードでもそのまま動作します。MIDIラック（アーペジエーター、スケール、コード）はコントローラーと楽器の間にあり、ノートストリームを変換します。

プラグインについては、Web Audio Modules v2 (WAM) — ブラウザネイティブプラグインをホストしています。VST（25年もの先駆け）よりもエコシステムが小さいですが、成長しています。WAMの読み込みはgetWamHost().load(wamUri)で、AudioNodeを返し、任意のチェーンに挿入できます。

WAMsは、任意のユーザー提供JSを読み込むため、ルートごとのCSPが必要です。私たちの _headers は、/soundbend に対してCSPを厳密にスコープし、信頼できるWAMレジストリの script-src 許可リストを設定しています。

8. OfflineAudioContext for bounce

エクスポートは OfflineAudioContext を介して実行されます — チェーンの複雑さに応じてリアルタイムより速く（または遅く）静的 AudioBuffer にレンダリングし、その後、ブラウザ内エンコーダーでWAVにエンコードします。

注意点：すべてのノードがOfflineAudioContextで動作するわけではありません。MediaStreamAudioSourceNodeは動作しません（もちろん、オフラインでライブマイクを録音することはできません）。特定のワークレットは、オンライン→オフラインの切り替え時に慎重な状態リセットが必要です。この問題を何度も経験し、現在はMixer.toJSON() + Mixer.fromJSON(offlineCtx)が標準的なパターンとなっています：ミキサーの状態をシリアライズし、オフラインコンテキスト上で並行するミキサーを再構築してレンダリングします。

9. Yjsを介したコラボレーション

Yjs は、自動的な競合解決を備えたマルチユーザー共同編集を処理するCRDTライブラリです。当社の SoundbendSession クラスは、トラックごとのドキュメント構造（トラックメタデータにはY.Map、パターンステップにはY.Array、歌詞/メモにはY.Text）でYjsをラップしています。

2～4人のプロデューサーが同時にプロジェクトを編集でき、サンプル精度のトラック同期が可能です。テキスト文書の共同編集よりも難しいのは、オーディオデータが桁違いに大きいからです — 私たちは生のオーディオではなく、メタデータとパターンをYjs経由で共有しています。生のサンプルはローカルに残ります（ユーザーごとにIndexedDB）。

10. パフォーマンス予算

ブラウザ内でフルDAWを60fps UI + リアルタイム音声 + SharedArrayBuffer + WASM + 複数のワークレットで実行するには、効率的なリソース管理が必要です。いくつかの数値：

• オーディオスレッド: 48kHzで約2ms / 128サンプルバッファ（サブフレーム）
• Main thread: 16.6ms / 60fps frame; audio handling must stay <1ms per frame
• Worklet設定：1回限りのコストで、Workletのロードあたり約10-50ms（15+ Workletをシップ — バッチ処理）
• SharedArrayBuffer allocation: 4KB ring buffers per dynamic worklet param
• Soundbendのチャンクサイズ（統合後）：約496 KB ラフ、約120 KB gzip
• フルプロジェクトロード（コールド）：中程度のラップトップで約800ms
• エクスポートレンダリング：エフェクトチェーンの複雑さに応じて、リアルタイムの0.3倍から2倍程度

11. ヌルテストハンドラ

DSP の回帰は静かです — コードレビューでは検出できない微妙な違いで音声が変わります。Soundbend は、tests/audio-null/ で Puppeteer で駆動された null テストハンドラを搭載しています。

各エフェクト × プリセット × テスト信号について、ハーネスはヘッドレス Chromium 内の OfflineAudioContext を介してレンダリングし、結果の WAV をコミットされたゴールデンと比較して null テストを行い、残留ピークが -60 dBFS を超える場合はビルドを失敗させます。

Wave 14Fでは、100のSeedSynthシードベースラインと32のGeistドラムパターンゴールデンが追加されました。SoundbendをAudioStudio（Wave 14B-G）に統合した際、ヌルテストにより、プロプライエタリインストゥルメントに静かに破損する可能性のあるものを検出しました。100のSeedSynthシードのうち96がビット identical で通過しました。4つの失敗は、事前に存在するChromium Web Audioのクセ（OfflineAudioContextインスタンス間での高Qフィルタ共振のずれ）によるものでした — マージの回帰ではありません、JavaScriptから修正できません。

12. ブラウザとクライアントサイドが正しい選択だった理由

ネイティブDAW（Ableton、Logic、FL Studio）は30年もの先駆けがあります。機能面で追い抜くのは長い道のりですが、価格 — これは、異なるアーキテクチャの選択をすることで、すぐに勝ち取れる部分でした。

WebAssemblyは2022～2024年にパフォーマンスの閾値を突破しました。Web Audio AudioWorkletsもほぼ同じ時期に広く実装されました。SharedArrayBuffer + COOP/COEPが安定化しました。Chromium、Firefox、Safariはすべて必要なAPIを十分なパフォーマンスでサポートしています。

課金の影響：音声処理がユーザーのデバイス上で実行されるため、当社はそのコストを負担しません。Morph Proのサブスクライバー1人あたりの限界コストはほぼゼロです。したがって、月額4.99ドルは持続可能で、永久に続きます。ラグスの2020年Android端末を持つ子供も、サンフランシスコの誰かが同じ4.99ドルを支払ってアクセスできるフルDAWを手に入れられます。

経済学についての説明を読むには、価格アーキテクチャエッセイをご覧ください。DSPについては、これがほとんどすべての物語です。

試してみる

Soundbendはmorph.cool/soundbendにあります。無料トライアルはサインアップなしで動作します。$4.99/月のProはマスタリングチェーン + true-peakリミッター + 追加プリセットをロック解除します。WebMIDIキーボードはウェルカムですが、必須ではありません。