追記：公式ストアで公開しました（2026-10-29）
Chrome ウェブストア · Microsoft Edge アドオン
ストアから追加してYouTubeを再読み込みするだけで使えます。デベロッパーモードやZIP展開は不要です。全機能無料です。手動版を使っている場合は、重複を避けるため古いコピーを無効にしてください。
はじめに
ブラウザー拡張を作っていて、関連動画プレビューのシークバーを動かすと、ミュートしていたメイン動画の音が戻る不具合に遭遇しました。プレビューはまだ同じサムネイル内にあり、ユーザーも音を消していません。
原因を整理する鍵は、「再生中」と「音を出してよい」を別の状態にすることでした。この記事は、私たちが制作した無料拡張「Preview & Shorts Controls for YouTube」v0.5.2の実装と、Edgeでの実使用テストをもとにした開発メモです。第三者によるレビューではありません。日本語の翻訳・文章整理にはAIを使用しています。
1. pauseをユーザーの離脱と同一視しない
シークや読み込みの途中では、動画が一時停止することがあります。そこで video.paused だけを見て「プレビュー終了→メイン動画のミュート解除」と判断すると、カーソルがサムネイル内にある間もメインの音が割り込んできます。
v0.5.2では、関連プレビューに対する音声の許可を、DOMに記録した状態と動画の識別情報から判定します。audio-guard.js の audible() は、音声オン、対象の一致、音量が正であることを確認します。syncMain() は、この許可があるプレビューの存在を基準にメイン動画のミュートを維持し、paused は終了条件にしません。
状態を分けると、次のように整理できます。
| 状態 | プレビュー音声 | メイン音声 |
|---|---|---|
| 新しいカードにホバー | ミュート | 以前の状態 |
| 音声ボタンを押す | ユーザー指定音量 | 一時ミュート |
| 同じプレビュー内でシーク・読み込み | 音声許可を保持 | 一時ミュートを維持 |
| カードから離れる・プレビューをミュート | 音声許可を解除 | 保存した以前の状態に復元 |
2. 復元先も識別する
メイン動画を一時ミュートする前に、動画要素、ミュート状態、音量、ページURL、src 属性を保存します。復元時は要素が接続されていることと、URL・src が同じことを確認します。
SPAで別の動画へ移動した後に、古いセッションの音量を新しい動画へ書き戻さないためです。これは万能な動画ID判定ではありません。要素・URL・ソースの変更を使った、今回の実装での復元ガードです。
3. シークバー操作でカードのクリック処理を発火させない
サムネイルは通常リンクでもあります。追加したスライダーのクリックがカードへ伝わると、シークするつもりで動画ページへ移動したり、プレビューの後片付けが走ったりします。
volume-controller.js では、自分が追加したコントロールだけを識別し、そのポインター・クリックイベントをキャプチャ段階で処理しています。通常のサムネイルリンクはそのまま残します。離脱判定でも relatedTarget がカード・プレビュー・音量バー・シークバーの内側かを確認します。
スライダーのドラッグ中は目標時刻を保持し、ポインターを離した時点で確定します。ドラッグ以外の入力には120msの待ち時間を入れています。シークを確定した後も音声許可をリセットせず、同じ動画の再生を再開します。
4. 後からミュートするだけでは最初の音を防げなかった
別の問題として、ホバー直後に一瞬だけ音が出ることもありました。再生後のイベントを待ってミュートすると、その前に音が出る可能性があります。
今回の拡張では、ページ側の処理で対象プレビューを限定し、play() 呼び出し前と muted / volume の設定時に音声状態を調整しています。プロトタイプのラッパーを使うため、他の拡張やサイト変更との衝突に注意が必要です。すべての動画へ無条件に適用せず、対象の判定、元の記述子の保持、解除時の復元を入れています。一般的なサイト向けにそのまま移植できる方法ではありません。
5. SPAの後片付けも状態の一部
MutationObserverで追加要素を検知するだけでは不十分でした。ページ移動、タブ非表示、ウィンドウのフォーカス喪失、設定変更でもコントロールと音声許可を整理します。解除処理では監視の切断、イベントの解除、タイマーの消去も行います。
テストでは、通常のホバーだけでなく「音を出す→同じカード内で何度かシーク→外へ移動→別カードへ移動→SPAで別ページへ移動」を確認しました。ユーザーから報告された、関連動画の位置によって再現性が違うケースも比較しました。これは現在の環境での確認であり、YouTubeのすべてのプレイヤー状態を保証するものではありません。
実装と試用
実装は GitHubのextensionディレクトリ に公開しています。この記事で触れた中心ファイルは audio-guard.js と volume-controller.js です。ソースは確認用に公開しており、再利用用のオープンソースライセンスはまだ選定していません。
試す場合は 日本語のインストールガイド を参照してください。PC版Chrome・Edge向けで、現在は上記の公式ストアからインストールできます。GitHubのZIPによる手動インストールも選べます。広告ブロック機能ではなく、YouTubeの内部構造変更で動かなくなる可能性があります。
同じように「読み込み中」と「ユーザーの離脱」を混同して起きた不具合があれば、どの状態を分離したか教えてもらえると嬉しいです。製品の再現報告はGitHub Issuesでも受け付けています。