Edited at

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

YouTubeのプレイヤーに直接UIを追加して音声のパンニング(左右の振り分け)を可能にするChrome拡張を作った。

■追記:現在はニコ生、OPENREC、SHOWROOMなど10以上のサイトに対応。

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


// 画面の読み込みが終わったら発火
$(window).load(function() {
setPan("<input class='pan-range' type='range' min='-1' max='1' step='0.2' value='0'>", "サイトによって丁度いいところ");
});

// 共通の関数
function setPan(html, point) {
// スライドバーを挿入
$(`${html}`).insertAfter(`${point}`);

// オーディオノードをごにょごにょと繋げる
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var video = document.querySelector('video');
var audioSource = audioCtx.createMediaElementSource(video);
var panNode = audioCtx.createStereoPanner();
audioSource.connect(panNode);
panNode.connect(audioCtx.destination);

// スライドバーの動きに合わせて音声の位置を移動する
$('input.pan-range').on("input", function() {
var val = $(this).val();
$(this).attr("value",val);
panNode.pan.setValueAtTime(val, audioCtx.currentTime);
});
}



反応を見る

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

画像つきでツイートするといい。

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

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