Web Audio API & ブラウザオーディオ 2026 — AudioWorklet / Tone.js / Howler.js / Wavesurfer / Peaks.js / Meyda / Faust / Csound / Web Speech 深掘りガイド

[ 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

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)

// 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 にエンコード可能

const audioEl = document.querySelector('audio')
const ctx = new AudioContext()
const source = ctx.createMediaElementSource(audioEl)
source.connect(ctx.destination)
// audioEl を再生すると ctx グラフを通って出力される

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() でリアルタイムスペクトルを取得

// 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)

import * as Tone from 'tone'

// ポリフォニックシンセ + リバーブ
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)

import { Howl, Howler } from 'howler'

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) // グローバルマスターボリューム

import Pizzicato from 'pizzicato'

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()

import WaveSurfer from 'wavesurfer.js'
import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.esm.js'

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,
  })
})

import Peaks from 'peaks.js'

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' })
})

import Meyda from 'meyda'

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()

import("stdfaust.lib");
process = fi.lowpass(3, hslider("Cutoff", 1000, 50, 20000, 1));

import { FaustAudioWorkletNode } from './lowpass.js'

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)

import { Csound } from '@csound/browser'

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()

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 など)で

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()

import { pipeline } from '@huggingface/transformers'

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)
// 再生...

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()

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)

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()

import { VoicevoxCore } from 'voicevox-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()