URL指定でYouTubeをループ再生させるサイトを作ってみた

追記1：スマホだとブラウザの規制なのか、うまく動かないみたい。まぁ、バックグラウンド再生できないから普通にYouTubeMusic使うか

追記2：PCなら最近右クリックからループ再生できるようになったの忘れてた...

今はSpotifyやAppleMusicなど数多くの音楽ストリーミングサービスの楽曲もどんどん増えてきました。でも、小学生の時にYouTubeをループ再生する怪しいサイトを愛用していたのを思い出し、作ってみました。

聞きたい曲は大抵Spotifyにある時代ではありますが、カバー作品など今でもYouTubeのみの楽曲はたくさんあるので、ちょっと便利になるかな...？

YouTube Loop

使い方は簡単で、下の項目にURLか動画IDを入力すればループ再生される。

ループさせたいURL、または動画ID

{{}}{{}}

プレビュー

{{}}

ループURL

埋め込み用ループURL

仕組み

同じ曲を2曲、プレイリストを埋め込んで、そのプレイリストをループ再生させています。詳細はYouTubeの埋め込みリファレンスへ。

https://www.youtube.com/embed/XXXX?playlist=XXXX&loop=1&autoplay=1

本当は、Enterを押さなくても自動再生するようにしたいけど、ブラウザの制約でどうも難しそう...？

あと、ループURL のidパラメータは関数を実行してるだけなので、サイト同様、2種類のURLでも直接動画IDを指定しても動く。

コード

https://www.youtube.com/watch?v=XXXXとhttps://youtu.be/XXXX の2種類のURLに対応していて、vのパラメータで取得できなかったら、.pathnameで動画IDを取得するようになってます。エラー処理などは入ってません（笑

function youtube(){
  let id = input.value; //変数idに"ループさせたいURL、または動画ID"を指定
  if (id){ //IF：変数idがある時
    if(id.includes("http")) { //IF：URLの時（httpを含む時）
    	let url = new URL(id), //変数idをURLオブジェクト化
            para = new URLSearchParams(url.search); //"url.search"でパラメータのみを指定し、URLSearchParams オブジェクト化
      if(para.has("v")) { //IF：パラメータvがある時（https://www.youtube.com/watch?v=XXXX 用）
        id = para.get("v"); //変数idをvのパラメータの値に置き換える
      } else if(id.includes("youtu.be")) { //IF：パラメータvがない時（https://youtu.be/XXXX 用）
        id = url.pathname; //変数idをパスの値に置き換える
      }
    } //もし、ここまで変数idが加工されなかったということは指定されたのがもともと動画IDだということ。（エラー処理はなし
    
    //以下、URLを作成し出力する処理
    let link= "https://www.youtube.com/embed/"+ id +"?playlist="+ id +"&loop=1&autoplay=1";
    view.src = link;
    copy.value = link;
    short.value = "https://2001y.me/blog/web/tool-youtubeloop?id=" + id;
    
    //以下、再読み込みしもいいようにパラメータを指定し、履歴に追加する処理
    document.title = id + "｜URL指定でYouTubeをループ再生するサイトを作ってみた｜2001Y.me"; //idを追加したタイトルに変更
    paraID.set("id",id); //パラメータidに変数idを指定
    window.history.replaceState({}, "", &#x60;${location.pathname}?${paraID}&#x60;); //パラメータの変更を反映&履歴に追加
  }
}

//以下、このページのパラメータ指定で自動入力するための処理
let paraID = new URLSearchParams(location.search); //開いたときのURLからパラメータを取得
if (paraID.has("id")) { //IF：パラメータidがある時
  input.value = paraID.get("id"); //パラメータidを"ループさせたいURL、または動画ID"に表示
  youtube(); //動画表示処理を実行
}

簡単なツールなんかを作ったときにブログに残しておきたかったから、このブログを作ったようなもんだったので、活用できてよかった。あと、コードのコメントアウトをどのぐらい残せばいいのかが難しい...。

でも、コメントアウトはHTML的にはただのコードだから、SEO的にはページの内容としては判定されないのかな...？まぁいいや〜笑

追記1,2を踏まえて：なかなかに無意味なものを作ってしまったかも...笑やっぱり、自分が本当に使うと思うもの以外を作っても失敗しちゃうな〜