WebSocketサーバ搭載の音楽プレイヤー"Muffroove"を作ってみた
これは何
ふと思い立って、再生してる音楽の情報をWebSocketで取得できる音楽プレイヤーを作ってみました。開発についていろいろ書き綴ってみます。
TL;DR a.k.a. 今北産業
↑をインストールして起動する
↑のページに書いてあるExampleコードを参考に配信レイアウトを組む
曲を再生する
何を思ったか
昨年運営・開催したRTAイベント"Puzzle Game RTA Festival 4"にて、「セットアップ画面でかかっている曲、何だろう」というコメントが散見されました。配信レイアウトとして機能要件として今回は含めなくてよかったものの、後から「やっぱ欲しいよなあ」と思ったのでした。
しかしながらこの機能、いま私が知る範囲では結構実現するのが（少なくともローカルの楽曲をという観点では）困難ということが分かっていました。なので、「曲を再生しながら配信レイアウトにその情報を乗っける」というのをもっと手軽にやれたらいいなあと思い、これを作るに至りました。（私が知る範囲が狭すぎるという話もあるかもしれないんですが・・・）
機能説明
音楽プレイヤー
シーク機能がない点を除けば一般的な音楽プレイヤーだと思ってます。用途として、これを使ってBGM流しっぱなしにする想定なので、シーク機能はいまいま実装していません（マジでどう作ろうかな・・・）。
WebSocketサーバ
専門的な話になりますが、これが今回の肝です。曲を再生すると曲の情報を送信します。クライアント側でリスナーを設定しておけば、メッセージ受信と同時に処理が実行されます。これで曲の切り替えと同時に配信レイアウト上でも表示を変更できるということです。
技術周りの話
フレームワーク
今回フレームワークとしてはElectronを採用しました。なぜかって言われたらそこに手頃なのがあったからっていう程度だったんですが、今ってめちゃくちゃ便利な世の中でですね。ElectronってViteと組み合わせられちゃうんですよ。別の記事でも言及してるんですが、ここ最近ずっとVite + Svelteにお世話になっている身としてはこれ以外の選択肢無いです。最高〜〜〜〜〜〜〜✌(’ω’)ということで今回はElectron + Vite + Svelte + TypeScriptで作りました。
音を鳴らす
中身はWebページなので、Webページ上で音を鳴らす仕組みが必要です。色々探ってみたところ、良いライブラリがありました。Howler.jsです。
非常に直感的なコードで音声ファイルを再生できます。あとはファイルパスを指定して再生すれば・・・と思いきやそう簡単には行きません。Webページからはローカルのファイルを読み込んで再生というのはできないんですよね。代替案として、Base64形式のデータURLを使えれば・・・ということでElectronの出番。Node.jsで動作しているメインプロセス上でファイルを読み込んで、Base64形式の文字列に変換し、データURLに変換することで再生できました。初めて音を鳴らせたときの達成感はひとしおでした。
これから
いったん基本的な機能は揃ったんですが、ロードに時間がかかったり、不具合があったり、アイコンがデフォルトのままだったり、追加したい機能があったりとまだまだやることはいっぱいあります。暇があればちょっとずつ進めようかなあと思います。まずはv1.0.0をリリースできたので、お疲れ様でしたということで。気になった方は使ってみてください。
なぜ"Muffroove"?
WebSocket → Web → 蜘蛛の巣 → 蜘蛛 → マフェットちゃん(Muffet)
Music → Groove
足してMuffrooveです。
この記事が気に入ったらサポートをしてみませんか？