Skip to content

ブラウザ内ローカル処理

ブラウザ内ローカル処理とは、音声ファイルのデコードや処理をユーザー端末のブラウザ内で完結させる方式のことです。libsonare の各デモは、解析、ミキシング、リアルタイム FX、マスタリングレンダーのためにソース音声をサーバーへアップロードしません。

これは libsonare のもうひとつの軸であり、本格的な DSP を提供しつつ、ユーザーの音声を設計レベルで秘匿に保つための仕組みです。

ローカルで完結する処理

ブラウザデモでは以下がブラウザ内で実行されます。

  • ファイルデコードはブラウザの Web Audio API または WASM の Audio.fromMemory* ヘルパーで行う。
  • 解析、レンダリング、ミキシング、リアルタイム FX は、デモに応じてページ、Web Worker、AudioWorklet 上で動く。
  • DSP は libsonare の WebAssembly モジュール内で動く。
  • WAV 書き出し、JSON レポート生成、可視化用データの生成もブラウザ内で完結。
  • ソース、レンダリング結果、リファレンス、設定はローカルオブジェクトとして保持。

ネットワークから取得するもの

ページ本体、JavaScript バンドル、WASM ファイル、フォント、アクセス解析スクリプトは、通常の Web サイトと同じくネットワークから読み込まれることがあります。これは、音声を処理のためにアップロードすることとは別物です。

コードが読み込まれた後の音声処理経路自体は、すべてローカルで完結しています。

トレードオフ

ローカル処理の利点:

  • アップロード待ちがない。
  • サーバー側にファイルが保管されない。
  • クレジットや順番待ちが発生しない。
  • 端末の外に出せない素材でも扱いやすい。

制約:

  • 長尺ファイルはユーザー端末の CPU・メモリ性能に依存する。
  • モバイルブラウザでは制限が厳しい場合がある。
  • 対応コーデックは OS/ブラウザによって差がある。
  • 端末側でレンダリングできなかった場合のサーバーフォールバックはない。

押さえておきたいポイント

機密性の高い素材を扱うときも、通常のページと同じようにコードや WASM はネットワークから読み込まれます。重要なのは「読み込み後の音声処理の段階で、ソース・リファレンス・解析バッファ・レンダリング結果がアップロードされない」設計になっていることです。

大きなファイルでレンダリングが遅いときは、サーバー側の混雑ではなく、手元の端末の CPU・メモリが上限に達している可能性が高いです。短い区間で挙動を確認する/別ブラウザを試す/デスクトップ環境で実行する、といった対処が現実的です。

実装メモ

デモは、必要に応じてデコード済みソース、レンダリング後の WAV、JSON レポート、リファレンス音源、エクスポート設定に object URL を作成します。これらはリモートのファイルではなく、ブラウザのローカルメモリ上のデータを指す URL です。差し替え時やコンポーネントのアンマウント時には revoke してメモリリークを防ぎます。プレビュー再生・WAV 書き出し・レポート保存はいずれもこの仕組みの上に乗っているため、音声ファイルがネットワーク経由でやり取りされる経路は持っていません。

レンダリング、リファレンスマッチング、重めの解析タスクは、必要に応じてモジュールワーカーで動きます。libsonare の WASM が重い処理を実行している間も、UI スレッドをブロックしにくくするためです。

リアルタイム FX では、音声コールバック用に AudioWorklet 系の実行を使います。

ワーカー内で例外が起きた場合も、UI 側で扱いやすいエラーオブジェクトに整形してから返します。長尺ファイルで失敗しても、ページ自体が固まらないようにするためです。

関連: エラー復旧, マスタリング品質チェックリスト, WASM