突然だが、「Youtubeの動画の音量を1%に設定したいけど、シークバーで手動調整するのが難しい...」と感じたことはないだろうか?
私自身、他の動画サイトとの兼ね合いでYoutubeの動画音量は1%に設定したいと思ったことが度々あったのだが、シークバーで手動調整するのは難しいしキーボードの矢印キーでは5%ずつしか変更できないしでちょっとした不便さを感じていた。
そこで今回は「拡張機能なしでYoutubeで音量を1%に設定する方法」と題して、ブラウザなどの拡張機能を使わずに「ブックマークレット」として音量調整を実現する方法を紹介する。
ブックマークレットとは、「Chromeなどのブラウザのブックマーク機能を使い、URL部分にJavaScriptのスクリプトを埋め込むことによって、ブックマークのクリックでスクリプトを実行する仕組み」のことを指す。
これを使えばブックマークから簡単にYoutubeの動画の音量を設定することができる。
Youtubeで音量を1%に設定する「ブックマークレット」の作成手順
以下の3ステップで簡単に設定・利用ができる。
① 任意のページでブックマークを登録する
② 登録したブックマークのURL部分にJavaScriptのスクリプトを記載する
③ Youtubeの動画を開きブックマークレット(JavaScriptのスクリプト)を実行する
今回は「Google Chrome」での例で説明するが、JavaScriptを実行しているだけなので基本的にどのブラウザでも実行可能のはずだ。
① 任意のページでブックマークを登録する
まずはブックマークレットの元となるブックマークを登録する。
名前とURLはあとから変更するので登録するページは何でもOK、ここでは例としてGoogle検索のページをブックマークに登録する。

② 登録したブックマークのURL部分にJavaScriptのスクリプトを記載する
続いて登録したブックマークの編集を行っていく。
登録したブックマークを右クリックして「編集」を選択する。

「ブックマークを編集」のダイアログが表示されるので、以下の通りに名前とURLを入力する。
・名前:「Youtubeの音量を1%にするブックマークレット」など任意の名前
・URL:以下のJavaScriptのスクリプト
javascript:document.querySelector('#movie_player').setVolume(1)

ここでURLに入力したJavaScriptのスクリプトについて簡単に解説する。(不要な方は呼び飛ばしてもらってOK)
「document.querySelector('#movie_player')」の部分はYoutubeの動画のプレーヤーを操作対象とするべく、id(「movie_player」)で動画プレーヤーのオブジェクトを取得している。
そして動画プレーヤーのオブジェクトにある「setVolume()」メソッドを用いて、「setVolume(1)」とすることで動画の音量を1%に指定している。(ここの値を「1~100」の任意の値にすることで自由に音量を設定することが可能)
動画プレーヤーのオブジェクトには他にもたくさんのプロパティやメソッドが存在するので、気になる方は適当なYoutube動画のページで以下のJavaScriptを実行してコンソールの出力を見てみて欲しい。
色々なプロパティやメソッドがあることが確認でき、その中に先ほどの「setVolume()」メソッドも含まれていることが分かる。
javascript:console.dir(document.querySelector('#movie_player'))

各プロパティやメソッドの詳細についてはYoutube公式の「iFrame Player API」のページにまとめられているのでそちらを参照。
③ Youtubeの動画を開きブックマークレット(JavaScriptのスクリプト)を実行する
最後に任意のYoutubeの動画ページを開いてブックマークをクリックする。
JavaScriptのスクリプトが実行され、動画の音量が1%になっていることが分かる。

まとめ
今回は「拡張機能なしでYoutubeで音量を1%に設定する方法」を「ブックマークレット」で実現する方法を紹介した。
今回初めて「iFrame Player API」を利用してみたのだが、他にもYoutubeの動画に対して色々な操作ができるようなので、何か実用的なアイディアが思いついたらまた共有していきたいと思う。