AbemaのCM時に自動で音量を下げるようにしたらとても快適。コメント表示への切り替えも自動で
2021/11/08
Abema（「AbemaTV」から名前が変更されました）は付けっぱなしにすることもあって結構利用しているのですが、CMがとても不快です。
何度も何度も興味がない同じCMを見なくてはなりません。
- 「会社は学校じゃねーんだよ！」 → 大げさ。どうでもいい
- 「（好きな男子を）取られちゃうよー」 → どうでもいい
- 「○○くんがオオカミじゃないって信じています」→ どうでもいい
- 「奇跡の歯ブラシで磨くと～」→ うさんくさいしゃべり方をする社長を見たので…
Abema で Netflix のCMを流しているのは面白いですね。「ダダーン」。今この映画やドラマが流行っているのか（推されているのか）と知ることができ、情報として有り難いです。
さてそのCMですが、CMが流れるのは仕方ないとして、JavaScript で音量を下げられないかなと考えました。
藤田社長はCMについて色々と考えているようですが、現状CMが不快です。特に同じCMの繰り返しばかりなのが不快です。30分で4回ぐらい同じCMを見るのはAbemaでは普通のことです。
カエルのアニメーションCM（光回線かモバイル回線のCM）が一度に6連続で流れた時は驚きましたが、あれは映像と音がうるさくないのでそこまで不快ではありません。
何とかCM時の音量を自動で下げるのを達成でき、とても便利になりました。CMの不快さが随分減りました。
番組本編よりCMの方が音量が大きい場合もあるので、CMの音量は不快さに強く関わります。
結構時間が掛かってしまいました。CMのミュートは比較的簡単にできたのですが、もっと良い方法が無いだろうかと調べて時間を取られました。
まず、ミュートや音量の上げ下げはできるか
まず JavaScript でミュートや音量の上げ下げができるか確かめねばなりません。
やってみると技術的にはミュートの方が楽でした。というのも音量ボタンを押すだけで良いからです。
音量を下げるとなると、音量のスライダーを動かさねばなりません。「スライダーをクリックして動かす」というのが難しい。
というのも、外部から Style を変更してもプレイヤーの onChange イベントが実行されないため、音量が変更されません。スライダーが動くだけ。
onChange に相当する function をマニュアルで実行できないかなと考え、Abemaが使っているプレイヤーのインスタンスを取得できれば楽だったのですが、グローバル変数の中で見つけられませんでした。
分かり難いところにあるか、外部からアクセスできないようにしているのでしょう。
ちなみにAbemaのプレイヤーは THEOplayer です。
Netflix のプレイヤーはインスタンスが簡単に取得できるので弄りやすいようです。利用者が多いのでネットで情報が拾えます。まぁCMがないので弄らなくて良いのですが。
そこで、発想を変え、プレイヤーを弄るのでは無くブラウザーの機能として音量を下げ、スライダーの値は音量の比率から高さを計算して設定する。この方法はとても便利で、他の場面でも使えそうです。
スライダーの値は本当は取得・設定しなくても良いのですが、マウスで手動でスライダーを動かしたくなったときに困りますから、便利さの観点から設定します。
これで音量の上げ下げ・ミュートができるようになりました。
なお、CMはミュートよりも音量を下げた方が良かったです。
ミュートにすると突然無音になってしまい、不安になるからです。
いつCMが流れるのか。CMの判別
これが難しい。CMが流れるのはいつなのか。
調べてみると、MPEG-DASH という技術を使っているようです。
これを見ながら segment の duration などから映像が終わるタイミング、CMが始まるタイミングを見つけようとしたのですが、そもそもラグがあるのでMPDに書かれたタイミングでCMになりません。
ブラウザーからAbemaを見るときは、スマホやタブレットのAbemaアプリから見るときと違い、10～30秒ぐらいラグがあります。そのラグを正確に計測する方法が分かりませんでした。
残り時間を無視して番組本編の映像が途中で終わってCMに行ったり、CMが途中で終わって番組本編に戻るときも。
じゃあスタートのタイミングだけを考えればいいかと思いましたが、時間が一致しません。ラグの扱いが難しい。
ということでMPDを見るのでは無く、違う方法でCMの切り替えを検知することに。
チャンネルを開いたときにコメント表示に自動的に切り替える
今回の副産物として、チャンネルを開いたときに自動的にコメント表示に切り替えるようにでき、これが意外と便利です。
チャンネルを開いたときはサイドバーにほぼ情報が無い「番組情報」が表示されているのですが、コメントを見ながら番組を見ることが多いのでコメント表示で始まって欲しい。
ですがAbemaの仕様で、すぐにコメント表示に切り替えられないようになっています。CM中もコメントの表示に切り替えられないようになっています。
「コメント表示」を押してもコメント表示に切り替えられないのは不快です。
そこで、コメント表示ボタンを押すのを自動化。とても楽です。
色々と知れて面白かった
AbemaのCM時に音量を下げるプログラミングは面白かったです。
もう少し知識があれば THEOplayer のインスタンスを取得できたかもしれませんが、色々と検索しながらプログラムを作っていくのは楽しいです。
今回新しく知ったのはこちら。
- xhr と fetch の response を傍受してあれこれする方法
- fetch() の使い方
- アロー関数。複雑になると見づらい、分かり難い…
- 分割代入。分かり難すぎ
- 残余引数。こんな方法があるのか。便利
- MPEG-DASH のMPDファイルの読み方。他に使う場面が無いけど…
- URLが変更されたときのイベントを作る方法。普通は要らないが、ドキュメント内部で非同期でページ内容が変わる場合に使える。YouTube、Abema もこれ
- 音量を変更する方法。音量スライダーを動かさなくて良いことが分かった
- JavaScript は参照渡しが簡単にできないこと
- Netflix のプレイヤーは API を使えること
- Abema は広告を見た時の状況をトラッキングしていること
- Abema は見ている時間を計測していること
- Abema は入力した文字列をローカルストレージに長期間保存していること
今後AbemaがCMの仕様を変えるかもしれないので、おそらく今回作ったプログラムはずっとは使えません。仕様に合わせて更新していく必要があります。
とりあえず目的は達成できたのですが、CM検知にもっと良い方法はないかなと思い続けています。
それにしても便利です。こういう時にプラグラミングができて良かったと思えます。
