2026年5月12日 · 技術解説

SiteTuneで使われているWebAudio API入門

SiteTuneは、ブラウザだけで音楽を合成・再生する仕組みを使っています。その心臓部は「WebAudio API」と呼ばれる、モダンブラウザに標準搭載された音声合成エンジンです。この記事では、SiteTuneでどのようにWebAudio APIが使われているか、ざっくり解説します。

WebAudio APIとは

WebAudio APIは、JavaScriptからブラウザの音声処理エンジンにアクセスできるAPIです。MP3やWAVを再生するだけでなく、リアルタイムに音を合成したり、エフェクトをかけたりできます。

主な特徴:

  • サンプル単位（44.1kHz / 48kHz）で精密な音声生成が可能
  • 低遅延（数ms以下）でリアルタイム処理
  • オシレータ・フィルタ・コンプレッサ・リバーブ等のノードを組み合わせる
  • HTML5標準なので追加プラグイン不要

基本概念: AudioContext と Node

WebAudio APIでは、まず AudioContext という「音声処理のコンテキスト」を作ります:

const audioCtx = new AudioContext();

その上で、音を作る・加工する各種ノードを生成し、それらをグラフ状につないでいきます:

const osc = audioCtx.createOscillator();   // 音源
const gain = audioCtx.createGain();        // 音量調整
osc.connect(gain).connect(audioCtx.destination);

このように、「音源 → 加工 → 出力」というパイプラインを組むのがWebAudioの基本パターンです。

SiteTuneでの使い方

SiteTune（HTMLSong WPプラグイン）では、以下のようなノード構成で音楽を合成しています:

1. オシレータ（音源）

サイン波・矩形波・のこぎり波・三角波の4種類の基本波形を、用途に応じて使い分けています。例えば:

  • ベース — のこぎり波（saw） + 矩形波（square）の重ね
  • キック — サイン波のピッチスウィープ
  • ハイハット — 4つの非調和な矩形波 + ノイズ

2. フィルタ（音色加工）

BiquadFilterNode を使って、ローパス / ハイパス / バンドパスフィルタをかけています。特にレゾナント（Q値の高い）ローパスフィルタは、シンセ音の「鳴き」を作る上で必須です:

const filter = audioCtx.createBiquadFilter();
filter.type = "lowpass";
filter.frequency.value = 800;
filter.Q.value = 8;  // 高いQ = レゾナンス強

3. エンベロープ（時間変化）

音は鳴り始め（Attack）から終わり（Release）まで、音量や音色が時間変化します。WebAudio APIでは setValueAtTime や linearRampToValueAtTime でこの時間変化を表現します:

// 0秒で0 → 0.01秒で1.0 → 0.5秒で0
gain.gain.setValueAtTime(0, t);
gain.gain.linearRampToValueAtTime(1.0, t + 0.01);
gain.gain.linearRampToValueAtTime(0, t + 0.5);

SiteTuneのキックドラムは、このエンベロープと周波数スウィープを組み合わせて「ドンッ」という音を合成しています。

4. リバーブ（残響）

ConvolverNode にIRファイル（Impulse Response）を読み込ませることで、リアルな残響をシミュレートできます。SiteTuneは小さなIRファイル（190KB）を使って、ホールっぽい余韻を加えています。

5. ミキシング

各楽器の GainNode をマスター GainNode に集約し、最終的に audioCtx.destination（スピーカー出力）に接続します。マスター音量はUIのスライダーから操作できます。

サンプルなしでここまで合成できる理由

SiteTune v2.0からは、SoundFont（SF2）ファイルを完全に廃止し、すべてWebAudioのオシレータで合成しています。プラグインサイズは20MB → 362KBと97%削減されました。

「リアルなピアノやギター」は出せませんが、デジタル系（Synthwave / Electropop / Techno / Ambient）の音色なら、サンプルレスでも十分なクオリティが出せます。「デジタル音 = 正解」というジャンル選定がポイントでした。

WebAudio APIの可能性

SiteTuneのような「サイトを音楽化する」だけでなく、WebAudioは以下のような応用ができます:

  • ブラウザだけで動くシンセサイザー
  • 音声波形のリアルタイム解析・可視化
  • ゲームの効果音（プロシージャル生成）
  • 音声通話アプリのノイズ除去
  • 音楽教育アプリ

HTML5標準なので、Chrome / Edge / Safari / Firefox すべてで動作します（Internet Explorerは非対応）。

もっと深く学ぶには

WebAudio APIに興味を持った方は、以下のリソースがおすすめです:

  • MDN: Web Audio API
  • 「Web Audio API入門」（書籍 / ネット記事多数）
  • SiteTuneプラグイン（HTMLSong WP）のソースコードもGPLv2で公開予定

ブラウザで音を合成できる、というのは案外多くの人が知らない事実です。SiteTuneを通じて、その可能性を体感していただければ嬉しいです。