LASTUDIO
Blog
テクノロジー

ONNXブラウザで音楽AI!ニューラルシンセシスとDDSP技術を徹底解説

ONNXをブラウザで音楽に使うとはどういうことか?

「ONNXをブラウザで音楽に使う」とは、機械学習モデルをインストールなしでブラウザ上で直接実行し、AIによる楽器演奏・ボイス合成・ステム分離などをリアルタイムで実現する技術のことです。2020年代前半まで「AIで音楽を作る」といえばPython環境の構築・GPUサーバーへの接続が前提でしたが、ONNX Runtime Web・WebGPU・WebAssemblyの組み合わせにより、今ではChromeを開くだけでネイティブアプリに迫る処理速度が得られます。

この記事ではONNXがブラウザで動く仕組み、ニューラルシンセシス・DDSPの原理、WebGPUによる高速化の実態、そして実際に使えるツールまでを一気通貫で解説します。DTMer・エンジニア・研究者の方がそれぞれ「なるほど」と感じられる深さを目指しました。

ブラウザで動くAI音楽制作の概念図」 loading=

ONNXとは何か?音楽AIで使われる理由

ONNX(Open Neural Network Exchange)はMicrosoftとFacebookが共同提唱したオープンなモデル形式です。PyTorchやTensorFlowで学習したモデルを「.onnxファイル」に変換することで、あらゆるランタイムやデバイスで推論できます。音楽AIの文脈でONNXが注目される理由は主に3つです。

  • フレームワーク非依存:PyTorch製のDemucs(ステム分離)もTensorFlow製のBasic Pitch(音声→MIDI)も、同じONNX Runtimeで動かせる
  • ONNX Runtime Webの登場:WebAssemblyバックエンドとWebGPUバックエンドを切り替えることで、CPUのみのマシンからGPU搭載マシンまで最適化された推論が可能
  • モデルサイズの最適化:量子化(INT8/FP16)によってDemucsの推論モデルを数百MBから数十MBに圧縮でき、ブラウザへのダウンロードが現実的になった

ONNX Runtime Webのバックエンド比較

ONNX Runtime Webには現在4つのバックエンドが存在し、それぞれ処理速度と互換性が異なります。

  • cpu(純粋JS):最も互換性が高いが低速。60秒音源の分離に3〜5分かかることも
  • wasm(WebAssembly):C++同等の速度でCPUを活用。SIMDを有効にすると2〜3倍高速化
  • webgl:GPUシェーダーを利用。WebGPU登場前の主力だったが精度が落ちるケースがある
  • webgpu:最新GPU APIを使い、ネイティブ推論の50〜80%の速度を実現(後述)

ニューラルシンセシスの仕組みを理解する

ニューラルシンセシス(Neural Synthesis)とは、従来の波形生成アルゴリズムを使わず、ニューラルネットワーク自体が音声波形を直接生成・制御する技術です。古典的なシンセサイザーが「オシレーター → フィルター → アンプ」という信号経路を持つのに対し、ニューラルシンセは「MIDIノート・ピッチ・強度 → ネットワーク → 波形」というエンドツーエンドの経路を持ちます。

主要なニューラルシンセシスアーキテクチャ

現在音楽AIで実用化されている主要なアーキテクチャを整理します。

  • WaveNet(Google DeepMind, 2016):ピクセルごとに波形を自己回帰生成。品質は極めて高いが、リアルタイム生成にはTPUが必要なほど重い。現在はTTSに特化
  • DDSP(Differentiable Digital Signal Processing):物理モデリングをニューラルネットワークに組み込む折衷アプローチ(後述)
  • NSynth(Magenta):音色の「潜在空間」を学習し補間するWaveNetエンコーダーベースのモデル
  • MIDI-DDSP(Magenta, 2022):MIDIを入力して各楽器の物理パラメータを予測し、DDSPで最終波形を合成
  • Encodec / DAC:ニューラル音声コーデックで潜在表現を使う。MusicGen等の生成モデルの基盤

DDSPとは何か?物理モデルとAIを橋渡しする技術

DDSP(Differentiable Digital Signal Processing)は2020年にGoogleのMagentaチームが発表した、音楽AI界隈でおそらく最も重要な技術の一つです。キーコンセプトは「既存の信号処理(FFT・加算合成・サブトラクティブフィルター)を微分可能な操作として実装し、ニューラルネットワークの中に埋め込む」という点にあります。

DDSPの動作原理:ステップごとに解説

  1. エンコード:入力音声(例:バイオリンの演奏)から基本周波数(F0)・ラウドネス・潜在ベクトルを抽出する
  2. デコード:小さなMLPがF0・ラウドネス・潜在ベクトルから「加算合成の倍音振幅列」「ノイズフィルター係数」を予測する
  3. 合成:予測されたパラメータを使って微分可能な加算合成器とノイズ合成器が波形を生成する
  4. 損失計算:生成波形とターゲット音声の差(スペクトル損失)を逆伝播してネットワークを最適化する

この手法の最大のメリットはモデルが小さいことです。WaveNetが数百万パラメータ必要だった品質を、DDSPはわずか数万〜数十万パラメータで実現します。これがブラウザ推論を現実的にした要因の一つです。

楽器とニューラルネットワークを組み合わせた音楽合成のイメージ

DDSPでできること・できないこと

DDSPは持続音系楽器(バイオリン・フルート・声)の音色変換・タイムストレッチに非常に強い一方、ドラムのような打撃音の合成には不向きです。また、単一の楽器クラスに特化したモデルを学習する必要があるため、汎用的な「なんでも合成できる」モデルではありません。用途を絞った専門家的なシンセとして理解するのが適切です。

WebGPUがDDSP・ONNXをどう変えたか

WebGPUは2023年にChromeで正式実装されたGPU APIで、WebGLの後継にあたります。音楽AI推論への影響は具体的な数値で示すのが最もわかりやすいでしょう。

  • Demucs(ステム分離):WebAssembly(CPUのみ)では60秒の楽曲分離に約4分かかっていたが、WebGPU使用時は約40〜60秒(実使用時間比で約4〜5倍高速)
  • Basic Pitch(Audio→MIDI):WebAssemblyでは5秒の音声変換に約15秒かかっていたが、WebGPUでは約3〜4秒
  • MIDI-DDSPリアルタイム合成:WebGLでは間に合わなかったリアルタイム演奏が、WebGPUでは低レイテンシ(64〜128サンプルバッファ)で動作

WebGPU × ONNX Runtime Webの実装イメージ

開発者向けに、WebGPUバックエンドを有効化したONNX Runtime Webの基本的な使い方を示します。

import * as ort from 'onnxruntime-web';
ort.env.wasm.wasmPaths = '/ort/';
const session = await ort.InferenceSession.create('/model.onnx', {
  executionProviders: ['webgpu', 'wasm'], // webgpuを優先、非対応時はwasm
});
const input = new ort.Tensor('float32', audioData, [1, 1, audioData.length]);
const output = await session.run({ input });

上記のようにexecutionProviders'webgpu'を先に指定するだけで、WebGPU対応ブラウザでは自動的にGPU推論が有効になります。WebGPU非対応のブラウザはwasmにフォールバックするため、互換性も維持できます。

MIDI-DDSP:MIDIからリアルな楽器音を生成するブラウザAI

Magentaが公開したMIDI-DDSPは、DDSPとニューラルシンセシスを組み合わせた実用的なモデルです。MIDIノートを入力すると、楽器ごとの演奏表現(ビブラート・アタック・ダイナミクス)を含む音声波形をリアルタイムで生成します。従来のSF2サウンドフォントやサンプラーと異なり、ベロシティやアーティキュレーションを物理的に「演奏」するため、機械的な繰り返し感がないのが特徴です。

MIDI-DDSPのブラウザ実装フロー

  1. ピアノロールやMIDIファイルからノートイベント(音高・ベロシティ・開始/終了時刻)を取得
  2. ONNXモデル(「note_expression_control」ネットワーク)がノートごとの演奏表現パラメータを予測
  3. DDSPデコーダーがパラメータから倍音振幅列とノイズ係数を生成
  4. WebAudio APIのAudioWorklet上でDSP合成を実行し、リアルタイムで音声を出力

LA Studioでは、このMIDI-DDSPをブラウザ上で実際に試せるプラグインインストゥルメントとして実装しています。ピアノロールからバイオリン・フルート・トランペット等の楽器音をリアルタイムにDDSPで合成でき、エディタを開くだけですぐに使えます。インストール・環境構築は一切不要です。

ブラウザ音楽AIを支えるその他のWebAPI

ONNXとWebGPUだけでなく、ブラウザ音楽AIを成立させているのは複数のWebAPIの連携です。

  • Web Audio API:オーディオのデコード・バッファ・ルーティングを担当。AudioWorkletでDSP処理をメインスレッドから分離
  • WebAssembly SIMD:CPU上でのFFT・行列積をSIMD命令で高速化。DDSPの加算合成部分はWASMで実装されることが多い
  • SharedArrayBuffer + Atomics:推論スレッドとオーディオスレッド間でゼロコピーバッファを共有してレイテンシを最小化
  • File System Access API:ローカルファイルのONNXモデルをキャッシュして再読み込みを防止
  • Web Workers:重い推論をバックグラウンドスレッドで処理してUIをブロックしない
音楽スタジオとデジタル信号処理のイメージ

実際に試せるONNXブラウザ音楽ツール

理論だけでなく、今すぐ使える実用ツールも把握しておきましょう。

  • LA Studio(la-studio.cc):ONNX Runtime WebとWebGPUを活用したブラウザDAW。DemucsによるAIステム分離、Basic PitchによるBPM・キー検出、MIDI-DDSPニューラル楽器合成など多数のAI機能を無料・登録不要で利用可能
  • Magenta Studio(ブラウザ版):GoogleのMagentaチームが公開するMIDI生成・補完ツール群。TensorFlow.jsで動作
  • Basic Pitch(Spotify):音声ファイルをMIDIに変換するONNX Webアプリ。精度はプロ用ソフトと遜色ない
  • ONNX Model Zoo(音楽系):MusicGen・Encodec・Demucsの量子化済みONNXモデルが公開されており、自分でWebアプリに組み込むことができる

開発者向け:ブラウザ音楽ONNXアプリ構築のポイント

自分でONNXブラウザ音楽アプリを作る場合のポイントをまとめます。

モデル変換と最適化

  • torch.onnx.export()でPyTorchモデルをONNXに変換後、onnxsimで不要なノードを削除
  • onnxruntimequantize_dynamic()でINT8量子化し、モデルサイズを50〜75%削減
  • 動的軸(バッチサイズ・シーケンス長)を正しく定義しないとブラウザ推論で失敗するので注意

オーディオパイプライン設計

  • サンプルレートは16kHz(音声系モデル)か44.1/48kHz(音楽系モデル)かを事前確認。ミスマッチは品質劣化の最大原因
  • AudioWorkletProcessorのprocess()内でのONNX推論は避ける(同期APIしか使えないため)。代わりにWeb Workerで非同期推論 → SharedArrayBufferで結果を共有
  • レイテンシ重視なら128サンプル(約3ms @44.1kHz)バッファ、品質重視なら4096サンプル単位でバッチ処理

まとめ:ブラウザ音楽AIの現在地と今後

ONNX Runtime Web・WebGPU・DDSPの三位一体により、「本格的なAI音楽処理はクラウドやネイティブアプリだけのもの」という常識が覆されつつあります。2025年現在、ブラウザだけでステム分離・ピッチ補正・ニューラル楽器合成・音声→MIDI変換が実用速度で動く時代になりました。プライバシー的にも音源をサーバーにアップロードしなくて済むメリットがあります。今後はWebGPU対応ブラウザのさらなる普及とONNXモデルの量子化精度向上により、リアルタイムのニューラルシンセサイザーがDAWの標準機能になる日は遠くないでしょう。

今すぐ試したい方はLA StudioのエディタでMIDI-DDSPニューラル楽器合成やAIステム分離を体験してみてください。インストール不要・完全無料でブラウザ音楽AIの最前線を体感できます。

よくある質問(FAQ)

Q. ONNXモデルをブラウザで動かすのにサーバーは必要ですか?

A. 不要です。ONNX Runtime Webを使えば、モデルファイル(.onnx)を静的ホスティング(GitHub PagesやS3など)に置くだけで、すべての推論がユーザーのブラウザ内で完結します。サーバーサイドのGPUや推論エンドポイントは必要ありません。

Q. WebGPUに対応していないブラウザではONNX音楽AIは使えませんか?

A. 使えます。WebGPU非対応環境ではWebAssemblyバックエンドに自動フォールバックします。速度は落ちますが、FirefoxやSafariでも動作します。なおSafariのWebGPU対応は2024年以降進みつつあり、将来的にはさらに広い環境で高速推論が可能になる見込みです。

Q. DDSPとサンプラー(SF2/SFZ)は何が違いますか?

A. サンプラーは録音した実音をベロシティ・ピッチ別にマッピングして再生します。DDSPはモデルが「演奏の物理的パラメータ」を予測し、合成式で音を作るため、ビブラートや息継ぎなど演奏表現を連続的に生成できます。結果として同じMIDIノートでも毎回微妙に異なる「生きた」音になる点が最大の違いです。

Q. ブラウザのONNX音楽AIはモバイル(スマートフォン)でも動きますか?

A. 基本的には動作しますが、スマートフォンのメモリ・GPU性能はPCより限られるため、大きなモデル(Demucs等)はモバイルでは非常に遅くなるか、メモリ不足でクラッシュする場合があります。軽量モデル(Basic Pitch等)であれば最新ハイエンドスマートフォンで実用速度で動作するケースもあります。

Q. MIDI-DDSPはどの楽器に対応していますか?

A. Magentaが公開しているMIDI-DDSPの公式モデルはバイオリン・フルート・クラリネット・トランペットなどの管弦楽器に対応しています。それぞれ個別のONNXモデルが必要で、楽器ごとに異なる倍音特性と演奏表現を学習しています。ピアノは打鍵系のため別アーキテクチャ(DDSPよりサンプラーが向く)が採用されることが多いです。

Related Articles

ガイド
ブラウザでギターをリアルタイムモニタリングする方法【無料・インストール不要】
ブラウザだけでギターの音をリアルタイム確認する方法を初心者向けに解説。インターフェース不要でも録音できる。
ガイド
DAWフローティングウィンドウ完全ガイド【マルチウィンドウで作業効率3倍】
DAWのフローティングウィンドウ・マルチウィンドウ機能の使い方を徹底解説。各DAW比較と実践テクニックをまとめました。
ガイド
オーディオブリッジDAW完全ガイド【デスクトップ音声をブラウザへ接続】
デスクトップの音声をブラウザDAWにルーティングする方法を手順つきで解説します。