Empstra（エンプストラ）

概要

YouTubeと連動するカラオケアプリケーションです。

機能

• YouTubeの動画のURLからキーの変更ができる音源の生成
• YouTubeの動画と連動した、音源の再生、停止、音量とキーの変更
• 音源に含まれるボーカルパートの除去
• ライトモードとダークモードの切替

こだわり

以下の画像のように、歌った曲の履歴をシェアできるようにしています。

ユーザーが入力したYouTubeの動画の読込に成功すると、その動画のタイトルをセッションストレージに保存します。

セッションストレージに動画のタイトルが1つ以上保存された状態でShareボタンを押すことで、シェア用のページを生成します。

シェア用ページの生成は以下の手順で行なっています。

1. セッションストレージに保存されている動画のタイトルのリストから、Node.jsでシェア用の画像を生成
2. 1.で生成した画像をCloudflare R2に保存して、画像のダウウンロードURLを取得
3. シェア用ページのIDとしてランダムな文字列を生成
4. 3.で生成したIDをキーに、2.で取得した画像のダウンロードURLを値として、Cloudflare Workers KVに保存
5. `/share/${3.で生成したID}`にリダイレクト
6. リダイレクト後にURLから、3.で生成したIDを取得
7. 6.で取得したIDを使い、Cloudflare Workers KVからデータを取得して、シェア用ページを生成

また、当Webアプリケーションは更新する内容がなく、かつページ数が少ないため、ユーザーがマンネリを感じやすいと考えました。

そのためトップページのGIFは、定期的にランダムで変化するようにしています。

同様にシェア用の画像の背景も、生成の度にランダムで変化するようにしています。