Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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拡張作ったんだけど、数時間の作業で「神」とか言われるからすごい。無料だからお賽銭は貰えないけど。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした