イコライザーバー — 動きの伝え方辞典

equalizer bars / audio visualizer bars

イコライザーバー

上下する数本の縦バーだけで「いま音が鳴っている」を伝える状態インジケーター。実際の音量を解析しなくても、動いていること自体が再生中の合図になるのでCSSアニメーションだけで成立する。dots-pulse(入力中の3点)と違い、止まった状態が「停止中」という意味を持つ。

01 — Demo video

Play live →

02 — Prompt template

再生中インジケーターに equalizer bars(音量バー)を実装してください。

- 同じ高さの縦バーを {{bars}} 本、flexの下端揃え(align-items: flex-end)で並べる
- 各バーの中身は transform: scaleY() で伸縮させる。transform-origin: bottom を指定し、heightのアニメーションは使わない(毎フレームのレイアウト再計算を避ける)
- アニメーションは `animation: eq <周期> linear infinite alternate` の1本だけにする。基準の周期は {{speed}}ms
- 本ごとに周期を基準から最大 {{spread}}% ずらす。全本が同じ周期だと揃って点滅して見えるので必ずずらす
- 下端でも高さを {{floor}}% 残し、0にはしない
- 停止時は animation を外し、全バーを {{floor}}% の高さで静止させる
- バーは装飾なので aria-hidden にし、再生状態は再生ボタン側の aria-pressed / ラベルで伝える
- prefers-reduced-motion 時はアニメーションを止め、各バーを高さ違いのまま静止表示する(再生中であることは文字やアイコンで示す)

再生中インジケーターに equalizer bars(音量バー)を実装してください。

- 同じ高さの縦バーを {{bars}} 本、flexの下端揃え(align-items: flex-end)で並べる
- 各バーの中身は transform: scaleY() で伸縮させる。transform-origin: bottom を指定し、heightのアニメーションは使わない(毎フレームのレイアウト再計算を避ける)
- アニメーションは `animation: eq <周期> linear infinite alternate` の1本だけにする。基準の周期は {{speed}}ms
- 本ごとに周期を基準から最大 {{spread}}% ずらす。全本が同じ周期だと揃って点滅して見えるので必ずずらす
- 下端でも高さを {{floor}}% 残し、0にはしない
- 停止時は animation を外し、全バーを {{floor}}% の高さで静止させる
- バーは装飾なので aria-hidden にし、再生状態は再生ボタン側の aria-pressed / ラベルで伝える
- prefers-reduced-motion 時はアニメーションを止め、各バーを高さ違いのまま静止表示する(再生中であることは文字やアイコンで示す)

再生中インジケーターに equalizer bars(音量バー)を実装してください。

- 同じ高さの縦バーを {{bars}} 本、flexの下端揃え(align-items: flex-end)で並べる
- 各バーの中身は transform: scaleY() で伸縮させる。transform-origin: bottom を指定し、heightのアニメーションは使わない(毎フレームのレイアウト再計算を避ける)
- アニメーションは `animation: eq <周期> linear infinite alternate` の1本だけにする。基準の周期は {{speed}}ms
- 本ごとに周期を基準から最大 {{spread}}% ずらす。全本が同じ周期だと揃って点滅して見えるので必ずずらす
- 下端でも高さを {{floor}}% 残し、0にはしない
- 停止時は animation を外し、全バーを {{floor}}% の高さで静止させる
- バーは装飾なので aria-hidden にし、再生状態は再生ボタン側の aria-pressed / ラベルで伝える
- prefers-reduced-motion 時はアニメーションを止め、各バーを高さ違いのまま静止表示する(再生中であることは文字やアイコンで示す)

03 — Params

bars(バーの本数) — 範囲 3〜12 / 初期 5
5〜7本が定番。3本だと記号的になり、10本を超えると隣のラベルより主張してしまう。
speed(基準の周期 ms) — 範囲 100〜600 / 初期 220
1本が下端から上端まで動く時間。180〜260msで音楽のノリに見える。400msを超えると呼吸のような落ち着いた印象。
spread(本ごとの周期差 %) — 範囲 0〜60 / 初期 25
0にすると全本が揃って上下し「音」ではなく「点滅」に見える。20〜35%でほどよくバラける。
floor(最低の高さ %) — 範囲 0〜60 / 初期 15
下端でも残す高さ。0だとバーが消えて本数が読めなくなる。10〜20%が下限の目安。

04 — Vocab

animation-direction: alternate — 往路の次に復路を再生する指定。上がって下がるだけの動きならkeyframesはfrom/toの2つで足りる。
scaleY — 縦方向の拡縮。heightのアニメーションと違いレイアウト計算が走らないので、細いバーを何本も同時に動かしても軽い。
transform-origin: bottom — 変形の基準点。バーは下端を固定して伸ばすのでbottomを指定する。既定のcenterのままだと上下に同時に伸びて棒グラフに見えない。
周期の非同期化(desync) — 本ごとに周期をずらして全体が同じ瞬間に揃わないようにすること。揃うと「音」ではなく「点滅」に見える。

05 — NG → OK examples

言い方: 「「音楽が鳴ってる感じのバーのアニメーション付けて」」

なぜNG: 本数も速さも決まらないうえ、全本を同じ周期で動かす実装が返ってきやすい。揃って上下すると音ではなく点滅に見える。heightを直接アニメーションさせてカクつく実装や、停止時の見た目が未定義のままになるのもよくある。

言い方: 「「equalizer barsを5本、scaleY + transform-origin: bottomで実装。基準220ms・linear・infinite alternate、本ごとに周期を最大25%ずらす。下限は15%残し、停止時はanimationを外して15%で静止。バーはaria-hidden」」

なぜOK: 本数・周期・ばらつき・下限・停止時の状態まで数値で決まっている。「heightではなくscaleY」の一言がカクつきを防ぎ、aria-hiddenの指定でスクリーンリーダーに無意味な読み上げが流れるのも防げる。