ビートビジュアライザー — リアルタイム音楽ビジュアライザー

マイクをライトショーに変換。ブラウザだけで動く5種類の美しいビジュアルエフェクト——インストール不要、アップロード不要。

無料で使う →

機能

パーティクル爆発

バスに連動したパーティクルが中央から飛び出す。オブジェクトプールで60fps安定動作。

サーキュラースペクトラム

360°のリング状周波数バー。振幅に応じて拡縮し、スムーズなグラデーションで彩色。

オシロスコープ波形

リアルタイム時間軸波形をグロー表示。光の強度は音量に比例。

ポーラー花弁

周波数データを極座標にマッピング。回転する花弁パターンを重層的に描画。

3Dリアクティブ球体

Three.jsの正二十面体ジオメトリを使用。FFTデータで頂点を変位させ、ビートに合わせて形態変化。

🔒

スクリーンウェイクロック

Wake Lock APIでビジュアライズ中の画面消灯を自動防止。停止時に解放。

使い方

1

スタートをクリック

点滅するスタートボタンをタップ。マイク許可を求めるプロンプトが表示されたら許可する。

2

音楽を流す

端末の近くで音楽を流すか歌う。ビジュアルがリアルタイムで音に反応する。

3

エフェクトを切り替える

下部の5つのドットをタップするかスペースキーでエフェクトを切り替え。スライダーで感度調整。

4

テーマを変更

🎨アイコン(右上)でネオンパープル・オーロラグリーン・サンセットオレンジ・ミニマルホワイトを選択。

5

フルスクリーンにする

キャンバスをダブルクリックで全画面表示。UIは3秒後に自動非表示になり没入感が増す。

よくある質問

ビートビジュアライザーは無料ですか?
完全無料。アカウント不要、サブスクリプション不要、アップロード不要——すべてブラウザ内でローカル動作。
マイクの音声は録音されますか?
されません。音声はブラウザ内のWeb Audio APIでリアルタイム処理するだけです。サーバーには何も送信されません。
3D球体の読み込みが少し遅いのはなぜですか?
Three.jsは3D球体モードに切り替えたときだけオンデマンドで読み込みます。他の4エフェクトの初期読み込みを高速に保つためです。
モバイルでも使えますか?
使えます。すべての操作は44px以上のタッチフレンドリー設計。小画面ではパーティクル数を自動で半減してスムーズなフレームレートを維持。
画面がすぐ暗くなってしまう場合は?
Screen Wake Lock APIで動作中の画面消灯を防止しています。ブラウザが未対応の場合はその機能が無効になるだけです。

← pudone! ホームへ戻る