この記事は後から、「ProtoPedia Advent Calendar 2024」の 3日目の記事としても登録しました（投稿していたのは 11月末）。

はじめに

以下のイベント「【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 のリポジトリは以下となるようです。

●qurihara/srt.js: JavaScript framework for YouTube contents augmentation as a standard subtitle format ".srt"
　https://github.com/qurihara/srt.js

そして、以下にも作例がまとめられているようです。

●p5.js で呼び出した YouTube動画の再生位置の時間を YouTube の IFrame Player API を使ってキャンバス上に表示 - Qiita
　https://qiita.com/youtoy/items/57cdb1c00934c0429602