No description
  • JavaScript 60.5%
  • CSS 32.7%
  • HTML 6.8%
Find a file
2026-05-25 19:26:26 +09:00
icons first commit 2026-05-25 19:26:26 +09:00
offscreen first commit 2026-05-25 19:26:26 +09:00
popup first commit 2026-05-25 19:26:26 +09:00
background.js first commit 2026-05-25 19:26:26 +09:00
manifest.json first commit 2026-05-25 19:26:26 +09:00
README.md first commit 2026-05-25 19:26:26 +09:00

SonicControl - タブ別音量・EQコントローラー

SonicControl は、Google Chrome の各タブごとに個別の音量調整最大600%ブースト)および 5バンドイコライザーEQを適用できる、高機能で美しい Chrome 拡張機能です。 Manifest V3 に完全準拠し、Service Worker と Offscreen Document を組み合わせた最新かつ安定した音声キャプチャ・デジタル信号処理DSPアーキテクチャを採用しています。


🌟 主な機能

  1. 個別音量ブースト (0% 〜 600%)
    • 音量の小さい動画やオーディオファイルを、音割れを抑えながら最大6倍600%)まで増幅可能です。
  2. 5バンドグラフィックイコライザー
    • 以下の5つの周波数帯域を -12dB から +12dB の範囲で微調整できます:
      • 60 Hz (低音域 / Bass)
      • 230 Hz (中低音域 / Low-Mid)
      • 910 Hz (中音域 / Mid)
      • 4 kHz (中高音域 / High-Mid)
      • 14 kHz (高音域 / Treble)
  3. 音響プリセット機能
    • 音楽ジャンルや用途に合わせた 8 種類のプリセットを即座に適用できます:
      • Default (フラット)
      • Bass Boost (重低音強化)
      • Vocal Booster (ボーカル強調)
      • Rock (ロック)
      • Pop (ポップ)
      • Jazz (ジャズ)
      • Classic (クラシック)
      • Custom (ユーザー独自のイコライザー設定)
  4. ミュート & 一括制御
    • ワンクリックでミュートの切り替えや、タブのオーディオキャプチャの開始・解除が可能です。
  5. 設定の自動保存
    • タブごとの音量やイコライザーの設定、プリセットの選択状態は chrome.storage.local を使用して自動的にブラウザに保存され、再起動後も維持されます。
  6. プレミアムなデザイン (ネオン調ダークテーマ & ガラスモーフィズム)
    • 美しいグラデーション、滑らかなアニメーション、半透明のガラス効果を採用し、極めてモダンでプレミアムなユーザーインターフェースを提供します。

🛠️ 技術スタック & アーキテクチャ

Chrome の Manifest V3 仕様では、バックグラウンドの Service Worker 内で直接オーディオ再生や AudioContext を扱うことができません。本拡張機能では、この制限を克服するために以下の高度なアーキテクチャを採用しています。

[ Popup UI (popup.js) ]
       │
       │ (メッセージ通信)
       ▼
[ Service Worker (background.js) ] 
       │ 
       ├─► chrome.tabCapture.getMediaStreamId() でストリームIDを取得
       │
       ▼ (一時ストリームIDを転送)
[ Offscreen Document (offscreen.js) ]
       │
       ├─► getUserMedia() でタブのオーディオストリームをキャプチャ
       ├─► Web Audio API (AudioContext) の構築
       │     └─► GainNode (音量制御 / ブースト)
       │     └─► BiquadFilterNode (5バンドイコライザー)
       │     └─► Destination (スピーカー出力)
       ▼
[ スピーカー / ヘッドホン ]

技術的な特徴

  • Service Worker でのストリームID生成: セキュリティ上、chrome.tabCapture.getMediaStreamId() はユーザーアクションに紐づく Service Worker または Popup から呼び出す必要があります。本拡張機能では Service Worker 側で安全に呼び出しを行います。
  • Offscreen Document での Web Audio 処理: バックグラウンドでの DOM 操作が制限される Manifest V3 において、offscreen 規格(理由: USER_MEDIA)を利用して非表示のオーディオコンテキストを生成し、安定したノイズのない音声処理パイプラインを実現しています。
  • Ping/Pong ハンドシェイク: Offscreen Document の起動完了とストリームIDの受け渡しタイミングを厳密に制御し、起動失敗やデッドロックを防ぐ堅牢な同期処理を行っています。

📂 ディレクトリ構造

volume_controller/
├── manifest.json              # 拡張機能のマニフェストファイル (Manifest V3)
├── background.js              # Service Worker (メッセージ中継、ストリームID生成)
├── icons/                     # アプリケーションアイコン群
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── offscreen/                 # 音声処理コア (Offscreen Document)
│   ├── offscreen.html
│   └── offscreen.js           # Web Audio API を使ったデジタル信号処理 (DSP)
└── popup/                     # ユーザーインターフェース (UI)
    ├── popup.html             # HTML5 セマンティック構造
    ├── popup.css              # ガラスモーフィズム / CSSカスタムプロパティ
    └── popup.js               # ポップアップ UI ロジックとバックグラウンド通信

🚀 インストール方法(開発者モードでの手動インストール)

本拡張機能は、Chrome ウェブストアを経由せずに以下の手順でローカル環境にインストールできます。

  1. プロジェクトの準備

    • 本リポジトリ(またはフォルダ volume_controller)をお手持ちの PC の任意のディレクトリに配置します。
  2. Chrome の拡張機能管理画面を開く

    • Google Chrome を起動し、アドレスバーに chrome://extensions/ を入力して Enter キーを押します。
  3. デベロッパーモードを有効にする

    • 拡張機能管理画面の右上にある 「デベロッパー モード」 のトグルスイッチを オン にします。
  4. フォルダを読み込む

    • 画面の左上に表示される 「パッケージ化されていない拡張機能を読み込む」 ボタンをクリックします。
    • ファイル選択ダイアログが表示されるので、本プロジェクトのルートディレクトリである volume_controller フォルダを選択して読み込みます。
  5. インストールの完了

    • 拡張機能の一覧に 「SonicControl」 が表示されればインストールは成功です。
    • Chrome のツールバーにあるパズルピースのアイコン拡張機能メニューから、「SonicControl」をピン留めすると便利にアクセスできます。

📖 使い方

  1. オーディオの再生

    • YouTube や任意のウェブサイトで、音楽や動画の再生を開始します。
  2. 拡張機能の起動

    • 音声が流れているタブを表示した状態で、ツールバーの SonicControl アイコン をクリックします。
  3. 制御の有効化

    • ポップアップが表示されたら、「このタブの音声制御を有効にする」 ボタンをクリックします。
    • 初回起動時や切り替え時に、ブラウザ下部に「このタブは共有されています」というバーが表示されることがありますが、これは Chrome の仕様によるもので、音声信号はすべてお使いの PC ローカル上のみで処理されます。外部サーバーへの送信は一切行われません。
  4. 調整

    • 音量スライダー: 0% から最大 600% まで音量をスライドして調整できます。
    • イコライザースライダー: 60Hz 〜 14kHz の各帯域を上下にドラッグして好みの音質に変化させます。
    • プリセット: ドロップダウンから Bass BoostVocal Booster など好みの音響設定を選択できます。
  5. 制御の解除

    • 拡張機能による処理を完全に停止し、ブラウザ本来の標準出力に戻したい場合は、ポップアップ右上の 「制御解除」 ボタン(または電源アイコン)をクリックします。

⚠️ 既知の制限事項

  • アクティブタブの制約: Chrome のセキュリティモデルにより、音声キャプチャを開始できるのは「現在ユーザーが操作している(アクティブな)タブ」のみです。バックグラウンドで隠れているタブから直接キャプチャを開始することはできません。キャプチャを開始したいタブを一度アクティブにしてから拡張機能を開いてください。
  • 拡張機能無効化時の動作: 本拡張機能によるキャプチャ中は、ブラウザ標準の一部音声出力ルーティング(例: 一部の Chromecast 送信デバイス)に干渉する可能性があります。その場合は「制御解除」を行って標準出力に戻してください。

📄 ライセンス

本プロジェクトは MIT ライセンスの下で提供されています。商用・個人利用を問わず、自由に変更・配布が可能です。