Spv 2 Side Panel Visualiz

Turn any music site into a studio-grade meter bridge.

No matter your scene — mainstream streaming, indie, DJ, or live coding — SPV-2 has you covered. Works out of the box on 10+ music sites including YouTube, Spotify, SoundCloud, Beatport, and Strudel.

Want to use SPV-2 on other sites? Enable "All websites" in Settings > Advanced.

🎵 What is SPV-2?
SPV-2 is a Chrome extension that analyzes audio in real time and displays multiple instrument-style visualizations in Chrome's side panel. No installs, no DAW, no tab switching — just click and see the sound.

🎛️ Features
• Oscilloscope — Waveform (W) and Lissajous (XY) modes with adjustable time/vertical scale and auto trigger
• Spectrum Analyzer — 32-band logarithmic FFT with peak hold, segmented LED or solid bar styles
• Chromagram — Polyphonic pitch class detection with piano-roll keyboard and Note Flow scrolling display
• BPM Detection — Spectral flux onset detection with autocorrelation tempo estimation
• Key Detection — Chroma-based key estimation with Camelot notation for DJs
• Track Info — Track title, channel name, BPM, and key in one glance
• 30+ Themes — Built-in palettes plus a curated set derived from Strudel's editor themes
• Customizable Layout — Show/hide any panel, minimize sections, adjust settings per module

🎨 Themes Built for Every Mood
SPV-2 ships with the original lineup — Default, Neon, Monochrome, Amber, Lemon, Phosphor, Ice, Sakura, Light and more — and adds a wide selection of palettes derived from the live-coding ecosystem (Dracula, Tokyo Night, Gruvbox, Nord, Solarized, and many more). Pick a look that matches your track, your stream, or your late-night listening session.

🟣 Live Coding & Algorave Friendly
SPV-2 plays nicely with browser-based live coding environments. When you capture a Strudel tab, SPV-2 can auto-sync its visualizer theme to Strudel's current editor theme — your spectrum, oscilloscope and chromagram instantly match the colors on stage. One toggle, zero setup.
If you're not a live coder, the new theme palettes alone make this update worth grabbing.

🔒 Zero Interference
SPV-2 never touches the page. No content scripts, no DOM injection, no ads, no tracking. Audio is captured via Chrome's tabCapture API and processed entirely within the extension.

🎧 Built for Music Listeners
Whether you're a DJ checking BPM and key during a live set, a producer analyzing frequency balance, a live coder watching your patterns light up the spectrum, or a curious listener who wants to see the music — SPV-2 gives you a studio-grade view without leaving your browser.

⚡ Technical Highlights
• Manifest V3 compliant
• Offscreen Document for audio processing
• 30 fps real-time rendering
• Automatic resource cleanup on panel close, tab close, or navigation away

🔑 Permissions Explained
• tabCapture: Required to capture audio from the active tab
• offscreen: Required for audio processing (Web Audio API)
• sidePanel: Required to display the visualizer
• storage: Required to save your settings and theme preference
• tabs / activeTab: Required to detect supported sites
• scripting: Required only on Strudel to read the editor's theme name from the page's localStorage when Auto-sync is enabled
• Host permissions: Required for each supported music site — SPV-2 only uses these to capture tab audio, no data is collected or sent

📋 What's New

### v1.2.0 — 2026-05-01
• Auto-sync with Strudel — When capturing a Strudel tab, SPV-2 can match its visualizer theme to Strudel's current editor theme automatically
• 30+ themes — A big jump in look-and-feel options, with new palettes derived from Strudel's editor themes (Dracula, Tokyo Night, Gruvbox, Nord, Solarized, and more)
• Theme picker reorganized — Built-in and Strudel-derived themes are grouped in the dropdown for easier browsing
• Light theme rendering — Tokyo Night Light, Solarized Light and other bright palettes now render with proper contrast
• Various polish and stability improvements

### v1.1.0 — 2026-04-10
• Multi-site support — works on 10+ music sites including YouTube, Spotify, SoundCloud, Beatport, and Strudel
• "All websites" mode — Enable in Settings > Advanced to use SPV-2 on any site with audio
• Oscilloscope V Scale — x0.5 / x1 / x2 / x4 vertical zoom for both Waveform and XY modes
• Bilingual confirmation modal before Chrome's permission dialog
• Spectrum analyzer frequency label fix (16k → 20k) and button width stability improvements

### v1.0.0 — 2026-04-07
• Initial Chrome Web Store release with oscilloscope, spectrum analyzer, chromagram, BPM/key detection, and 10 built-in themes

———————————————————
🇯🇵 日本語

あらゆる音楽サイトを、スタジオグレードのメーターブリッジに。

メジャーなストリーミングからインディー、DJ、ライブコーディングまで — SPV-2 はあなたのシーンをカバーします。YouTube、Spotify、SoundCloud、Beatport、Strudel など 10 以上のサイトにすぐ対応。

他のサイトでも使いたい場合は、設定 > Advanced で「All websites」を有効にしてください。

🎵 SPV-2 とは？
SPV-2 は、ブラウザのオーディオをリアルタイム解析し、Chrome のサイドパネルに計測器スタイルのビジュアライザーを表示する拡張機能です。インストール不要、DAW 不要、タブ切り替え不要 — クリックするだけで音が見えます。

🎛️ 機能
• オシロスコープ — 波形 (W) とリサージュ (XY) モード、タイムスケール・垂直スケール調整、オートトリガー
• スペクトラムアナライザー — 32バンド対数 FFT、ピークホールド、セグメント LED / ソリッドバー
• クロマグラム — ポリフォニック音高検出、ピアノロールキーボード、Note Flow スクロール表示
• BPM 検出 — スペクトルフラックスによるオンセット検出 + 自己相関テンポ推定
• キー検出 — クロマベースのキー推定、DJ 向け Camelot 表記
• トラック情報 — 曲名、チャンネル名、BPM、キーをひと目で確認
• 30 以上のテーマ — 標準パレットに加え、Strudel エディタのテーマ群から派生したパレットを多数収録
• カスタマイズ可能なレイアウト — パネルの表示/非表示、最小化、モジュールごとの設定

🎨 シーンに合わせて選べるテーマ
標準ラインナップ（Default、Neon、Monochrome、Amber、Lemon、Phosphor、Ice、Sakura、Light ほか）に加え、ライブコーディング環境由来の豊富なパレット（Dracula、Tokyo Night、Gruvbox、Nord、Solarized ほか）を収録。曲・配信・深夜のリスニングに合わせて、見た目を自由に切り替えられます。

🟣 ライブコーディング / Algorave 対応
ブラウザ上のライブコーディング環境とも好相性。Strudel のタブをキャプチャすると、SPV-2 はビジュアライザーのテーマを Strudel の現在のエディタテーマに自動同期できます。スペアナ、オシロ、クロマグラムが即座にステージのカラーと揃う、トグル一つで設定完了。
ライブコーディングをしない方も、新しいテーマパレットだけでもアップデートする価値があります。

🔒 ゼロ干渉
SPV-2 はページに一切干渉しません。コンテンツスクリプトなし、DOM 注入なし、広告なし、トラッキングなし。音声は Chrome の tabCapture API でキャプチャされ、拡張機能内部でのみ処理されます。

🎧 音楽リスナーのために
ライブセットで BPM とキーを確認する DJ、周波数バランスを分析するプロデューサー、自分のパターンがスペアナを彩るのを眺めるライブコーダー、音を視覚的に楽しみたいリスナー — SPV-2 はブラウザを離れることなく、スタジオグレードの表示を提供します。

⚡ 技術的な特徴
• Manifest V3 準拠
• Offscreen Document によるオーディオ処理
• 30fps リアルタイムレンダリング
• パネル閉鎖・タブ閉鎖・ページ遷移時の自動リソース解放

🔑 権限について
• tabCapture: アクティブタブの音声をキャプチャするために必要
• offscreen: オーディオ処理（Web Audio API）に必要
• sidePanel: サイドパネルにビジュアライザーを表示するために必要
• storage: 設定やテーマの保存に必要
• tabs / activeTab: 対応サイトの検出に必要
• scripting: Auto-sync 有効時、Strudel でページの localStorage からエディタのテーマ名を読み取るためにのみ使用
• ホスト権限: 対応する各音楽サイトに必要 — タブ音声のキャプチャにのみ使用し、データの収集・送信は一切行いません

📋 アップデート履歴

### v1.2.0 — 2026-05-01
• Strudel との自動同期 — Strudel のタブをキャプチャ中、Strudel の現在のエディタテーマに合わせて SPV-2 のテーマを自動適用
• 30 以上のテーマに拡張 — Strudel エディタのテーマ群から派生したパレットを多数追加（Dracula、Tokyo Night、Gruvbox、Nord、Solarized ほか）
• テーマピッカーの整理 — ドロップダウンを「Built-in」と「Strudel」にグループ化して見つけやすく
• ライトパレット表示の改善 — Tokyo Night Light、Solarized Light などの明るいテーマでも適切なコントラストで描画
• 各種ポリッシュと安定性の改善

### v1.1.0 — 2026-04-10
• マルチサイト対応 — YouTube、Spotify、SoundCloud、Beatport、Strudel など 10 以上のサイトに対応
• 「All websites」モード — 設定 > Advanced で有効化、対応サイト以外でも使用可能
• オシロスコープ V Scale — Waveform / XY 両モードで x0.5 / x1 / x2 / x4 の垂直ズーム
• Chrome の権限ダイアログ前にバイリンガル（EN/JP）の確認モーダルを表示
• スペアナ周波数ラベル修正（16k → 20k）、ボタン幅の安定性改善

### v1.0.0 — 2026-04-07
• Chrome ウェブストアでの初回リリース。オシロスコープ、スペクトラムアナライザー、クロマグラム、BPM/キー検出、10 種類の標準テーマを搭載