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