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 = 'ko-KR'
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 = 'ko-KR'
utter.rate = 1.0
utter.pitch = 1.0

const voices = speechSynthesis.getVoices()
utter.voice = voices.find((v) => v.lang === 'ko-KR' && v.name.includes('Yuna'))

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: '안녕하세요. 클로바입니다.',
    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()