Get Wild ラーメンタイマーを作りました。

Get Wild Advent Calendarに参加したかったのですが乗り遅れたので、季節関係なくサービス作って発表しようと思います。
 
作った物はこちら
カップラーメンの3分を測れるタイマーで、3分経過するとGet Wildが流れ始めます。
 
いつもラーメン3分を計る時はスマホのタイマーを使っていたのですが、アラームの音を好きな音楽にしたいと思い、(事務所の公式チャンネルで)YouTubeにアップされている楽曲のGet Wildを利用しました。
 
 

技術的なこと

Get Wildラーメンタイマーの動画再生部分はYouTubeのPlayer APIを利用して制作しています。
YouTubeのiframe APIはこちらに使い方の例が掲載されています。
YouTubeのjsスクリプトを読み込めば、動画の選択から再生、停止、音量など基本的な動画の操作はjavaScriptですべてできるので便利でした。
 
 

YouTube Player APIを利用する上で困った点

Chromeで別タブにある動画を自動再生するには工夫が必要だった

タイマーという性質上、別タブで他のサイトを見ている際も3分を測るタイマーの進行とアラーム(動画再生)は機能していなくてはいけないのですが、
Chromeではアクティブでないタブで動画の自動再生が行われなくなったようです。
 
非アクティブのタブでもjs自体は実行できるので、setInterval関数でタイマーは動かし続ける事は出来るのですが、3分経過しても動画が始まらないという現象に陥ってしまいました。
 
回避策としては、タブがアクティブの時に1度動画を再生した後は、非アクティブでも再生できるということがわかりました。
 
Get Wildラーメンタイマーでは、タイマーのスタートボタンを押した時点で音量のボリュームをゼロにした動画を一瞬再生させて停止することで、タブが非アクティブの状態でも動画の再生ができるようにしました。
一度もアクティブになっていないタブで動画の自動再生は無理かなと思います。
 

スマホが非対応になってしまった

iPhoneに関しては、ブラウザで動画の自動再生そのものができない仕様だったので論外、
Androidに関してはChromeでは自動再生が可能でしたが、別タブに移動すると自動再生ができなくなるので、実質不可能ということのなりました。(ずっとタイマーのページを開いてくれていれば問題ないのですが。。。)
 
 
来月からのGet Wild Advent Calendarに参加される方の内容に期待しましょう!
 
Get Wild

Get Wild