はじめに
以下のイベント「【20回記念イベント】 #ヒーローズリーグ & #MashupAwards を振り返る」で見たとある作品が気になりすぎて、勢いでメモ的に記事を書いたものです。
具体的には「srt.js」というもので、2016年、つまり 8年前に作られたものになります。
srt.js を使ってみつつ、場合によっては似た仕組みのものを作って試さねば！、と思ったのですが、まずは情報をたどって自分用に整理するための記事を書きました。
srt.js
srt.js については、以下の作品紹介動画がすごく分かりやすいです！
具体的な仕組みや、複数の活用例を見ることができる動画です。
仕組みとしては、上記の動画に出てくるとおり、↓このようになっているようです。
作品紹介のページ
以下は、作品紹介のページです。
●srt.js: YouTubeの映像と連動したマッシュアップ作品を簡単に作れるJavaScriptフレームワーク | ProtoPedia
https://protopedia.net/prototype/598
使用方法
使用方法は、以下の部分に書いてありました。
自分の動画の場合は、上で書いていたように、字幕部分に処理を書きこむという使い方ができるようです。
それができない他の方の動画についても、処理用のファイルを別でアップロードして、動画と一緒に参照させるようにすれば
ドキュメントと作例
詳細な情報は、ドキュメントに掲載されているようです。
以下のページがドキュメントの 1つのようですが、ここを見ると、上で掲載した動画には出てきていない複数の作例も見られるようです。
●Kazutaka Kurihara - 22. srt.js
https://www.unryu.org/home/srtjs
いろいろな作例のアイデアが面白いです。
その他のドキュメントなど
また、他のドキュメントページや GitHub のリポジトリは以下となるようです。
●Kazutaka Kurihara - doc
https://www.unryu.org/home/srtjs/doc
●qurihara/srt.js: JavaScript framework for YouTube contents augmentation as a standard subtitle format ".srt"
https://github.com/qurihara/srt.js
作例
そして、以下にも作例がまとめられているようです。
●qurihara/examples.srt.js: Examples for srt.js
https://github.com/qurihara/examples.srt.js
似た仕組みを作る話
そういえば前に思いつきで、p5.js と YouTube関連の API の組み合わせで、以下のようなことをやったことがあったのですが、上記の時間連動に関する仕組みと似たことは、これに手を加えても少し作れるかも。
（特定の時間情報に合わせて、何らか処理をさせて、それを外部の API やガジェットと連動させる、というのは当時は全く思いついてなかったけど）
●p5.js で呼び出した YouTube動画の再生位置の時間を YouTube の IFrame Player API を使ってキャンバス上に表示 - Qiita
https://qiita.com/youtoy/items/57cdb1c00934c0429602