YouTube 音ズレ調整 Chrome拡張を公開しました
はじめに
YouTubeのオーディオタイミングを調整して音ズレを解消できるChrome拡張を公開しました!これは個人的に本当に欲しかったので作りきれて良かったです :-)
YouTubeのオーディオタイミングを0.1秒単位で調整して音ズレを解消できます。
音ズレしたビデオの視聴、音声遅延のあるワイヤレスオーディオ機器のご利用等にお役立てください。
1. YouTubeの視聴画面でツールアイコンをクリックすると、オーディオタイミング調整スライダーがYouTubeの動画の下に表示されます。
2. スライダーを動かして音と映像が合うようにオーディオタイミングを調整します。
※ Firefox Add-on版も現在審査完了待ちのため、あと1週間ほどで公開できるはずです。
開発の経緯
開発のきっかけは、2016年3月発売になったSonyのSRS-HG1というアクティブスピーカーを購入したこと。
なおSingaporeでは高いので、日本に一時帰国した奥さんに一番安かった楽天で買ってきてもらいました :-)
元々は大人気の Bose Soundlink2 を買うつもりだったのですが、この同価格帯のスピーカー、Bluetooth・有線に加えて、Wi-Fi (DLNA、Google Cast) に対応しているんです!
しかも世界最小のハイレゾ対応スピーカー、イコライザーでの調整が可能、バッテリーの持ちが12時間と、Bose Soundlink2の購入を考えている方には是非比較検討してほしい超おすすめ商品です。
Google Cast対応は本当に本当に、便利で便利で毎日再生しては喜びを噛み締めているのですが、残念ながらこのスピーカーには有線でも音声遅延があるという欠点があります。これが理由で低評価をつけている方も少なくありません。
スピーカーが遅いなら音を早くすればいいじゃないの!
音楽メインなのでほぼ気にしていなかったのですが、やはりGoogle Castが使える以上、YouTubeのビデオを見ながら良い音で音声を聞いてみたい。。
そこでスピーカーが遅いなら音を早くすればいいじゃないの!とマリーアントワネット的(?)発想で作ることにしたのがこのツール。YouTubeではそもそも音ズレしているビデオを見かけることも珍しくありませんし、これはぜひ作ってみようと思い至りました。
そして期待したとおりSRS-HG1からタイミングピッタリのYouTubeの音声が出てきた時は、ちょっと感動してしまいました。。。
開発メモ
まだまだ改善したい部分はあるのですが、とりあえずは今回苦労した点の開発メモなど。
YouTubeはシングルページアプリケーションである
Amazonでの1-Clickボタン誤クリックを防ぐChrome拡張 - Hirox Lab でもAmazonのシングルページのアーキテクチャに手こずりましたが、なんとYouTubeもシングルページアプリケーションでした。まあ最近私が立ち上げた新しいサービスも全てシングルページアプリケーションなのですが。
しかし本当に大変だったのはAmazonとは違って検索ページだけではなく、再生画面等含めて全てシングルページだったこと。そのため別の動画への移動はもちろん、検索画面への移動などでも全く画面更新イベントが走らないので、画面ごとの機能の初期化処理などで何かと工夫を強いられました。
処理イベントが多い
再生、ストップ、ポーズ、音量変更、速度変更、キューイングなどなど、処理イベントがとにかく多い。状態の種類も非常に多くて、読込前、バッファ中、再生中、ポーズ中、キューイング中のほか、広告表示中、閲覧不能(削除された動画など)などなど様々。実装そのものも大変でしたが、UXの観点からこれらどこまでどう対処するのか考えるのは大変でした。
音声処理のパフォーマンスチューニング
これが一番大変でした。開発期間の半分はここに費やしたはず。。。
通信などの関係で必ず発生する映像と音声のタイミングのずれを、どこまで高い精度を確保しつつ、どういう基準で許容するのか。何をトリガーにタイミング調整を行うか。通信速度が低いなどの理由でそもそも調整困難な場合などは、どうそれを検知してどうコントロールするか。
具体的には1.8秒以内に3回以上、0.18秒超の誤差が発生した場合は一瞬止めて調整を図る、1.8秒以上音声のバッファリングが終わらない場合は一瞬止めて調整を図る、などなど色々しています。微妙な調整でむしろ精度が悪化したり、タイミングの衝突で全く再生できなくなることも珍しくありませんでしたが、最終的には大分スムーズに十分な精度で再生できるようになったかと思っています。
まとめ
このツールのお陰でSRS-HG1のある生活を本当に楽しめるようになりました!
また、わざわざYouTubeで音ズレのあるビデオを探してきて音をあわせてみたのですが、やっぱり観る気持ちよさが全く違います。
今回はUI/UXにかなりこだわった結果、中々使いやすいものが出来たと思っていますが、まだまだ改善したい部分はありますので、少しずつ手を入れていきたいと思っています。