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

主なライブ配信形式

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

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と規格が乱立したことから、それを標準化する目的で作成されました。
BBCのネットラジオがこの方式を採用しています。日本のネットラジオには採用さていません。(後述)
受信するにはMedia Source Extensions(MSE)でaudioタグに流し込む再生方法で、dash.jsというライブラリを用いるのが主流です。
なおiPhoneはMSE鎖国しておりHLS以外の類似方式のMPEG-DASHを排除しています。
MPEG-DASHの受信に対応した例としてちゅんラヂでBBCを選局してみてください。

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)

日本国内
radiko.jp

HLS(HE-AAC)

県域(PCはIPアドレス,スマホはGPS位置情報)制限あり
独自認証ハンドシェイクでサードパーティ排除
コミュニティFM by JCBA

~~HLS(HE-AAC) ICY(HE-AAC,mp3)~~
独自(OPUS)になり今後は？

~~三種類の方式で幅広いデバイスのブラウザで聴取でるオープンな方式。~~
2022.04 一転してプロプライエタリな配信方法になり対応するサードパーティ激減。
コミュニティFM by リスラジ

HLS(HE-AAC)

当初の開始時は革新的ビジネスモデルだったが、それは頓挫して現在は地道な配信のみになっている。
コミュニティFM by 北関西ジャパンネット

RTSP(WMA)

主にCSRA加盟局向けにWindows Media Serviceによる配信を行っている。
現在はブラウザで聞く環境はない。Windows Media Playerなどで聞く。
コミュニティFM by FM++

独自(OPUS)

独自配信方式で不定期に排他的強化が行われ続けて公式以外では聞けない。
CSRA
(Community Simul Radio Alliance)

配信なし→

混同されやすいですが、自ら配信を行って居るわけではありません。
配信インフラはリスラジや北関西ジャパンネットが使われている。

HLS受信を試す

Codesandboxにて試しています。

JCBA受信を試す

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

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

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