音連動ビジュアル
Web Audio API でアルペジオを鳴らし、周波数データを Canvas のバーグラフにリアルタイム反映。再生/停止ボタンで制御。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 音楽・オーディオ系サービスの演出
- Web Audio の導入デモ・教材
- 再生中であることを視覚で示す場面
- 避ける場面
- 自動再生させたい背景（ユーザー操作が必須）
- 音を出せない場が主な利用シーン
- 聴覚情報だけで意味を伝える設計
- 構成要素
- ビジュアライザ（canvas）
- 周波数バー
- 再生／停止ボタン
- 持っている状態
- 通常
- フォーカス
- 押下中
- キーボード
Tab で再生ボタンに到達・Enter/Space で再生／停止を切り替える。canvas は表示専用
- 支援技術
音は利用者操作で開始（自動再生しない）。ボタンは aria-pressed と文言（▶ 再生／■ 停止）で状態を伝える。canvas は role=img。音量は 0.07 と控えめ
- 動き
周波数 32本のバーを rAF で毎フレーム更新（中央＝低域）。停止時は高さ 4px の静止バー。押下で 0.96 縮小 100ms。動きは再生中だけ
デザインの要点
- AudioContext はボタンの click 内で作る。自動再生ポリシーで、操作の外で作ると suspended のまま音が出ない
- バーは低域（先頭の bin）を中央に置き左右対称に並べる。素直に並べると左端だけが高い片寄った絵になる
- 音は 0.18s のサイン波にアタック 10ms・指数減衰の包絡を付け、音量 0.07 に抑える。生の矩形波は耳に痛い
- 停止時は高さ 4px の静止バーを描き、ビジュアライザが「止まっている」ことを見せる。空の canvas は壊れて見える
コード（コピーして使えます）
<div class="stage">
<canvas id="viz" role="img" aria-label="再生中の周波数バー（低域が中央）"></canvas>
<button id="btn" class="play-btn" type="button" aria-pressed="false">▶ 再生</button>
</div>