音の波形を見てみよう

Web Audio APIで440 Hzなどの波をCanvasに描きます。初期状態は無音（ミュート）。マイクや個人情報は使いません。

まず試す：3操作

  1. 「開始」を押します。音は出ません。
  2. 周波数スライダーを220 Hzから440 Hzへ動かします。
  3. 波の山の間隔が狭くなるか観察します。止めるには「停止」を押します。
220 Hz

ミュートを解除すると小さな正弦波音が鳴ります。音量に注意してください。画面を離れると自動停止します。動きを減らす設定では自動アニメーションを止め、手動描画できます。

操作後はここを見る

横軸は時間に相当します。同じ表示幅で周波数を上げると山の間隔が短くなる想定です。実ブラウザ動作は未検証です。

しくみ

OscillatorNode → AnalyserNode → GainNode → スピーカー。解析はミュート前なので、無音でも波形を描けます。