Oscillator の4種類の波形を聴き比べる

Web Audio API の OscillatorNode は、4種類の基本波形（sine / square / sawtooth / triangle）を生成できます。同じ周波数でも波形が違えば音色は全く別物になります。この記事では、それぞれの特徴と音色の違い、そして使い分けの実例を解説します。

波形の種類と切り替え方

OscillatorNode の type プロパティに文字列で指定するだけで波形が切り替わります。

const osc = audioCtx.createOscillator();
osc.type = 'sine';      // 'sine' | 'square' | 'sawtooth' | 'triangle' | 'custom'
osc.frequency.value = 440;
osc.connect(audioCtx.destination);
osc.start();

1. Sine（サイン波）— もっとも純粋な音

数学的に純粋な単一周波数の波。倍音をほぼ含まないため、聴覚的には「柔らかい」「ホワッ」「フルートのような音」と表現されます。

• 音色イメージ: 笛・口笛・低域のサブベース
• 用途: ベースサブハーモニックの増強、効果音、ピュア音色のソフトメロディ
• 波形: 滑らかな波 y = sin(2πft)

サイン波は他の波形を「飾りなしで見せる」基準でもあり、シンセプログラミングではよく「基準音」として使われます。

2. Square（矩形波）— レトロゲーム風

瞬時に上下を切り替える波。奇数倍音（3次・5次・7次…）を多く含むため、「太い」「電子的」「ファミコン風」と表現されます。

• 音色イメージ: 1980年代のチップチューン、レトロゲーム音楽
• 用途: リードシンセ、サイバーパンク風BGM、低域の太いベース
• 波形: 完全にデジタル的なステップ波形

音量を上げると耳に強く感じる波形なので、Gain は控えめにすることをおすすめします。

3. Sawtooth（のこぎり波）— 倍音豊かなブラス系

すべての倍音を含む波形。1次基本波 + 2次 + 3次 + …と整数倍の倍音がすべて重なっています。聴覚的には「ブライト」「攻撃的」「ストリングス・ブラスっぽい」と表現されます。

• 音色イメージ: シンセブラス、シンセストリングス、ハードな80sシンセサウンド
• 用途: リード・パッド・ベース（ローパスで丸める）
• 波形: 直線的に上がり、一気に下がる「ノコギリ」状

のこぎり波 + レゾナントローパスフィルタの組み合わせは、シンセ音作りの王道パターンです。

4. Triangle（三角波）— 柔らかい矩形波

奇数倍音だけを含むのは矩形波と同じですが、倍音の減衰が早いため、矩形より「柔らかい」「ソフトなフルート」「マイルドなクラリネット風」と表現されます。

• 音色イメージ: 柔らかな笛、控えめなリード
• 用途: ベース、優しいメロディ、サイン波より少しキャラクターをつけたい場面
• 波形: ピラミッド型の繰り返し

波形と「倍音の含み方」

同じ440Hzでも、波形ごとに含まれる倍音のスペクトルが違うことが音色差の正体です。一般的なフーリエ展開でいうと:

つまり、倍音の数 × それぞれの強さ が音色を決めています。

聴き比べ用の簡単な実装

const audioCtx = new AudioContext();
const types = ['sine', 'square', 'sawtooth', 'triangle'];

function playWaveform(type) {
  const osc = audioCtx.createOscillator();
  const gain = audioCtx.createGain();
  osc.type = type;
  osc.frequency.value = 440;
  gain.gain.setValueAtTime(0, audioCtx.currentTime);
  gain.gain.linearRampToValueAtTime(0.2, audioCtx.currentTime + 0.05);
  gain.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 1.0);
  osc.connect(gain).connect(audioCtx.destination);
  osc.start();
  osc.stop(audioCtx.currentTime + 1.0);
}

types.forEach((t, i) => {
  const btn = document.createElement('button');
  btn.textContent = t;
  btn.onclick = () => playWaveform(t);
  document.body.appendChild(btn);
});

custom 波形 — 自作の波形を使う

type に 'custom' を指定し、setPeriodicWave() を使うことで、任意の倍音スペクトルを定義できます。

// 奇数倍音だけを使ったオリジナル波形
const real = new Float32Array([0, 1, 0, 0.3, 0, 0.1]);
const imag = new Float32Array(real.length);
const wave = audioCtx.createPeriodicWave(real, imag);

const osc = audioCtx.createOscillator();
osc.setPeriodicWave(wave);
osc.frequency.value = 440;
osc.connect(audioCtx.destination);
osc.start();

これでオルガン風・ベル風など、独自の音色を作り出せます。

実用的な使い分けガイド

シンセベース → sawtooth + ローパスフィルタ

のこぎり波の倍音をローパスで切り落とすことで、暖かい太いベースになります。

シンセリード → square or sawtooth + ビブラート

矩形波の強さ、のこぎりのブライトさを、ビブラート（周波数のゆらぎ）で表情豊かにします。

サブベース → sine

40-80Hz の低域はサイン波だけで十分。倍音は無いほうが体に響きます。

パッド → sawtooth ×2（デチューン）

2つののこぎり波を10〜20セント程度ずらして混ぜると、厚みのあるパッドサウンドに。

波形の選択は音楽性の出発点

シンセ音作りは「どの波形を選ぶか」から始まります。とりあえずまず sine で鳴らしてみて、次に sawtooth に変えてみる — それだけで「電子音」のキャラクターが大きく変わることを体感できます。

Web Audio API には他にも BiquadFilterNode（フィルタ）や ConvolverNode（リバーブ）など、波形を加工するためのノードがたくさん用意されています。次はフィルタの世界へ進みましょう。