JavaScript
Chrome
chrome-extension
YouTube
WebAudioAPI

YouTubeにパンコントロール機能を追加するChrome拡張を開発した

YouTubeのプレイヤーに直接UIを追加して音声のパンニング(左右の振り分け)を可能にするChrome拡張を作った。
■追記:現在はニコ生、OPENREC、SHOWROOMなど全11サイトに対応してます。

image.png

こんな感じで、なるべく画面に溶け込むように調整。
ここからダウンロードできる。

目的と特徴

複数の配信を同時に見るときに、画面の位置と音の位置を同期させることによって聞き取りやすくなるような気がする。
プレイヤーに直接コントローラーを埋め込むことで、素早く&直感的に使えるようにした。

使ったもの

  • Content Scripts

    • これによって画面内に要素を追加できる。
  • Web Audio API

  • jQuery

    • 要素の追加とリスナーをシンプルに記述するために。

実装のポイント

動画の場合、音声ソースはvideo要素を指定する。

content-script.js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var video = document.querySelector('video');
var audioSource = audioCtx.createMediaElementSource(video);

コントローラーは<input type="range">を使った。
rangeはデフォルトだと0〜100の値になっているのでmin='-1' max='1'としてあげることで、StereoPannerNodeに適した値を渡すことができる。

あと、AudioContextは画面の読み込みが終わってから触ったほうがいいので$(window).load(function(){} とすることによって、ああ、なんか面倒だから全部載せます。

content-script.js
// 最初に要素をぶっこむ
$("<input class='pan-range' type='range' min='-1' max='1' step='0.1' value='0'>").insertAfter("サイトによって丁度いいところ");

// 読み込みが終わってから動くようにする
$(window).load(function() {
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    var video = document.querySelector('video');
    var audioSource = audioCtx.createMediaElementSource(video);
    var panControl = document.querySelector('.pan-range');
    var panNode = audioCtx.createStereoPanner();

    // リスナー 
    $('input.pan-range').change(function() {
        var val = $(this).val();
        console.log(val); // これが-1〜1の値になる
        panNode.pan.setValueAtTime(val, audioCtx.currentTime);
    });

    audioSource.connect(panNode);
    panNode.connect(audioCtx.destination);
});

// サイトの仕様に応じて読み込むタイミングを調整する

反応を見る

Content Scriptsは見た目のインパクトが強いから、ちょっとした機能でも反応が貰える。
画像つきでツイートするといい。

あとは、リツイート直後のツイートを表示するやつを使うと、間接的な言及も拾える。

実は初めてChrome拡張作ったんだけど、数時間の作業で「神」とか言われるからすごい。無料だからお賽銭は貰えないけど。