필사 모드: Web Audio API & ブラウザオーディオ 2026 — AudioWorklet / Tone.js / Howler.js / Wavesurfer / Peaks.js / Meyda / Faust / Csound / Web Speech 深掘りガイド
日本語プロローグ — ブラウザがオーディオワークステーションになった年
2026年5月現在、「ブラウザでオーディオ」という言葉の重みは5年前とまったく違う。
- Web Audio API は W3C Working Draft から Candidate Recommendation に進み、Level 2 仕様が安定した。
- AudioWorklet はすべての主要ブラウザ(Chrome、Edge、Firefox、Safari)で GA となり、ScriptProcessor は事実上の死亡宣告を受けた。
- Tone.js は v15 まで進み、Yotam Mann が始めたこのプロジェクトは音楽プログラミングの事実上の標準となった。
- Howler.js は HTML5 ゲームサウンドの絶対多数で採用されている。
- WaveSurfer.js v8、Peaks.js(BBC)、Meyda といった解析・可視化ライブラリが DAW 級の UI を可能にする。
- Faust2WebAudio と Csound on WebAssembly が学術 DSP をブラウザに持ち込んだ。
- WebRTC + Opus + WebTransport によって 50ms 未満のリアルタイム音声コラボが可能になった。
- Web Speech API の SpeechRecognition と SpeechSynthesis はデスクトップ・モバイルともに安定動作する。
- 韓国はネイバー Clova TTS/STT と Kakao i Voice が事実上の標準、日本は VOICEVOX と Coeiroink がローカル・ブラウザ双方で標準となった。
この記事はその全体地図を一気に描く。どのツールがどこに位置するのか、何が消えて何が生き残ったのか、そして2026年に新プロジェクトを始めるなら何を選ぶべきか。
1. 2026年 Web Audio 地図 — 4分類
エコシステムは大きく4層に分かれる。
[ 1層 ] 仕様 — Web Audio API (W3C)、Web Speech API
[ 2層 ] 低レベルツール — AudioContext、AudioWorklet、OfflineAudioContext
[ 3層 ] ライブラリ — Tone.js、Howler.js、Pizzicato.js、WaveSurfer.js、Peaks.js、Meyda
[ 4層 ] DSL/エンジン — Faust2WebAudio、Csound on Web、Web MIDI ベースのシンセ
[ 横軸 ] リアルタイム/AI — WebRTC + Opus、WebTransport、Coqui XTTS、Suno API、ElevenLabs API
各層は**抽象化のレベル**で分かれる。1層は仕様で変えられない、2層はすべてのブラウザに入っている、3層は選んで使うライブラリ、4層は DSP 専門家の領域。
| 領域 | 推奨ツール |
| --- | --- |
| ゲームサウンド | Howler.js |
| 音楽・楽器・シーケンサー | Tone.js |
| DAW UI 波形 | WaveSurfer.js |
| 放送向けセグメントエディタ | Peaks.js |
| 特徴抽出(BPM、MFCC) | Meyda |
| 学術 DSP / シンセ | Faust2WebAudio、Csound on Web |
| ビデオ会議 / 音声チャット | WebRTC + Opus |
| ブラウザ TTS | Web Speech API + 外部 API |
| 韓国語 TTS | ネイバー Clova、Kakao i Voice |
| 日本語 TTS | VOICEVOX、Coeiroink |
2. Web Audio API (W3C) — 全ブラウザで GA
Web Audio API の核は**グラフベースのオーディオルーティング**である。JavaScript でノードを作って接続すると、オーディオ処理はブラウザの別スレッド(レンダースレッド)で走る。
const ctx = new AudioContext()
// ノード生成
const osc = ctx.createOscillator()
const gain = ctx.createGain()
// グラフ接続: osc -> gain -> 出力
osc.connect(gain)
gain.connect(ctx.destination)
// パラメータ設定
osc.frequency.value = 440 // A4
gain.gain.value = 0.2
// 再生
osc.start()
osc.stop(ctx.currentTime + 1)
2026年の主要な変化は2つ。
1. **AudioParam オートメーション曲線** — `setValueCurveAtTime` がすべてのブラウザで同一の補間をする。もうポリフィルは不要。
2. **AudioRenderCapacity** — レンダースレッドの負荷を直接測定して動的にノード数を調整できる(Chrome 121+、Safari 18+)。
W3C 仕様自体の表面積は小さい。約30種のノードタイプがすべてで、これらの組み合わせでほぼあらゆるオーディオ処理が可能。
| ノード分類 | 代表ノード |
| --- | --- |
| ソース | OscillatorNode、AudioBufferSourceNode、MediaElementSourceNode、MediaStreamSourceNode |
| エフェクト | GainNode、BiquadFilterNode、DelayNode、ConvolverNode、DynamicsCompressorNode、WaveShaperNode |
| 解析 | AnalyserNode |
| 空間 | PannerNode、StereoPannerNode、AudioListener |
| ユーザー定義 | AudioWorkletNode |
| 出力 | AudioDestinationNode、MediaStreamDestination |
3. AudioContext + OfflineAudioContext + MediaStream / MediaElement
3種類のコンテキストがあり、それぞれ用途が異なる。
AudioContext — リアルタイム
デフォルトのコンテキスト。出力はスピーカーまたはヘッドホン。ユーザージェスチャー(クリック、キー入力)が必要で、それまで最初の再生は始まらない。モバイル Safari は特に厳格。
OfflineAudioContext — 非リアルタイムレンダリング
リアルタイムより速くオーディオをレンダリングする。WAV エクスポート、オフライン解析、マスタリングプレビューに使う。
// 44.1kHz、ステレオ、10秒のバッファ
const offline = new OfflineAudioContext(2, 44100 * 10, 44100)
const osc = offline.createOscillator()
osc.connect(offline.destination)
osc.start()
osc.stop(10)
const rendered = await offline.startRendering()
// rendered は AudioBuffer — そのまま WAV にエンコード可能
MediaElementAudioSourceNode — audio/video タグをグラフに繋ぐ
HTML5 audio/video 要素をノードに変換する。iframe 埋め込み動画には使えない(CORS、autoplay ポリシー)。
const audioEl = document.querySelector('audio')
const ctx = new AudioContext()
const source = ctx.createMediaElementSource(audioEl)
source.connect(ctx.destination)
// audioEl を再生すると ctx グラフを通って出力される
MediaStreamAudioSourceNode — getUserMedia マイク
マイク入力をグラフに入れる。WebRTC 入力にも同じノードを使う。
const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
const ctx = new AudioContext()
const mic = ctx.createMediaStreamSource(stream)
const analyser = ctx.createAnalyser()
mic.connect(analyser)
// analyser.getByteFrequencyData() でリアルタイムスペクトルを取得
4. AudioWorklet — ScriptProcessor の墓
ここが2026年の最大の変化点である。
**過去**: ScriptProcessorNode をメインスレッドで動かしていた。バッファサイズ 256〜16384 サンプル、遅延が大きく GC が入るとクリック(ドロップアウト)が出た。
**現在**: AudioWorklet はオーディオレンダースレッドで直接動く別のグローバルスコープ。メインスレッドから切り離され、128 サンプル単位(約 2.6ms)で計算される。
// worklet.js — レンダースレッドで動くコード
class WhiteNoiseProcessor extends AudioWorkletProcessor {
process(inputs, outputs, parameters) {
const output = outputs[0]
for (let channel = 0; channel < output.length; channel++) {
const ch = output[channel]
for (let i = 0; i < ch.length; i++) {
ch[i] = Math.random() * 2 - 1
}
}
return true // ノードを生かしておく
}
}
registerProcessor('white-noise', WhiteNoiseProcessor)
// main.js — メインスレッドで登録して使う
const ctx = new AudioContext()
await ctx.audioWorklet.addModule('worklet.js')
const noise = new AudioWorkletNode(ctx, 'white-noise')
noise.connect(ctx.destination)
AudioWorklet の真価は**WebAssembly との組み合わせ**にある。Rust や C++ で書いた DSP コードを WASM にビルドしてワークレット内で動かせば、ネイティブに近い性能が出る。Faust2WebAudio・Csound on Web はどちらも内部でこのパターンを使う。
ScriptProcessorNode は仕様書に**DEPRECATED**の烙印が押された。新規コードでは絶対に使ってはならない。
5. Tone.js (Yotam Mann) — 音楽プログラミングの事実上の標準
Tone.js は 2014年に Yotam Mann が始めたプロジェクトで、音楽ドメイン — 音符、拍子、シンセ、エフェクトチェーン — を扱うための抽象を提供する。
// ポリフォニックシンセ + リバーブ
const reverb = new Tone.Reverb({ decay: 4 }).toDestination()
const synth = new Tone.PolySynth(Tone.AMSynth).connect(reverb)
// シーケンサー — 16分音符単位のループ
const seq = new Tone.Sequence(
(time, note) => {
synth.triggerAttackRelease(note, '8n', time)
},
['C4', 'E4', 'G4', 'B4', 'C5', 'B4', 'G4', 'E4'],
'8n'
)
await Tone.start() // ユーザージェスチャー後
Tone.Transport.bpm.value = 120
Tone.Transport.start()
seq.start(0)
主要コンポーネント:
| カテゴリ | モジュール |
| --- | --- |
| ソース | Oscillator、Synth、AMSynth、FMSynth、MonoSynth、PolySynth、Sampler、Player |
| エフェクト | Reverb、Delay、FeedbackDelay、Chorus、Distortion、Phaser、AutoFilter、Compressor |
| 時間 | Transport(グローバル BPM クロック)、Sequence、Loop、Pattern、Part |
| シグナル | Signal、Param、LFO、Envelope、ScaledEnvelope |
Tone.js v15 では**Note class**が完全に書き直された。音符を `'C4'` のような文字列だけでなく、note・octave・accidental フィールドを持つオブジェクトとしても受け取れる。音楽理論をコードで扱う際、最も直感的な API。
6. Howler.js — ゲームサウンドの絶対標準
Howler.js は「複雑なグラフはどうでもいい、ただ BGM と効果音を再生できればいい」という人のためのライブラリ。
const sfx = new Howl({
src: ['shoot.webm', 'shoot.mp3'],
volume: 0.5,
rate: 1.2, // ピッチを保ったまま 1.2 倍速
sprite: {
shoot1: [0, 200],
shoot2: [300, 200],
},
})
document.getElementById('fire').addEventListener('click', () => {
sfx.play('shoot1')
})
Howler.volume(0.8) // グローバルマスターボリューム
Howler.js の利点:
- 単一オブジェクトで多重インスタンスを自動管理(同じ効果音を高速連射してもプーリングが面倒を見る)
- フェードイン/アウト、シーク、スプライト、3D パンニング、グローバルミュートが一貫した API に統合
- コーデック自動フォールバック — WebM Opus がダメなら MP3
- モバイルの autoplay ポリシーを自動処理
ほぼすべての HTML5 ゲームエンジン(Phaser、Pixi.js + 別途サウンド、Construct 3 など)が Howler.js をデフォルトまたはオプションとして推奨している。
7. Pizzicato.js — 新興 / 宣言的
Pizzicato は「オーディオノードグラフをオブジェクト指向のように」扱えるライブラリ。Tone.js より薄く、Howler.js よりグラフ寄り。
const sound = new Pizzicato.Sound({
source: 'wave',
options: { type: 'square', frequency: 220 },
})
const delay = new Pizzicato.Effects.Delay({
feedback: 0.5,
time: 0.3,
mix: 0.5,
})
sound.addEffect(delay)
sound.play()
利点: API がシンプル。欠点: コミュニティが Tone.js ほど大きくないため、深く入ると資料が乏しい。実験・教育用途に向く。
8. WaveSurfer.js — 波形可視化の定番
WaveSurfer.js v8 は DAW スタイルの波形ディスプレイの事実上の標準。オーディオファイルを渡せばキャンバスに波形を描画し、再生ヘッド、領域選択、ズーム、ミニマップまですべてプラグインでサポートされる。
const ws = WaveSurfer.create({
container: '#wave',
waveColor: '#888',
progressColor: '#4af',
height: 120,
url: '/audio/example.mp3',
})
const regions = ws.registerPlugin(RegionsPlugin.create())
ws.on('ready', () => {
regions.addRegion({
start: 4,
end: 8,
color: 'rgba(0,255,0,0.2)',
drag: true,
resize: true,
})
})
v8 の変化: レンダリングが OffscreenCanvas + Web Worker に移行し、1時間ものオーディオでもメインスレッドを止めずにレンダーする。モバイルでも滑らか。
9. Peaks.js (BBC R&D) — 放送用セグメントエディタ
Peaks.js は BBC R&D が作ったライブラリ。ラジオ・ポッドキャスト編集で話者分離、広告区間マーキング、チャプター表示などを行う。
差別化:
- **ズーム可能な2段ビュー** — 上にミニマップ、下にズームされた詳細ビュー
- **事前計算された wave data フォーマット(.dat)** をサポート — サーバーで事前計算しておけば、クライアントはそれを受け取って即座に描画。1時間のオーディオをクライアントでデコードしなくてよい
- **ポイント / セグメント API** — 時間位置にマーカーを打ち、ラベルを付け、ドラッグで移動
const options = {
zoomview: { container: document.getElementById('zoomview') },
overview: { container: document.getElementById('overview') },
mediaElement: document.querySelector('audio'),
dataUri: { json: '/audio/example.json' }, // 事前計算された波形データ
}
Peaks.init(options, (err, peaks) => {
peaks.segments.add({ startTime: 10, endTime: 20, labelText: 'Ad break' })
peaks.points.add({ time: 15.5, labelText: 'Chapter 2' })
})
放送局のワークフローに最適化されている。BBC Sounds のようなサービスが内部で使用している。
10. Meyda — オーディオ特徴抽出
Meyda はリアルタイムでオーディオの**特徴(feature)** を抽出するライブラリ。MFCC、エネルギー、RMS、ゼロ交差率、スペクトルセントロイド、クロマ、ラウドネスなど。
const ctx = new AudioContext()
const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
const source = ctx.createMediaStreamSource(stream)
const analyzer = Meyda.createMeydaAnalyzer({
audioContext: ctx,
source,
bufferSize: 1024,
featureExtractors: ['rms', 'spectralCentroid', 'mfcc', 'chroma'],
callback: (features) => {
console.log(features.rms, features.spectralCentroid)
},
})
analyzer.start()
用途:
- **BPM 推定** — リアルタイム RMS ピーク検出
- **音声活動検出(VAD)** — RMS 閾値 + スペクトルセントロイド
- **楽器分類** — MFCC + 機械学習モデル
- **可視化** — クロマを可視化すると和声進行が見える
ML モデルと組み合わせてブラウザでジャンル分類、歌唱音声認識のようなデモを作るときに最もよく使われるツール。
11. Faust2WebAudio — Faust DSL を Web Audio へ
Faust は INRIA / GRAME が作った関数型オーディオ DSP 言語。1行でシンセ、エフェクト、フィルタを定義でき、コンパイラが C++/Rust/JS/WASM/AudioWorklet など複数ターゲットに出力する。
Faust コードの例(低域通過フィルタ):
import("stdfaust.lib");
process = fi.lowpass(3, hslider("Cutoff", 1000, 50, 20000, 1));
これを `faust2webaudiowasm` ツールでコンパイルすると AudioWorklet ベースの JavaScript ノードが出てくる。
const ctx = new AudioContext()
const node = await FaustAudioWorkletNode.create(ctx, 'lowpass')
document.querySelector('audio').addEventListener('play', (e) => {
const src = ctx.createMediaElementSource(e.target)
src.connect(node).connect(ctx.destination)
})
// パラメータ自動化
node.setParamValue('/Cutoff', 800)
利点: DSP アルゴリズムを数学的にクリーンに表現できる。欠点: 学習曲線。信号処理のバックグラウンドがないと参入が難しい。
12. Csound on Web — WASM Csound
Csound は 1986年から存在するコンピューターミュージック言語。WebAssembly に移植され、ブラウザでほぼそのまま動く。
const csound = await Csound()
await csound.compileOrc(`
instr 1
iFreq = p4
aSig oscili 0.3, iFreq
outs aSig, aSig
endin
`)
await csound.readScore('i1 0 2 440\ni1 2 2 880')
await csound.start()
Csound on Web の意義: 学術・研究・実験音楽の膨大な資産(40年分)がブラウザでそのまま動く。古い作品をデジタル博物館に上げたり、電子音楽教育に使うのに最適。
内部的には AudioWorklet + WASM の組み合わせ。メインスレッドから切り離されているので負荷が大きくても UI は止まらない。
13. WebRTC + Opus + WebTransport — リアルタイムオーディオ
ビデオ会議、ゲーム音声チャット、ライブ協業音楽の核となるスタック。
WebRTC + Opus
WebRTC は P2P メディアストリーミングの標準。Opus コーデックは 16〜512kbps の範囲で音声・音楽の両方を効率的にエンコードする。エンドツーエンドの遅延は 50ms 未満。
const pc = new RTCPeerConnection()
const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
stream.getTracks().forEach((t) => pc.addTrack(t, stream))
pc.ontrack = (e) => {
const audio = new Audio()
audio.srcObject = e.streams[0]
audio.play()
}
// SDP offer/answer の交換は別のシグナリングチャネル(WebSocket など)で
WebTransport — 新しい選択肢
WebTransport(HTTP/3 上の QUIC 双方向ストリーム)は、WebSocket を置き換える低遅延チャネル。WebRTC データチャネルよりシンプルで、信頼性 / 非信頼性を明示的に選べる。ゲーム音声のようにパケットロスを許容して遅延を減らしたい場合に向く。
2026年現在、Chrome、Edge、Firefox で GA。Safari は 26 から対応。
14. AI オーディオ — Coqui XTTS、Suno、ElevenLabs
ブラウザでの AI 音声生成には2つの道がある。
道 1: サーバー API 呼び出し
ElevenLabs、OpenAI TTS、Suno(音楽生成) — すべて REST/streaming API。
const res = await fetch('https://api.elevenlabs.io/v1/text-to-speech/VOICE_ID/stream', {
method: 'POST',
headers: {
'xi-api-key': API_KEY,
'Content-Type': 'application/json',
},
body: JSON.stringify({
text: 'Hello world',
model_id: 'eleven_multilingual_v2',
}),
})
const audio = new Audio()
audio.src = URL.createObjectURL(await res.blob())
audio.play()
ストリーミング(MediaSource Extensions + Opus chunks)を使うと、最初の音節まで 200〜300ms。
道 2: クライアントローカル推論
Coqui XTTS-v2 が Hugging Face Transformers.js でブラウザ上で動く。WebGPU ベースなので初期ロード(約500MB)が大きいが、いったんロードされれば外部呼び出しなしで合成可能。
const synth = await pipeline('text-to-speech', 'coqui-ai/xtts-v2-onnx', {
device: 'webgpu',
})
const audio = await synth('Hello from the browser')
const buffer = ctx.createBuffer(1, audio.audio.length, audio.sampling_rate)
buffer.copyToChannel(audio.audio, 0)
// 再生...
選択基準: 品質 / 即応性なら API、プライバシー / オフラインならローカル。
15. Web Speech API — ブラウザ内蔵 認識 + 合成
Web Speech API は2つの半身からなる。
SpeechRecognition — 音声 → テキスト
const SR = window.SpeechRecognition || window.webkitSpeechRecognition
const rec = new SR()
rec.lang = 'ja-JP'
rec.continuous = true
rec.interimResults = true
rec.onresult = (e) => {
for (const res of e.results) {
console.log(res[0].transcript, res.isFinal)
}
}
rec.start()
注意: Chrome はオーディオを Google のクラウドサービスに送る。プライバシーが重要ならローカルの Whisper.cpp(WASM)や Vosk を使う必要がある。
SpeechSynthesis — テキスト → 音声
const utter = new SpeechSynthesisUtterance('こんにちは')
utter.lang = 'ja-JP'
utter.rate = 1.0
utter.pitch = 1.0
const voices = speechSynthesis.getVoices()
utter.voice = voices.find((v) => v.lang === 'ja-JP' && v.name.includes('Kyoko'))
speechSynthesis.speak(utter)
OS ごとの音声エンジンをそのまま使う。macOS/iOS は Apple の Neural Voice、Windows は Edge TTS と同じ SAPI Voice、Android は Google TTS。品質のばらつきが大きい。
16. 韓国 — Clova TTS / Kakao i Voice
韓国の TTS 市場には2大巨人がいる。
ネイバー Clova Voice
NCP(Naver Cloud Platform)で提供。約50のボイスキャラクター(年齢・性別・アクセントのバリエーション)、SSML サポート、感情トーン調整。価格は2026年時点で 1000 文字あたり約3ウォン — 正確な価格は公式ページで確認のこと。
const res = await fetch('https://naveropenapi.apigw.ntruss.com/tts-premium/v1/tts', {
method: 'POST',
headers: {
'X-NCP-APIGW-API-KEY-ID': CLIENT_ID,
'X-NCP-APIGW-API-KEY': CLIENT_SECRET,
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
speaker: 'nara',
text: 'こんにちは。Clovaです。',
volume: '0',
speed: '0',
pitch: '0',
format: 'mp3',
}),
})
const blob = await res.blob()
new Audio(URL.createObjectURL(blob)).play()
Kakao i Voice
Kakao i Open Builder の音声合成。キャラクター数は Clova より少ないが、Kakao エコシステム(KakaoWork、Kakao チャットボット)との統合が強い。
選択基準:
- コンテンツキャラクターの多様性が重要 → Clova
- Kakao チャットボット / Kakao i との統合 → Kakao i Voice
- コスト — 使用量別に見積もりを比較する必要あり
ブラウザから直接呼び出すと CORS で大抵失敗するので、バックエンドプロキシを置いて呼ぶ。
17. 日本 — VOICEVOX、Coeiroink
日本の TTS 風景は韓国とまったく異なる。無料・オープンソース・キャラクターボイスが強い。
VOICEVOX
VOICEVOX は Hihosaba Inc. が運営する無料 TTS エンジン。ずんだもん、四国めたんなどのキャラクターボイスが YouTube・ニコニコ・ゲームで爆発的に使われている。
本体はデスクトップアプリだが、**VOICEVOX Core(C++) + WASM** ビルドがあり、ブラウザでも動かせる。
const core = await VoicevoxCore.create()
await core.loadModel(1) // ずんだもん
const audioQuery = await core.audioQuery('こんにちは', 1)
const wav = await core.synthesis(audioQuery, 1)
const ctx = new AudioContext()
const buf = await ctx.decodeAudioData(wav)
const src = ctx.createBufferSource()
src.buffer = buf
src.connect(ctx.destination)
src.start()
Coeiroink
Coeiroink はもう一つの無料 TTS。MYCOEIROINK というシステムを通じてユーザーが自分の声を学習させられる。個人クリエイター・YouTuber が自分のボイスを作って使うケースが多い。
選択基準:
- 人気キャラクターボイス(ずんだもんなど) → VOICEVOX
- 自分の声の学習・個人化 → Coeiroink
法的な利用規約(商用利用の可否、クレジット表記義務)はキャラクターごとに異なるので必ず確認すること。
18. 誰が何を選ぶべきか
マトリクスで整理。
| 目的 | 推奨スタック |
| --- | --- |
| HTML5 ゲーム BGM/SFX | Howler.js |
| 音楽シーケンサー / シンセ | Tone.js |
| DAW スタイル波形 UI | WaveSurfer.js + Tone.js |
| ポッドキャスト / ラジオ編集 | Peaks.js |
| BPM・楽器分類 ML | Meyda + TensorFlow.js |
| 学術 DSP / シンセ研究 | Faust2WebAudio |
| 電子音楽教育 | Csound on Web |
| 音声チャット | WebRTC + Opus |
| 低遅延ライブ(ゲーム音声) | WebRTC または WebTransport |
| ブラウザ内蔵 TTS | Web Speech API |
| 高品質英語 TTS | ElevenLabs API |
| 音楽生成 | Suno API |
| クライアント TTS(オフライン) | Coqui XTTS via Transformers.js |
| 韓国語 TTS(サービス) | Clova / Kakao i Voice |
| 日本語 TTS(キャラクター) | VOICEVOX |
| 日本語 TTS(自分の声) | Coeiroink |
3つの大きな決定軸:
1. **リアルタイム vs 非リアルタイム** — リアルタイムなら AudioContext + AudioWorklet、非リアルタイムなら OfflineAudioContext。
2. **音楽 vs ゲーム vs 解析** — 音楽は Tone.js、ゲームは Howler.js、解析は Meyda。
3. **オンライン API vs ローカル推論** — 品質・手軽さなら API、プライバシー・オフラインなら Transformers.js ベースのローカルモデル。
19. まとめ — ブラウザはオーディオワークステーションになった
5年前は、ブラウザでオーディオをするというのは「おもちゃレベル」の作業だった。2026年のブラウザは違う。
- AudioWorklet によりネイティブ並みの低遅延 DSP が可能。
- WASM で C/C++/Rust の DSP アルゴリズムをそのまま実行できる。
- Tone.js・Howler.js・WaveSurfer.js・Peaks.js・Meyda などのライブラリが各領域の事実上の標準になった。
- Faust2WebAudio・Csound on Web で学術 DSP がブラウザに入ってきた。
- WebRTC + Opus + WebTransport で 50ms 未満のリアルタイムコラボが可能。
- Web Speech API + Clova / Kakao / VOICEVOX / Coeiroink で多言語音声が自然に。
- Coqui XTTS、ElevenLabs、Suno で AI オーディオが即使える。
あとはツールを選んで作品を作るだけだ。この記事がその選択のスタートラインになることを願う。
参考 / References
- Web Audio API W3C Spec — [https://www.w3.org/TR/webaudio/](https://www.w3.org/TR/webaudio/)
- MDN Web Audio API — [https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
- AudioWorklet MDN — [https://developer.mozilla.org/en-US/docs/Web/API/AudioWorklet](https://developer.mozilla.org/en-US/docs/Web/API/AudioWorklet)
- Tone.js — [https://tonejs.github.io/](https://tonejs.github.io/)
- Howler.js — [https://howlerjs.com/](https://howlerjs.com/)
- Pizzicato.js — [https://alemangui.github.io/pizzicato/](https://alemangui.github.io/pizzicato/)
- WaveSurfer.js — [https://wavesurfer-js.org/](https://wavesurfer-js.org/)
- Peaks.js (BBC) — [https://github.com/bbc/peaks.js](https://github.com/bbc/peaks.js)
- Meyda — [https://meyda.js.org/](https://meyda.js.org/)
- Faust — [https://faust.grame.fr/](https://faust.grame.fr/)
- Csound on Web — [https://csound.com/web.html](https://csound.com/web.html)
- WebRTC — [https://webrtc.org/](https://webrtc.org/)
- WebTransport — [https://developer.mozilla.org/en-US/docs/Web/API/WebTransport_API](https://developer.mozilla.org/en-US/docs/Web/API/WebTransport_API)
- Web Speech API — [https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API)
- Coqui TTS — [https://github.com/coqui-ai/TTS](https://github.com/coqui-ai/TTS)
- ElevenLabs — [https://elevenlabs.io/](https://elevenlabs.io/)
- Suno — [https://suno.com/](https://suno.com/)
- ネイバー Clova Voice — [https://www.ncloud.com/product/aiService/css](https://www.ncloud.com/product/aiService/css)
- Kakao i Open Builder — [https://i.kakao.com/](https://i.kakao.com/)
- VOICEVOX — [https://voicevox.hiroshiba.jp/](https://voicevox.hiroshiba.jp/)
- Coeiroink — [https://coeiroink.com/](https://coeiroink.com/)
현재 단락 (1/400)
2026年5月現在、「ブラウザでオーディオ」という言葉の重みは5年前とまったく違う。