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

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)
  コミュニティ ラジオのサイマル配信。
  サードパーティアプリに対して排他的。
  

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

上記デモで作成したモジュールはちゅんラヂに反映済み。
そして、ちゅんラヂ プレイヤーを埋め込んだ事例。

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