音楽と歌詞を同期するプレイヤーを作っている
自己紹介
Software Engineer, LoiLo Inc
慶應SFC増井研卒、TypeScript❤️Lover
React/Node.js/Deno
前回のおさらい
ケロエクスP
最近初音ミクで作曲を始めた 2019/06 ~
ネットでの音楽の発表の仕方に不満を持つ
音楽 on ネット
ネットで音楽を発表するとしたらどこのサイトにするか？
そう、YouTubeである
ボカロ曲ならニコ動も一応選択肢に入るかも
ニコ動の功罪
最初期は音楽のみが普通だったが、だんだんMVアリきになっていった
ボカロ楽曲=MVとセット、という方向性に？
全部が全部というわけでもないが、動画制作のプライオリティが高くなった
音楽？動画？
最近は結構音楽も動画制作も一人でこなすクリエイターも多い
動画に力を入れると労力が2〜10倍くらい
これは本末転倒だ
そもそも動画として音楽を投稿するのは最上の手段なのか？
短文 => Tiwtter, 写真 => Instagramなどの棲み分けができている
UGCのの中で音楽だけ動画と一緒くたになっている？
消えていった音楽SNS
MySpace, muzie...
SoundCloudの絶妙に流行ってない感
Tumblr？……
一方ストリーミングビジネスは最盛期
最近はどこもかしこもストリーミングサブスク
CDは売れないが音楽を聞く需要は低くなっていない
素人はどうやって音楽を公開すればいいのか？
なにか音楽の公開の仕方は無いものか
音楽と歌詞を同時に表示させたい。動画にしなくてもOK
そういえば昔歌詞も表示できるMP3プレイヤーがあったような…
というわけでDEMO
音楽プレイヤーUIの憂鬱
意外と状態が多い音楽プレイヤーUI
作るの楽勝だと思ったら典型的な複雑GUIだった…
解説していく
完全図解！シークバー
完全図解！シークバー
完全図解！シークバー
完全図解！シークバー
完全図解！シークバー
歌詞同期の考え方
音楽の再生区間ごとに歌詞の文章を対応させる
プレイヤーの再生状態を見ながら表示する歌詞を更新していく
歌詞再生ファイル
いくつか謎フォーマットがあるらしいがどうせ流行ってないので自作。こんなの
txt[00:00:000-00:07:916]〜前奏〜
[00:07:916-00:14:882]瞬いていたその一瞬で変わる世界に置いていかれた
[00:14:882-00:20:917]振り向く暇もうなずく暇も見つけられずに過ごしてきた歌詞同期UIの憂鬱（Web）
AudioElement.ontimeupdateが1秒（くらい）ごとにしか来ない
いまAudioタグが音楽の何ミリ秒目を再生しているのかは正確にわからない
歌詞タイミングファイルはミリ秒単位の設定なのでこれだけだと実現不可能
どう再生状態と位置を同期するか？
歌詞用Updaterが16msごとに内部再生時刻をupdate
ontimeupdate が呼ばれるたびにその時刻でUpdateの内部再生時刻を修正内部/ontimeupdateでのseek time同期時に、+1秒後に歌詞が変わっているか？を判別
変わっていた場合、その差分だけsetTimeoutで歌詞表示を更新
歌詞再生ファイル作成の憂鬱
（当たり前だけど）作成ツールがない
ひたすら聞きながらストップウォッチを押して区間を測る
動画エディタのトリミングみたいなのがほしい
ていうかぶっちゃけこれなら動画作るほうが楽なのでは…
作ってみて思ったこと
うーん、動画よりいいことあるだろうか🤔
YouTubeの字幕機能と何が違うのか…
TextAliveというプロジェクトもある
コード