ブラウザオーディオ処理のためのWeb Audio API検出

Web Audio API検出

Web Audio APIは、生成、処理、分析、空間化を含むブラウザでのオーディオ制御のための強力なシステムを提供します。オーディオノードによるモジュラールーティングアーキテクチャを使用します。

検出

const hasWebAudio = typeof AudioContext !== 'undefined'
  || typeof webkitAudioContext !== 'undefined';

AudioContextの作成

function createAudioContext() {
  const AudioCtx = window.AudioContext
    || window.webkitAudioContext;
  if (!AudioCtx) return null;

  const ctx = new AudioCtx();

  // サスペンド時にリジューム（自動再生ポリシー）
  if (ctx.state === 'suspended') {
    document.addEventListener('click', () => ctx.resume(), {
      once: true,
    });
  }

  return ctx;
}

オーディオノードタイプ

ノード	用途
OscillatorNode	トーン生成（サイン波、矩形波など）
GainNode	ボリューム制御
BiquadFilterNode	EQ、ローパス、ハイパスフィルター
AnalyserNode	可視化用FFTデータ
ConvolverNode	インパルスレスポンスを使用したリバーブ
DynamicsCompressorNode	ダイナミックレンジコンプレッション
PannerNode	3D空間オーディオポジショニング

簡単な可視化

const analyser = ctx.createAnalyser();
analyser.fftSize = 2048;
source.connect(analyser);
analyser.connect(ctx.destination);

const data = new Uint8Array(analyser.frequencyBinCount);

function draw() {
  analyser.getByteFrequencyData(data);
  // キャンバスにデータをレンダリング
  requestAnimationFrame(draw);
}
draw();

自動再生ポリシー

モダンブラウザはオーディオを再生する前にユーザージェスチャーを要求します。AudioContextはsuspended状態で開始し、ユーザーインタラクション後にリジュームする必要があります：

button.addEventListener('click', () => {
  audioContext.resume().then(() => {
    // オーディオがアクティブになった
  });
});