p5.js で呼び出した YouTube動画の再生位置の時間を YouTube の IFrame Player API を使ってキャンバス上に表示

以下の記事にも書いた「YouTube の IFrame Player API」と「p5.js」を組み合わせてみた話の続きです。

●YouTube の IFrame Player API を使って p5.js Web Editor の中に YouTube動画を呼び出す
　https://qiita.com/youtoy/items/90b1ad79291a826aff2b

今回、お試しで実現した内容は以下です（先々月にやっていたけど、記事には書いてなかった...）。

YouTube動画を再生したり停止させたりすると、上記での YouTube動画の真下あたりで「Current Time」と書いてある部分に、動画の再生位置の時間が表示されます。

実装した内容

p5.js Web Editor上で実装したコード全体は、以下のとおりです。

基本的な部分（主に setup()内の処理）は、前回の記事の内容を流用しています。
そこに今回は、再生位置の時間の取得と、取得した時間のキャンバス上への表示を付け加えた形です。

let player;
let currentTime = 0;
let isPlaying = false;

function setup() {
  createCanvas(400, 400);

  const scriptTag = createElement("script");
  scriptTag.attribute("src", "https://www.youtube.com/iframe_api");
  scriptTag.parent(select("head"));

  const playerDiv = createDiv();
  playerDiv.id("player");
  playerDiv.position(50, 50);
  select("main").child(playerDiv);

  window.onYouTubeIframeAPIReady = function () {
    player = new YT.Player("player", {
      height: "270",
      width: "480",
      videoId: "s4auEwHEjlQ",
      events: {
        onStateChange: onPlayerStateChange,
      },
    });
  };
}

function draw() {
  background(220);

  if (isPlaying) {
    currentTime = player.getCurrentTime();
  }

  fill(0);
  textSize(30);
  text("Current Time: " + nf(currentTime, 2, 2) + "s", 10, height - 10);
}

function onPlayerStateChange(event) {
  if (event.data === YT.PlayerState.PLAYING) {
    isPlaying = true;
  } else {
    isPlaying = false;
  }
}

以下の部分は、ほとんどが前回の記事の内容と同じですが、 events: { onStateChange: onPlayerStateChange, } の部分を付け足しています。

  window.onYouTubeIframeAPIReady = function () {
    player = new YT.Player("player", {
      height: "270",
      width: "480",
      videoId: "s4auEwHEjlQ",
      events: {
        onStateChange: onPlayerStateChange,
      },
    });
  };

また以下の部分は、前回の記事の内容では、特に何らかの実装は加えてなかった部分です（前回の記事だと、背景に色をつける処理を残していたくらい）。

function draw() {
  background(220);

  if (isPlaying) {
    currentTime = player.getCurrentTime();
  }

  fill(0);
  textSize(30);
  text("Current Time: " + nf(currentTime, 2, 2) + "s", 10, height - 10);
}

function onPlayerStateChange(event) {
  if (event.data === YT.PlayerState.PLAYING) {
    isPlaying = true;
  } else {
    isPlaying = false;
  }
}

draw() の中の処理は、「動画再生中の場合のみ時間情報を取得する」「取得した時間情報をキャンバス上にテキスト表示する」というものです。

また、 onPlayerStateChange() の部分は、動画再生の状態の変化が起こったタイミングで、動画が再生中かどうかを示すフラグを切り替えるというものです。

このような内容で、冒頭で示したような「動画の再生位置の時間を取得して、p5.js のキャンバス上で表示する」ということができました。