#はじめに
これは「イケてる音楽を流すインターネットラジオを自分で作ってみたい」という漠然とした願望からスタートして、知識ゼロから実際にMVPを開発するまでの経緯をまとめた記事となります。
ちなみに今回のプロジェクトで出来上がったものがこちら↓
https://amxradio.ch
開発期間は2日間まるまる使いました。
（現在掛かっている曲は僕の友人であり当プロジェクトのパートナーである@yubotanaka 氏の制作です）
今の時代、YouTubeのライブ配信やSpotifyを使えばインターネットラジオ的なものはすぐに作れそうなものですが、そこはあえて使わず、あくまで**「自分が用意したサーバーから配信し、自分のデザインしたホームページ上で流す」**という形式をとっています。
#この記事の目的
実際に自分でインターネットラジオを作りたいと考える方はそれほど多くないと思いますので、この記事では開発に使ったツールや掛かった費用などを参考程度にさらっとご紹介できればと思います。細かな開発の手順を知りたいという方はこちらのYouTube動画（※英語です）が参考になるかと思います。
#MVP開発
###インターネットラジオに必要な技術
そもそもインターネットラジオにはどのような技術が必要なのかを簡単に整理しておきます。大きく分けると２つの機能に大別できます。１つはプレイリスト（複数のmp3ファイル）から自動で選曲するプログラム。もう一つはその音声データをブラウザに「ストリーミング配信」するプログラムです。
言葉で言ってしまえば単純ですが、このストリーミング配信というのが音声データを細切れにして配信したり、バッファを計算したりと、中々ハードルの高い処理が必要となります。これを自分で一から開発することは現実的ではないので、まずは適当なサービスやツールが存在するのかを調べました。
###ツールの選定
いくつかツールを調査した結果、大きく分けて以下の２通りの方法があることが分かりました。
① MixlrやCloudRadioなどといった有料サービスを利用する
② IcecastやLiquidSoapといったオープンソースの無料ツールを利用する
今回は②のオープンソースのツールを利用する方針を取りました。
理由は、有料サービスの場合は利用料が掛かるという点もありますが、何かと自由度が低い（プレイ画面が出来合いのものだったりプレイリストの編集が画面上でしかできなかったり）ことが決定打となりました。②のオープンソースを利用する方法であれば、プレイ画面も自分でデザインすることができますし、プレイリストの編集もサーバー上でスクリプトを組んで自動化したりといったことが可能になります。
###技術構成とランニングコスト
最終的な技術構成はこのような形になりました。
- ストリーム配信用のサーバー（Ubuntu 18.04）
- Icecast
- LiquidSoap
- プレイ画面配信用のWebサーバー（Ubuntu 18.04）
- Node.js + Nginx
- プレイ画面
- React.js (Redux)
費用としてはサーバー２台（10ドル/月）とドメイン使用量（1ドル/月）で、ランニングコストとしては一ヶ月に1,200円程度となりました。
###IcecastとLiquidSoapの説明
この二つのツールがインターネットラジオ配信の根幹を支える部分ですので少し説明します。
Icecast
ストリーム配信用のエンドポイントを用意するためのツールです。ストリーム配信を実現するためには、音声ファイルのデータを細切れにして少しずつクライアント側に配信したり、途中で音声が途切れないようにバッファを持たせたりと、ブラウザでスムーズに再生するための様々な処理が必要になります。Icecastはこういった「ストリーム配信」に必要な諸々の処理を自動でやってくれます。
LiquidSoap
用意したプレイリストから自動で選曲してIcecastに配信するためのツールです。例えば、時間帯によって配信するプレイリストを変えたり、何回かに一度はラジオのジングルを流したりといったことも、LiquidSoapに簡単な設定を追加するだけで可能になります。
IcecastとLiquidSoapを組み合わせることで、インターネットラジオの基本的な機能はほぼほぼ出来上がります。後はプレイリスト（mp3ファイル）を用意しておきさえすれば、LiquidSoapがいい感じに選曲してくれて、それをIcecastがhttp経由で配信してくれる。あとは、Icecastで設定したURLをブラウザに打ち込めば、インターネットラジオの出来上がりです！！
この時点での成果物はこのような形になります。まだプレイ画面はありませんが、ブラウザ上でストリーミング再生ができていることは確認できます。
###フロントエンド構築
フロントエンドはReactとReduxで構築しています。
色々とそれらしくなるように曲名やRecently Playedなどを表示していますが、ここは通常のWeb開発と同じです。
ここで重要なことはただ一つ、Audioタグに上記のストリーム配信用のURLをくっつけるだけです。あとはこのAudioエレメントのplayメソッドを実行すればページ上でストリーミング再生が開始されます。
<audio
preload="none"
controls
src="https://stream.amxradio.ch/basic-radio.ogg"
/>
###最後に
初めは本当にできるかどうか心配でしたが、 IcecastやLiquidSoapといったツールのおかげで、思ったよりも簡単に実装できました。
今回は実装部分については全く書いておりませんが、実際のコードをみたい方はQiitaの以下の記事をご参照ください。
IcecastとMixxxを使っておうち限定DJストリーミング垂れ流しシステムをつくったお話。
Icecastとliquidsoapを用いたメディアストリーミングサーバーの簡単な作り方
また、今回作ったラジオはこれで終わりではなく、今後も緩く運営を続けていくつもりです。日本を含むアジア圏のインディー音楽を垂れ流すラジオにしたいと思っております。