[ゴミ箱] iPhone/Android でも YouTube をバックグラウンド再生&ループしたい！

2017年12月5日火曜日

• Android
• iOS
• iPhone
• YouTube
• ゴミ箱
• 雑多

2018/06/19 更新!

　ご無沙汰しております。2億年ぶりの更新です。時が経つのは本当に早いものです。つらいですね。さて、今回はあんまりエンジニアチックな話ではなく、もうちょっと役に立つお話をしたいと思います。
最近スマホを買い替えたのですが、今まで使っていたYouTube動画再生アプリが使えなくなってしまい、仕事に影響がでてきました(仕事をするとは言っていない)。ということで、なんとか音楽をバックグラウンド再生&ループ再生出来ないものかと色々模索しておりました。今回はその結果の報告です。

YouTubeはバックグラウンド再生に対応していない

　対応していない、というと語弊がありますが、YouTubeではバックグラウンド再生をすることが出来ません。意図的に出来ないようにしてあります。理由はいくつか考えられます。YouTube Musicとの兼ね合いとか、広告挿入とかです。ループが出来ないのも広告に関連してのことでしょう。

でも作業用BGM聞きたいじゃん

　そうなんです。作業するときには音楽を聞きたいんです。巷ではYouTubeの音声のみを再生するようなアプリがいくつか見られますが、その殆どがGoogleに刺され死んでいきました。またひっそりとそういうウェブサービスが運用されていたりします(そのサービスは検索避けしているようなのでURLは載せません)。そういうの作ろうかなとも思ったんですが、私Googleに寄り添い幾星霜、刺されてしまっては生きていけません。ということで、苦し紛れですが簡単にバックグラウンド再生とループが出来るようになるブックマークレットを作りました。YouTubeの動画ページで実行するだけでバックグラウンド再生とループが出来るようになります。

登録の仕方

　スマホのブラウザってブックマークが難しいんですよね…。端末やブラウザの種類によって方法がバラバラなので登録方法については割愛しますが、需要があればまとめるように努力してみます。Chromeユーザの方はPC/Macと同期できるので、そっちで登録してから同期するのが楽です。

　スクリプトは以下のとおりです。

javascript:(function(q){a=q('#player').firstChild;v=q('video');t=v.cloneNode();t.src=v.src;t.loop='loop';a.parentNode.replaceChild(t,a);q('header').style.background='#459F39';})(document.querySelector.bind(document))

↑のスクリプトをブックマークとして登録してください。ブックマーク名は何でも構いませんが、Chromeで使う際に検索することになるので、検索しやすい名前にしておくといいと思います。とりあえず今回は「yfl」(YouTube for listening)として登録したことにして説明を続けます。

使い方

共通の手順

　使い方です。まずはブラウザでYouTubeを開きます。アプリに飛んではダメです。Androidは簡単にブラウザで開くことが出来ますがiPhoneの人はちょっと面倒です。ググれば方法は見つかりますが、面倒なのでブックマークするといいと思います。

Chrome(iPhone/Android) の手順

ブックマークを選択

「yfl」を選択

ヘッダが緑色になったら成功

　右上の「…」から「ブックマーク」を選んで、先程登録した「yfl」をタップします。ヘッダが緑色になったら成功です。また、アドレス入力欄に「yfl」と入力して、候補に出てきたブックマークをタップしても同じです。「…」の「ブックマーク」からは実行できない場合があるようなので、出来ない方はアドレス入力欄に入力する方法で試してみて下さい

Safari(iPhone) の手順

　Chromeと同じく、視聴したいページで、先程登録したブックマークレットを実行して下さい。ヘッダが緑色になったら成功です。Safariの場合、検索バーからブックマークを実行することが出来ませんので、ブックマーク一覧から実行するようにして下さい。

共通の手順再び

　さて、ここからはブラウザによらない共通の使い方です。動画を再生したら、ホームボタンを押してホームに戻って下さい。一旦音声は止まりますが、コントロールセンター(iPhone。Androidは何ていうんだろう。通知とか見るあの画面です。)の再生ボタンを押して下さい。無事再生されれば成功です。

iPhone(iOS 11)

Android(Android 4系)

　あとは作業用BGMをお楽しみ下さい！

注意点をいくつか

YouTubeを開いているタブは1つにすること

　複数のタブでYouTubeを開いていたり、SafariとChromeでYouTubeを同時に開いていたりすると、コントロールセンターでうまく再生できないようです。当たり前か。

いつ使えなくなるかわからない

　当然ですがYouTubeの動画ページを勝手にゴニョゴニョするので、YouTube側に変更が入ると動かなくなります。先述の通りYouTubeは動画のバックグラウンド再生を認めていないのです。YouTubeは動画を見るサービスということですね。

自己責任で

　お約束です。

まとめ

　適当ですが一応目的を達成することが出来ました。これでまた仕事が捗ります(仕事をするとは言っていない)。動画配信サービスは他にもたくさんありますが、やはりYouTubeにはたくさんの曲が上がっています。私も作った曲のいくつかはYouTubeにあげています。お金は払うので、YouTubeさんには音声再生のみのサービスをやってもらいたいです(既にそういうやつもありますが…)。
　ちなみにスクリーンショットにある曲は私が参加しているレーベル organic records のものです。

　何かあったらコメント欄にお願いします。見ます。多分。

更新履歴

• 2018/06/19 以下のスクリプトが動かなかったので修正

  javascript:(function(q,u){q('h1').parentNode.style.backgroundColor='#459F39';q=q('video');q.pause=u;q.loop='loop'})(document.querySelector.bind(document))

• 2017/12/13 以下のスクリプトが動かなかったので修正

  javascript:(function(q,u){q('.zb').style.backgroundColor='#459F39';q=q('video');q.pause=u;q.loop='loop'})(document.querySelector.bind(document))

• 2017/12/08 以下のスクリプトが動かなかったので修正

  javascript:(function(q,u){q('.atom .zjb .zb').style.backgroundColor='#459F39';q=q('video');q.pause=u;q.loop='loop'})(document.querySelector.bind(document))

• 2017/12/05 初版