ブラウザでネットラジオを受信する

ちゅんラヂを作成している過程で調べたネットラジオのライブ配信の受信方法です。

主なライブ配信形式

配信方式ごとにブラウザで聞く方法の概要です。

HTTPでの配信

HTTPプロトコルでのLive StreamingはIcecastとShoutcastがあります。
ブラウザのaudioタグで単純に受信できます。ただしAudioタグではStreamingの中にmetadataを含む受信はできません。metadataはVLCなどの専用アプリが必要です。
下記の通り、ブラウザで簡単に聞けることから、海外では主流な配信方式です。

    <audio
        controls
        src="～配信URL～">
            Your browser does not support the
            <code>audio</code> element.
    </audio>

MPEG-DASH配信

HTTPプロトコルでチャンクに分割されたデータを連続ダウンロートして再生する配信方式です。
チャンクの一覧はmpdファイルで提供されます。
MPEG-DASHは類似したベンダー依存なAppleのHLS,MicrosoftのSmooth Streaming,AdobeのHDSと規格が乱立したことから、それを標準化する目的で作成されました。
受信するにはMedia Source Extensions(MSE)でaudioタグに流し込む再生方法で、dash.jsというライブラリを用いるのが主流です。
MPEG-DASHの受信に対応した例としてちゅんラヂでBBCを選局してみてください。
残念ながら日本のネットラジオには採用例がありません。
日本ではシェアが高いiPhoneがHLS以外の類似方式のMPEG-DASHを排除していることから、採用しずらいのかもしれません。

HLS配信

Appleが提唱する方式でMPEG-DASHに類似した配信方式です。チャンクの一覧はm3u8ファイルで提供されます。
日本ではiPhoneのシェアが高いことから、サイマル配信ラジオにて主流になっています。しかし世界的に見るとガラパゴスかもしれません。
AppleのSafariのみaudio要素のみで受信できます。他のブラウザではMedia Source Extensions(MSE)でaudioタグにて流し込む再生方法での対応です。この方法はhls.jsというライブラリを用いるのが主流です。

HTTP配信以外

RTSPプロトコルでの配信があります。現在は新しいネットラジオで採用されるケースは見かけません。以前は主流だったMicrosoft Media Serviceを利用した方式でしたが、現在は日本で若干残っている程度です。
AdobeのRTMPもFlash Playerが廃止されたこともあり、ほぼ使われなくなりました。
つまり、HTTP以外のプロトコルは、ネットラジオではほぼ使われなくなりました。

日本のサイマルラジオの状況

日本のサイマルラジオはサードパーティアプリに対して厳しい。
配信サイト以外のアプリで聞いてほしくない傾向が強い。

名称

配信方式

聴取環境
らじる★らじる

HLS(HE-AAC)

NHKラジオのサイマル配信で日本国内限定、安定して聞ける。
サードパーティアプリを実質的に許容している。
radiko.jp

HLS(HE-AAC)

民法ラジオ局及びNHKラジオのサイマル配信
県域(PCはIPアドレス,スマホはGPS位置情報)制限あり
独自認証ハンドシェイクでサードパーティ排除(しかし存在している)
JCBA

~~HLS(HE-AAC) ICY(HE-AAC,mp3)~~
2022.04 独自(OPUS)

コミュニティラジオのサイマル配信。
サードパーティアプリを実質的に許容している。
~~三種類の方式で幅広いデバイスのブラウザで聴取でるオープンな方式。~~
2022.04 一転して独自配信方法になり対応するサードパーティアプリ激減。
リスラジ

HLS(HE-AAC)

コミュニティラジオのサイマル配信。
サードパーティアプリを実質的に許容している。
当初は革新的ビジネスモデルだったが、それは頓挫して現在は地道な配信のみになっている。
北関西ジャパンネット

RTSP(WMA)

主にCSRA加盟局向けにWindows Media Serviceによる配信を行っている。
現在はブラウザで聞く環境がない。Windows Media Playerなどで聞く。
サードパーティアプリを実質的に許容している。
CSRA
(Community Simul Radio Alliance)

配信なし→

コミュニティラジオのサイマル配信組織。
自ら配信を行って居るわけではない。配信インフラはリスラジや北関西ジャパンネット等が使われている。
FM++

独自(OPUS)

コミュニティラジオのサイマル配信。
サードパーティアプリを完全シャットアウト。

HLS受信を試す

Codesandboxにて試しています。

JCBA受信を試す

2022年4月にプロプライエタリな配信方式へ移行してしまい、HTMLのAdio要素では聴けなくなってしまった。
そんなJCBAを受信するデモ。

上記デモで作成したモジュールはちゅんラヂに埋め込み済み。

JCBA受信を行うJavaScriptのソースコードはモジュール化してあります。
公開ですが、「動けばそれで善し」な汚いコードなので恥ずかしくて公開できません。
非同期なcallbackをPromiseで読みやすくしてはいますが、深く潜り込むPromiseはさながらCallback地獄で並列処理もどき。書いた本人でも難読案件^^;
JavaScriptで並列処理をうまく表現できるコーディング手法を模索中です。読みやすいコードに書き換えることができたら公開します。