ビジュアルはもちろん機械学習を利用したシームレスな動画の同期再生も面白い infinite bad guy

doxas : 2020-12-09 13:55:37

独特な空気感をまとった不思議なウェブサイト

今回ご紹介するのは、アメリカのシンガーソングライター Billie Eilish に関連したウェブサイトです。

ビリー・アイリッシュは 2001 年生まれなのでまだ十代ですが、様々な受賞歴を誇るシンガーです。日本でもその楽曲がドラマの主題歌に使われたりしているようですので、名前を聞いたことがあるという人も多いんじゃないでしょうか。

今回のサイトは、そんな彼女のリリースしたシングル bad guy に関するウェブサイトで、世界中の人々が bad guy をカバーしたり BGM として利用したりした動画を集め、タグを使って検索・閲覧できるウェブサイトとなっています。

今回のサイト、どういう趣旨のものなのか最初はよくわからなかったのですが、どうやら bad guy を発表した Billie Eilish 自身が、公式に同曲をカバー・リミックスして公開してもらいたいとファンに伝えたことが出発点になっているみたいです。

若い世代に人気のシンガーソングライターだけに、この呼びかけに対する反応も大きかったのだろうと想像できます。

そうして世界中でファンが投稿した様々な bad guy を集めたのが、今回のサイトというわけですね。

そういう視点で見てみると、サイトで使われている宇宙空間のような世界観も、なんとなく納得がいくのではないでしょうか。

サイトのトップページでは、背景部分に Billie Eilish の姿がモノクロで描かれているのですが……

この背景部分にはマウスカーソルで干渉できるようになっており、モザイク化とディストーションを組み合わせたような、独特なエフェクトが掛かるようになっていますね。

「CLICK TO PLAY」と書かれたボタンをクリックすると、楽曲の再生が始まると共にシーンが宇宙空間のような背景に切り替わります。

画面の中央には（初期状態では）Billie Eilish 自身の公式の MV が置かれていますが、その他に２つの動画がロードされているのがわかるでしょうか？

両サイドに並んでいる２つの動画は bad guy をカバーした、ファンが投稿した動画です。

これらの動画は機械学習によって何かしらのタグ付けがされているようで、画面の下に並んでいるタグを選択すると動画をフィルタリングすることができます。

興味深いのは、サイト全体としての bad guy の楽曲の再生は常に一定のペースで進み続けるということ。つまり、機械学習で動画内の音声を解析して「楽曲の再生位置が同期される」ようになっているんですよね……

これはすごい……

宇宙空間のような背景に浮かんでいる大量のサムネイル画像も、もしかしたらファンが投稿した実際の動画に由来しているんでしょうか……

ファンが投稿した bad guy のカバー動画は膨大な量になるようで、そのすべてを閲覧するには 1.46 x 10^100 years が必要だと公式の About には記載されています。（真偽の程はわかりませんけど……）

WebGL の実装としては、トップページのシェーダによるエフェクト表現、そして 3D 空間に動画が散らばったような背景の表現と、それほど特殊な使い方がされているわけではありませんがサイト全体の空気感がめちゃくちゃかっこいいですね。

機械学習を利用した楽曲の同期再生も面白い技術ですし、技術者としてサイトを眺めてみても楽しいと思います。