ブラウザを音楽プレイヤーとして活用する案

最近、無線のイヤホンを買いました。

i7 Mini TWS BluetoothワイヤレスイヤホンHIFI高音質ブルートゥースイヤホン充電式収納ケース左右分離...

Amazonの情報を掲載しています

今流行りのAirPodsと似て非なるものですｗ
iPad proを買ったのですが、今のiPadってイヤホンを挿す穴がなくなってるんですよね。かと言ってわざわざ専用イヤホン買うのももったいない気がするし、変換プラグを買うのも何かなーって考えた結果、無線のイヤホンを買おうと。

今のイヤホンってカナル型が非常に多いです。私はカナル型が苦手なのでインナーイヤー型が欲しいんですよね。インナーイヤー型のイヤホンで無線のものがないか探していたときにこのAirPodsもどきにたどり着きました。（AirPodsもインナーイヤー型らしいです）こういうのって高いので全く視野に入れてなかったのですが、この商品は非常に安い！！！
ちゃんとインナーイヤー型ですし、値段も安いので失敗してもそんなに痛くないかと思って試しに買ってみたら、とてもいい！
音は正直そこまでって感じですが、あの小さなケースに収まる本体、ケースに入れるだけで充電もできて、線がないからかさばらないという素晴らしい設計。なんというかとても柔軟に使える便利なイヤホンって感じでした。
わざわざイヤホンを持ってなくてもあの小さなケースを持っていれば、音楽を聴きたいと思ったときにBluetoothで接続して聴くことができます。イヤホン自体にボタンがついていて再生・停止ができるので、iPadと接続しておいてそのiPadをカバンに閉まっておいてもイヤホンのボタンを押すだけでそのままiPadの音楽を再生することができるので非常に便利です。

ただ、普段からiPadを持ち歩いてる訳でもないので、スマホに接続して使うことが多いかなと。ただ、私はスマホに音楽って入れてないんですよね。基本的に外で音楽は専用のプレイヤー使って聴いてるので。
でもこのイヤホンを買ったことでスマホでも音楽が聴ける環境を作りたいって考えるようになりました。でも音楽プレイヤーに曲入れる習慣はあってもスマホに音楽入れる習慣がないので、なかなか聴きたいときに聴きたい曲を聴くというのが難しそうです。

そんなとき、たまたまこんな記事を見つけました。

個人でWebアプリを開発する時に便利な高機能JavaScriptライブラリ6選！

その中で私が興味を持ったのは「オーディオファイルを柔軟に制御できるライブラリ！」でした。

オーディオファイルを柔軟に制御できるライブラリ

howler.jsというライブラリらしいです。

どのようなものか簡単に言いますと、Javascriptで音楽ファイルを簡単に扱うことができるライブラリです。

Javascriptで音楽ファイルを扱うことができる、つまりそれはブラウザを使って好きな音楽が再生できるようになると言うことです。

最初のAirPodsもどきの話と繋がってきましたね？

そうです、ブラウザで音楽が再生できるようになれば、スマホであろうとiPadであろうと好きな機器で音楽が再生できるようになるのです。
もう少し詳しく説明します。

ストリーミング再生環境を作る

今私が考えている案は、サーバ上に音楽ファイルを保存しておき、その音楽ファイルをブラウザで再生させようというものです。サーバ上にプレイリストを作っておけば、機器に依存せずに好きな音楽を聴くことができます。

再生させるだけならこれだけのコードでできるらしいです。

var sound = new Howl({
 src: ['sound.mp3']
});

sound.play();

このsrcの部分でサーバ上にあるファイルを指定すれば再生できそうですよね。ストリーミングとかどう実装すればいいかまだよくわかったませんが、HTTPでやり取りすればできるんじゃないかなって考えです。

そのあたりの管理するサーバはPHPで作れそうな感じです。再生するクライアント側はHTMLとJavascriptですね。HTMLとJavascript使えば再生ボタンや停止ボタンも簡単に実装できますし、UI自体は結構簡単に作れるんじゃないかなと考えてます。問題はやはりサーバとの音楽ファイルのやり取りの部分ですね。

また、HTMLとJavascriptだけでスマホアプリが作れるような手段もあるようなので、ブラウザで操作するのではなくサーバで音楽を管理できるオリジナルの音楽再生アプリが作れそうですね。夢が広がります。