GODRICH
#cssアニメーション#ボタン#ローディング#トランジション#スクロール#ダッシュボード#実用ui#デザイントレンド

オーディオビジュアライザー 作り方 9選 — 棒からマイクまで

· Godrich · 9種 · 13分で読める

クリエイティブUI素のJSSCSS自動再生クリックメディア・プレスLP

オーディオビジュアライザー 作り方とは、鳴っている音の強さ・高さ・リズムを画面の動きに変える UI を、Web Audio API と CSS だけで作ることです。ここにある9点は棒スペクトラムからマイク入力まで、音源ファイルもライブラリもなしで、貼ればそのまま動きます。

棒スペクトラム01 audio-viz-bar-spectrum 円形スペクトラム02 audio-viz-radial-spectrum 波形オシロスコープ03 audio-viz-waveform-scope ビート反応パーティクル04 audio-viz-beat-particles 低音で跳ねる文字05 audio-viz-text-bounce エネルギーグラデーション背景06 audio-viz-gradient-energy ミニプレーヤーの波形バー07 audio-viz-track-peaks マイク入力の可視化08 audio-viz-mic-input 音量メーターとピークホールド09 audio-viz-level-meter

自動再生 · タイルを押すとその項目へ · すべて1つのzip

9点の並び順は部品の種類ではなく、音声 波形 表示 が画面へ変わっていく順です。まず同じスペクトラムを3つの読み方で — 棒の列で読み(01)、円周に並べ直し(02)、周波数を捨てて時間波形の線で読みます(03)。次は音が引き金になる2つ — 低音の跳ねでビートを捕まえて粒を弾けさせ(04)、帯域ごとに違う文字を跳ねさせます(05)。最後の4つは画面を染めて外とつなぐ — 全エネルギーで背景を染め(06)、トラック全体の山を数値として固定し(07)、マイクという外部入力を迎え(08)、数値のメーターで締めます(09)。ステージ色はインク5・オレンジ2・紙1・イエロー1で回して9マスの明るさが偏らないように合わせました。音を扱う隣人は動画プレイヤーコントロール9選、データを線で引く側はSVGグラフ描画9選、入力端子を線で繋ぐ操作はノードグラフ接続 UI 9選が担います。同じcanvasを手が描く側へ向ければサインとキャンバス描画になり、04の粒に重力と摩擦を与えると物理シミュレーションの側へ渡ります。

01棒スペクトラム

何が見えるか

周波数の区間ごとに棒が一本立ち、その区間の強さだけ scaleY で伸びます。棒は床に付いたまま伸びる要素なので transform-origin を下辺に置き、左半分を右半分の鏡像にした32本が負の遅延で順に波打ちます。

棒スペクトラム
新しいタブで開く

01 · 棒スペクトラム — 計測 累積面積 19.231% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

scaleYtransform-origingetByteFrequencyData

コードのどこを見るか

画面のほとんどが毎フレーム動くので累積面積 19.231% は 06 に次ぐ大きさで、動いたフレームも 23/23 と満点になり、音楽プレーヤーの再生表示やポッドキャストのヘッダーにそのまま使えます。

function draw() {
  analyser.getByteFrequencyData(freq);
  var sums = [0, 0, 0];
  for (var i = 0; i < bars.length; i++) {
    var band = Number(bars[i].getAttribute('data-band'));
    var v = freq[band + 1] / 255;
    bars[i].style.setProperty('--h', (0.06 + v * 0.94).toFixed(3));
    sums[Math.min(2, Math.floor(band / 6))] += v;
  }
  var top = sums.indexOf(Math.max(sums[0], sums[1], sums[2]));
  if (levelText.textContent !== BAND_NAMES[top]) { levelText.textContent = BAND_NAMES[top]; }
  timer = requestAnimationFrame(draw);
}

02円形スペクトラム

音声 波形 表示 円形 はどう描くか

同じ棒を48本、円周に立てて等分の角度ずつ回して並べます。回転の中心は棒ではなく円の中心なので transform-origin を半径のぶん下へずらし、scaleY は円に接した点から外側へだけ伸びます。

円形スペクトラム
新しいタブで開く

02 · 円形スペクトラム — 計測 累積面積 3.751% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

rotatetransform-origin--i

コードの読み方

実測では若い番号の棒ほど高く(先頭から 0.462・0.376・0.260・0.203)、内側に山が残る輪郭になるので、アルバムアートの周りに置いても中央が読み取れます。

.rs__bar {
  position: absolute; left: 50%; bottom: 50%; width: 4px; height: 24px; margin-left: -2px;
  border-radius: $r-xs;
  background: linear-gradient(180deg, $stage-yellow 0%, $color 100%);
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(var(--h, .12));
  transition: transform $duration $ease-out;
}

03波形オシロスコープ

どんな動きか

周波数ではなく時間波形をそのまま読み、重ねた2本の SVG polyline の points に毎フレーム書き込みます。canvas を使わない線なので色も太さも影も CSS のまま、プレビューでは固定波形の上を 56px のダッシュが一巡します。

波形オシロスコープ
新しいタブで開く

03 · 波形オシロスコープ — 計測 累積面積 2.893% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

polylinegetByteTimeDomainDatastroke-dasharray

どこを変えるか

動きが細い線に限られるのでフレーム当たりの変化の最大は 0.273% と9点で最も小さく、録音画面のリアルタイム波形や音声メモの入力表示に向きます。

  analyser.getByteTimeDomainData(wave);
  var step = Math.floor(wave.length / N);
  var line = [];
  var peak = 0;
  for (var i = 0; i < N; i++) {
    var v = (wave[i * step] - 128) / 128;
    peak = Math.max(peak, Math.abs(v));
    line.push(((i / (N - 1)) * W).toFixed(1) + ',' + (MID - v * (H / 2 - 6)).toFixed(1));
  }
  var p = line.join(' ');
  baseLine.setAttribute('points', p);
  flowLine.setAttribute('points', p);

04ビート反応パーティクル

何が見えるか

低音のエネルギーが自分の移動平均の1.3倍を超えた瞬間をビートとみなし、そのときだけ粒の層が一つ外へ弾けます。閾値を固定値でなく平均比で取るのは曲が静かになってもビートを取りこぼさないためで、220ms の最短間隔が一回のキックを二回数えるのを防ぎます。

ビート反応パーティクル
新しいタブで開く

04 · ビート反応パーティクル — 計測 累積面積 4.8% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

scaleopacityrequestAnimationFrame

コードのどこを見るか

4秒の実再生で5回のビートを拾い4つの層全部が順に弾けました — コアは常にその場に残るので、粒が散っても画面の主役は欠けません。

  // ビート判定: 低音のエネルギーが直前区間の移動平均 × 1.3 を超えた瞬間。
  // 固定しきい値(例: 「エネルギー 0.5 以上」)は曲が静かになるとビートをまったく拾えず、うるさくなると毎瞬をビートにする —
  // 平均に対する係数であってこそ、強弱が変わってもビートを逃さない。220ms の最小間隔は一度打ったキックを二度数えるのを防ぐ。
  if (bass > bassAvg * 1.3 && bass > 0.14 && now - lastBeatAt > 220) {
    lastBeatAt = now;
    beats += 1;
    beatText.textContent = String(beats);
    fire(rings[ringTurn % RING_COUNT], 'bp__ring--hit');
    fire(core, 'bp__core--hit');
    ringTurn += 1;
  }
  bassAvg += (bass - bassAvg) * 0.12;

05低音で跳ねる文字

画面で起きること

タイトルの文字 G・O・D・R・I・C・H を低・中・高の3帯域に振り分け、帯域ごとに別の文字が translateY と scale で跳ねます。実測では低音 0.357・中音 0.271・高音 0.216 と帯域の差がそのまま持ち上がりの差になり、文字は自分の位置で大きくなるので原点は中央のままです。

低音で跳ねる文字
新しいタブで開く

05 · 低音で跳ねる文字 — 計測 累積面積 9.328% · 動いたフレーム 20/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

translateYanimation-delayanimation-fill-mode

コードの読み方

文字は大きくなっても色は変えず位置だけが動くので、明るさの反転は起きません。

.tb__l {
  display: inline-block; font-size: clamp(44px, 12vw, 60px); line-height: 1; color: $color;
  transform-origin: 50% 50%;
  transform: translateY(calc(-18px * var(--j, 0))) scale(calc(1 + var(--j, 0) * .16));
  transition: transform $duration $easing;
}

06エネルギーグラデーション背景

どんな動きか

全エネルギーを色相角ひとつに変換し、@property で <angle> として登録した --hue を 210→340 度で回して背景を染めます。登録なしではカスタムプロパティが文字列扱いになり、グラデーションがぶつ切りに切り替わります — 実再生では強さ 63%・メーター 0.673 のとき背景は rgb(47,14,88) 系の紫へ傾きました。

エネルギーグラデーション背景
新しいタブで開く

06 · エネルギーグラデーション背景 — 計測 累積面積 54.717% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

@propertylinear-gradienthsl

どこを変えるか

画面の大部分がゆっくり動くので累積面積 54.718% は9点最大で、明度は 20%〜13% の狭い帯に収め、色相だけが動きます。

@property --hue {
  syntax: '<angle>';
  inherits: false;
  initial-value: 210deg;
}

@include stage($stage-ink);

.ge {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: $sp-4;
  width: 100%; max-width: 360px;
  padding: $sp-4; border-radius: $r-card;
  // グラデーションは --hue を使うこのパネル自身に敷かれる — inherits: false で登録したので
  // 値を使う要素がその値を直接持たなければならない (262 実測: 親に掛けると効かない)。
  background: linear-gradient(135deg, hsl(var(--hue) 72% 20%) 0%, hsl(calc(var(--hue) + 48deg) 62% 13%) 100%);
  transition: --hue $duration $ease-out;
}

07ミニプレーヤーの波形バー

何が見えるか

ページが開くとき OfflineAudioContext で4秒のバッファを一度だけレンダリングし、40列それぞれの最大振幅を先に引き出して山形を描きます。実測の先頭6列は 0.538・0.225・0.140・0.140・0.140・0.511 で、0.140 は下限として敷いた床の値です。

ミニプレーヤーの波形バー
新しいタブで開く

07 · ミニプレーヤーの波形バー — 計測 累積面積 5.867% · 動いたフレーム 22/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

clip-patharia-valuenowgrid-auto-flow

コードのどこを見るか

山はリアルタイム解析ではなく数値の配列なのでスクロールしても崩れず、再生位置は role="progressbar" の aria-valuenow にも同じ数字で入ります。

offline.startRendering().then(function (buf) {
  var data = buf.getChannelData(0);
  var slice = Math.floor(data.length / COLS);
  for (var c = 0; c < COLS; c++) {
    var peak = 0;
    for (var k = c * slice; k < (c + 1) * slice; k++) {
      var v = Math.abs(data[k]);
      if (v > peak) { peak = v; }
    }
    peaks.push(Math.max(.14, peak));
  }
  for (var i = 0; i < COLS; i++) {
    var a = document.createElement('i');
    a.className = 'tp__bar';
    a.style.setProperty('--h', peaks[i].toFixed(3));
    baseBars.appendChild(a);
    var b = document.createElement('i');
    b.className = 'tp__bar';
    b.style.setProperty('--h', peaks[i].toFixed(3));
    litBars.appendChild(b);
  }
});

08マイク入力の可視化

画面で起きること

getUserMedia で許可を求め、許されれば声が、拒否されれば 220Hz の合成音が同じリングを動かします。実測では許可時の棒は 0.121〜0.446 と粗く揺れ、拒否時は 0.831 を頂点に一本調子で、音源が変わったことが輪郭だけで分かります。

マイク入力の可視化
新しいタブで開く

08 · マイク入力の可視化 — 計測 累積面積 2.504% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

getUserMediaaria-livecreateOscillator

コードの読み方

入力をスピーカーへ戻さないのはハウリング防止で、許可待ち・入力中・拒否の3状態は aria-live の文で読めます。

  var p = (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
    ? navigator.mediaDevices.getUserMedia({ audio: true })
    : Promise.reject(new Error('no mediaDevices'));
  p.then(function (stream) {
    micOn = true;
    var src = ctx.createMediaStreamSource(stream);
    src.connect(analyser); // スピーカーへ返さない — ハウリングが起きる
    statusEl.textContent = 'マイク入力中 — 話してみてください';
    running = true;
    timer = requestAnimationFrame(draw);
  }).catch(function () {
    // 拒否は正常な経路 — 画面が空にならないよう合成音が同じループをつなぐ。
    micOn = false;
    fallbackTone();
    statusEl.textContent = '許可されません — 合成音に切り替えました';
    running = true;
    timer = requestAnimationFrame(draw);
  });

09音量メーターとピークホールド

どんな動きか

RMS を測って12段のセグメント LED を下から点灯し、いちばん高く到達した段には線が一本 900ms とどまります。セグメントは12分割の grid で、その上を clip-path が下から満たしていくので、満ちる量が段を越えるたびに1段ずつ点灯し、数値は steps(1, end) のカットで切り替わります。

音量メーターとピークホールド
新しいタブで開く

09 · 音量メーターとピークホールド — 計測 累積面積 2.922% · 動いたフレーム 19/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

steps(1, end)grid-template-rowstransition

どこを変えるか

動きは満ちていく区間と線が下りる区間に限られるので動いたフレームは 19/23 と9点で最も少なく、録音ソフトの入力レベルや配信画面のメーターに合います。

  // RMS — 二乗平均平方根。振幅の平均ではなくエネルギーの平均なのでメーターの目盛りと合う。
  analyser.getByteTimeDomainData(wave);
  var sum = 0;
  for (var k = 0; k < wave.length; k++) {
    var v = (wave[k] - 128) / 128;
    sum += v * v;
  }
  var rms = Math.sqrt(sum / wave.length);
  var frac = Math.min(1, rms * 3.4); // ×3.4 はメーターの目盛り補正 — 再生音量は変えない
  root.style.setProperty('--fill', (frac * 100).toFixed(1) + '%');
  // ピークホールド — より高い瞬間が来れば即座に上がり、900ms 留まってからゆっくり下りる。
  var now = performance.now();
  if (frac >= peakFrac) {
    peakFrac = frac;
    peakHoldUntil = now + 900;
    peak.classList.add('is-snap');
  } else if (now > peakHoldUntil) {
    peakFrac = Math.max(frac, peakFrac - 0.01);
    peak.classList.remove('is-snap');
  }
  peak.style.setProperty('--pkPx', (peakFrac * colWrap.clientHeight).toFixed(1) + 'px');

どこで壊れるか — 落とし穴

ここでいちばん時間を食ったのは、AnalyserNode が実際の再生中しか値を出さないという仕様そのものです。だからこの9点はどれも二つの経路を持っています — グリッドのプレビュー(.is-demo)は事前に計算したスペクトルの並びを CSS キーフレームで回し、再生ボタンが押された瞬間に JS がそのクラスを外して本物の Web Audio へ切り替わります。分けて書く理由は実測にあります — このサイトのレンダラーは Web Animations API でアニメーションの時計を直接進めて24枚を撮るので、requestAnimationFrame が描く値は一枚も撮られないのです。本物の音は人が押したときに鳴らし、撮られる静止画は CSS に任せる、という分担になりました。音源ファイルを置かないのも同じ設計から来ています — mp3 を配る代わりに OscillatorNode 4本(196・246.94・293.66・392 Hz)と GainNode で4拍ごとに和音が変わるコード進行をその場で合成するので、zip は軽いままです。なお AudioContext はユーザー操作の中で resume() しないと鳴らないので、再生ボタンの click の中で呼びます。

2つ目は 08 のフォールバックの音程と分解能の食い違いです。権限を拒否されたとき鳴らす 220Hz の正弦波は、fftSize 64 ではビンの幅が 750Hz になって棒に割り当てたビンに入らず、リングが沈んだままでした。fftSize を 256 に上げてビン幅 187.5Hz にすると 220Hz は読むビンに収まり、声の基本周波数も同じ範囲に来ます。

3つ目は 09 のメーターが止まって見える瞬間です。拍と拍の間は GainNode の包絡が毎回 0.02 まで減衰する区間なので、実測でも満ちる量 5.4%・表示 -36 dB まで下がります。壊れたのではなく音楽が休んでいるだけだと読めるよう、dB の数値を画面に残してあります。

もう一つ、プレビューのループの閉じ方にも実測が効いています。棒の波は負の遅延で位相をずらしています — 遅延が負なら2秒のループが端で自然に閉じますが、正の遅延だと撮影窓の終わりで棒が一斉に瞬間移動して、その継ぎ目が1枚に写り込みます。05 の文字だけは逆に正の遅延へ backwards を組み合わせ、遅延の間は 0% の静止姿勢を保たせて左から右へ波が走るようにしました。帯域ラベルやビート数の文字の交代は steps(1, end) のカットですが、ここへ fill-mode を付けると遅延の間に三つの文字が同じ枠に重なって写ります — 01 では実際に三枚の重なりがポスターに焼き付いたので、fill-mode を外して一枚に収めました。03 の流れるダッシュも、動かす総量を周期(56+124=180)と等しくして端で継ぎ目が出ないように閉じています。

08のマイク入力のように外から届いた信号を次の仕事へ渡す席は、n8n ワークフロー サンプルがノードでつないでいます。こうして二つの経路で揃えた9点のオリジナルは下の zip にあり、開くパスワードは 33t2w53s です。

3つのバリエーション

名前 変える値 感じ
広い飛散 04 の --fly: 84px を 110px に ビートの粒が輪の外まで大きく広がり、ヒーロー背景の余白が生きます
細かいビン 08 の analyser.fftSize = 256 を 512 に ビン幅が 93.75Hz になり、声の起伏がもっと多くの棒に現れます
長いピーク 09 の now + 900 を now + 1500 に 最高到達の線が長く残り、配信中の目標レベルが見やすくなります

AIプロンプト

バイブコーディングで可視化を1つ足すときは、見えるもの・二つの経路・制約を一度に固定すると書き直しが減ります。下は 01 を頼んだときの断片です。

棒スペクトラムを1枚作る。
見えるもの: 暗い舞台の上に bs__bar を32本、左半分は右の鏡像。棒は下辺を transform-origin に scaleY で伸びる。配色は linear-gradient(180deg, $subject-mint 0%, $stage-yellow 60%, #ff9d2f 100%)。
動き: プレビューは bsWave キーフレームを animation-delay: calc(var(--i) * -56ms) で位相をずらして回す。再生が押されたら .is-demo を外し、getByteFrequencyData の値で --h に 0.06〜1.0 を書く。
制約: 音源ファイルは置かない。OscillatorNode 4本(196・246.94・293.66・392 Hz)で4拍ごとに和音を変える。AudioContext はクリックの中で resume() する。
禁止: AnalyserNode が鳴っていない間に値を取ること。棒が上辺から伸びること。

位相をずらして を 同じ位相で に置き換えると32本が一斉に伸び縮みして波が消えるので、棒が揃ってしまったらまずこの1語を疑います。

アクセシビリティ

prefers-reduced-motion: reduce では9点すべてのループを止めて、状態の読み取れる1枚を残します。01 は区間番号で対称のスペクトルを1枚立て、02 は sin() の山形の輪を1周分、03 は流れるダッシュを止めた固定波形を見せます。04 は薄いハローとコアだけ、05 は跳ねない文字と帯域の凡例、06 は初期値 210deg の一色、07 は 60% まで塗った山と、その塗り終わりに立つピン、08 は止まった輪と状態文、09 は 30% の静止メーターと dB 表示で立ちます。音の聞こえない人には、01・02・05 が「低音・中音・高音」の帯域ラベル、03 が「静か・揺れ・大きな波」の状態、04 が拾ったビート数、06 がエネルギー%、07 が aria-valuenow の再生位置、09 が dB の数値を aria-live か固定テキストで出します。08 のマイク権限の拒否は catch の正常経路で、合成音が同じ輪を継ぐので画面が空になりません。光過敏への配慮として、プレビューの明暗の山は2秒に3回(1.5Hz)まで — 06 は明度を 20%〜13% の帯に収めたまま色相だけを2秒で1往復させ、WCAG 2.3.1 の閾値の内側に置きます。ラベル類の実測コントラストは、インク舞台でクリーム文字が 17.11:1・値の箱で 10.78:1、イエロー舞台でインク文字が 12.63:1、オレンジ舞台でインクが 5.5:1・dB 値の箱が 7.37:1、07 の青い再生ボタンの白文字が 4.53:1、08 の状態文がイエローの上で 7.72:1 です。07 の再生時刻表示も同じ物差しで再計測し、現在時刻の数字は本文の青ではなく一段濃い #0a4fe8(5.65:1) に、コロン区切りはインク 72%(6.85:1) に上げました。

FAQ

音源ファイルは本当に要りませんか

要りません。この9点は mp3 を1つも読まず、OscillatorNode 4本と GainNode でコード進行をその場で合成し(4拍ごとに和音が変わる)、07 の山形だけは OfflineAudioContext で同じ進行を先にレンダリングした数値から作ります。自分の曲に差し替えるときは fetch と decodeAudioData で AudioBufferSourceNode を analyser へ繋ぐだけで、描画側はそのまま動きます。音を鳴らさずリズムだけを匂わせたい場所なら、CSS キーフレーム アニメーションの短い動きで足ります。

マイクの許可ダイアログが出ないのはなぜですか

getUserMedia は HTTPS か localhost のような安全なコンテキストでしか動きません。実測では Chrome 53・Firefox 36・Safari 11・Edge 12・iOS Safari 11.0 から対応で、全世界サポートは 96.05%(部分対応 0.34%)です。file:// で開いたページでは navigator.mediaDevices 自体が無いので、08 はその場合も拒否と同じ経路で合成音に落ち、画面が空になることはありません。

音楽 ビジュアライザー は Safari でも動きますか

Web Audio API 自体は全世界 96.41% が完全対応ですが、Safari は 6 が初出で長らく webkit 接頭辞が必要でした — デモは window.AudioContext || window.webkitAudioContext の2段で受けます。気をつけるのは周辺機能で、06 の @property は Safari 16.4・Firefox 128 から、07 の OfflineAudioContext は Safari 14.1 からです(caniuse の Audio API・MDN 実測 2026-09-12)。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。