ちゅんラヂは国内ラジオのサイマル配信放送を聴くためのウェブ・アプリです。iNet Radio Receiver(*2)を複製してリニューアルしました。
ここ数年で広義な意味でHTML5関連技術導入が進みました。サイマル配信にもオープンな技術が採用され初めて、モダンブラウザで聴ける環境が整い始めました。そこでiNet Radio Receiverをちゅんラヂと改名して復活させました。
サイマル配信ラジオを実際のラジオの様に一つの受信機（ちゅんラヂ）で聴けるウェブ・アプリを目指しています。配信元の考え方により、他サイトのウェブページから聴くことを阻止している配信サイト(*1)があります。その様な配信はブラウザだけでは対応できませんがコンパニオン・アプリ(*3)で聴ける様にする予定です。
操作方法ですが、説明が要らないユーザーインターフェイスを目指しております。もし説明なしでは操作できない部分がありましたらお知らせ下さい。
操作できる箇所はマウスのカーソルを当てると、ポインター（指さしマーク）が表示されて、青背景で白抜き文字で表示される部分です。
サイマル放送は都道府県毎にラジオで聴けると思われる放送局を放送周波数順に並べてあります。
ネット専門局は音楽ジャンル毎の文字コード順です。ネット配信専門局のプリセットはここの落書き人がザッピングした局のみです。リンク情報と海外リンクにネットラジオを配信しているサイトや、ちゅんラヂの様にその配信局をまとめているサイトへのリンクがありますので、選局リストに無い局はそちらからお探しください。
利用しているIPアドレスから自動的に都道府県が判定されます。ここをクリックすると判定エリアの変更ができます。判定エリアはクッキーで保持されますので、次回の起動ではそのクッキー値が優先されます。ブラウザを閉じる時にクッキー削除するように設定している場合は、起動時のエリア自動判定が新たに行われます。なおエリア自動判定はradikoとは別物です。
起動時に判定されている都道府県の選局リストが展開表示されます。エリア天気は判定エリアに連動しています。
選局されている放送局の背景色が変わります。その右下に|Oueside Link|と表示されている局は埋め込みではなく公式プレイヤーサイトへの外部リンクです。
サイマル配信は都道府県毎にラジオで聴けるであろうラジオ局の周波数順です。ネットラジオについてはジャンル毎に分類してあります。
ちゅんラヂ用のシンプルなネットラジオ受信プレイヤーです。
・Play/Pause：受信開始と再生一時停止は後ろで受信を続けています。
・Visualizer：再生音の周波数分布グラフが背景に表示されます。
・Volume：Visualizer欄をクリック(タップ)で音量調整できます。
・Counter：再生経過時間。
このプレイヤーは別HTMLになっており、単独で埋め込みプレイヤーとして利用できます。
えぶりな機能をリリース予定
国内のネットラジオ関連のリンク集です。好みなネットラジオが見つかるかもしれません。
海外発のネットラジオ関連のリンク集です。海外のネットラジオは豊富で好みなネットラジオを探して下さい。
判定エリアと連動している天気予報です。天気マークの部分をクリックすると、対応したエリアの詳細な天気予報ページが開きます。 From Weather Hacks of livedoor.
ちゅんラヂはウェブアプリです。このちゅんラヂを利用するの事で以下の様に感じる方への情報です。
そこでGoogle Chromeを利用してローカルアプリ風に起動する方法です。コマンドプロンプトで以下の様に打ち込んでみて下さい。
これでちゅんラヂがローカルアプリケーション風に起動する筈です。
このコマンドをバッチファイル(*1)にしてデスクトップなどに置いておけば好きな時に起動できます。
パソコン起動時にちゅんラヂを起動したい時は、スタートアップの中に上記コマンドのバッチファイルを置けば可能です。
audioタグ+Web Audio APIは相変わらずブラウザにより状況が異なります。
Windows 7ではVivaldiが無問題です。ChromeはHE-AACv2(JCBA)のSBRが捨てられます。Firefoxは選局を繰り返すと受信出来なくなることがあります。他にWaterfoxやEdge Dev(Chroniumベース)でも概ね問題なく動作しています。 （2019-09時点）
Windows 10に関してはVivaldiとChromeとFirefoxはWindows 7と同様です。Edgeでも動作しています。
Android環境ではChromeとFirefoxとKiwiで動作しています。Edgeでは不完全な動作です。
MACとiOSのSfariはWeb Audio APIのサポートが部分的であり動作いたしません。
なおHTML5とES6とCSS3の組み合わせを利用していますのでレガシーブラウザでは動作いたしません。
ちゅんラヂ
┌───────┐
※ちゅんラヂから見た状況です │ ブラウザ │
┌─┬────┬─────────┼─┬─┬─┬─┼────┐
│PH│サイマル│ 配信方式 │GC│FF│VI│EG│ 備考 │
┝━┿━━━━┿━━━━━━━━━┿━┿━┿━┿━┿━━━━┥
│ │らじる │HLS(HE-AAC) │◎│○│◎│*9│ │
│パ├────┼─────────┼─┼─┼─┼─┼────┤
│ │radikojp│HLS(HE-AAC) │－│－│－│－│*2 │
│ソ├────┼─────────┼─┼─┼─┼─┼────┤
│ │JCBA │HLS(HE-AACv2),icy │*7│*A│◎│*9│ │
│コ├────┼─────────┼─┼─┼─┼─┼────┤
│ │CSRA │mmsh,mmst,srtp │－│－│－│－│WMP依存 │
│ン├────┼─────────┼─┼─┼─┼─┼────┤
│ │リスラジ│HLS(AAC) │◎│*A│◎│*9│ │
│ ├────┼─────────┼─┼─┼─┼─┼────┤
│ │AFN │icy(MP3) │◎│*A│◎│*9│ │
┝━┿━━━━┿━━━━━━━━━┿━┿━┿━┿━┿━━━━┥
│ │らじる │HLS(HE-AAC) │◎│○│－│*8│ │
│ス├────┼─────────┼─┼─┼─┼─┼────┤
│ │radikojp│HLS(HE-AAC) │－│－│－│－│*3 │
│マ├────┼─────────┼─┼─┼─┼─┼────┤
│ │JCBA │HLS(HE-AACv2),icy │◎│○│－│*8│ │
│ホ├────┼─────────┼─┼─┼─┼─┼────┤
│ │CSRA │mmsh,mmst,srtp │－│－│－│－│ │
│*4├────┼─────────┼─┼─┼─┼─┼────┤
│ │リスラジ│HLS(AAC) │◎│○│－│*8│ │
│ ├────┼─────────┼─┼─┼─┼─┼────┤
│ │AFN │icy(MP3) │◎│○│－│*8│ │
┝━┿━━━━┿━━━━━━━━━┿━┿━┿━┿━┿━━━━┥
│ │らじる │HLS(HE-AAC) │◎│*6│◎│－│ │
│あ├────┼─────────┼─┼─┼─┼─┼────┤
│ │radikojp│HLS(HE-AAC) │◎│*6│◎│－│ │
│い├────┼─────────┼─┼─┼─┼─┼────┤
│ │JCBA │HLS(HE-AACv2),icy │◎│*6│◎│－│ │
│る├────┼─────────┼─┼─┼─┼─┼────┤
│ │CSRA │mmsh,mmst,srtp │◎│*6│◎│－│ │
│*5├────┼─────────┼─┼─┼─┼─┼────┤
│ │リスラジ│HLS(AAC) │◎│*6│◎│－│ │
│ ├────┼─────────┼─┼─┼─┼─┼────┤
│ │AFN │icy(MP3) │◎│*6│◎│－│ │
└─┴────┴─────────┴─┴─┴─┴─┴────┘
2019-07現在、AudioタグとWeb Audio APIの連携は曲者です。
以下のサイトにアクセスします。個人情報などのサーバーへの送信や保存は一切行っておりません。
・7design.jp ： ちゅんラヂが置いてあるサイト
・code.jquery.com ： jQueryのCDN
・その他 ： 各ネットラジオの配信元
HLS配信でm3u8ファイルへのアクセスがTLSに対応していない配信サイトが有ります。その様な場合に、ちゅんラヂをTLSでアクセスすると混在コンテンツ制限(*1)で、TLS配信に対応していなHLS配信を聴くことができません。
なお「http:」でのアクセスに限定することは時代に逆行していることは認識しております。この処置はプリセットしてあるHLS配信サイトすべてがTLSに対応するまでです。それまでの暫定的は対応です。なお「ちゅんラヂあいる」は混在コンテンツ制限を受けませんので、TLSアクセスが可能で、そのリリース時にはお知らせ致します。
ちゅんラヂのライセンスですがcopyleftです。著作権は放棄しませんがフォークは自由です。
・HLS受信はhls.jsを利用しました。2018/4時点のPCブラウザでHLS再生対応しているのはSafariのみですが、hls.js利用で他のモダンブラウザでもHLS再生が出来る様になります。
・Audio Visualizerでプレイヤーに音圧＆周波数分布の可視化を実装させて頂きました。利用する場合はこちらの情報もご覧ください。
・エリア天気にライブドアのWeather Hacksを利用させて頂きました。
・エリア判定にIP Geolocation APIを利用させて頂きました。具体的には「http://ip-api.com/json」から戻される位置情報から判定しています。
Web Serverをお使いの方なら、独自な選局リストで利用できます。当サイトのtunein2data.jsを取得して、自分専用の一覧に書き換えてServerにアップロードしてください。そしてちゅんラヂのURLの最後に「?data=アップした選局一覧のURL」で可能です。
聴く局が決まっている時に「開く時のエリアと選局を固定したい。」ということもできます。例えば神奈川県のKamakuraFMなら「https://www.zdesign.info/tunein2radio.html?area=JP14&receive=JOZZ3AF_FM_031_14」とブックマークしておき、これを開けば可能です。reveiveの値は/js/tunein2data.jsのJSONデータを参照して下さい。
公序良俗の反するサイトに当サイトを埋め込み及びリンクする行為。
プロプライエタリなソフトウェアに、当サイトの著作物を利用する行為。
当サイトを誹謗中傷する行為。
2018-01-01 iNet Radio Receiverからプレイヤー機能を除いたちゅんラヂを公開
2018-03-xx JCBAやMP3配信している局を埋め込みプレイヤー化（icyでMP3）
2018-04-xx らじる★らじるとListen Radio埋め込みプレイヤー化（HLS）
2018-04-xx エリア天気予想サービスでYahoo!がサービス終了、そしてライブドアに乗り換え
2018-04-xx JCBA等の一部配信に音量と周波数分布を表すVisualizerを実装
2018-04-30 選局変更時に音量調整値を保持、かつ人の耳で感じる音量調整増減比に
2018-05-06 選局欄に配信組織のアイコンを表示
2018-05-07 エリア自動判定を復活
2018-06-01 大きな機能拡張は終息、プリセット局一覧と、ちゅんラジあいる連携等の軽微な調整は続けます
2018-09-04 エリア選択が解りづらいという要望に仮対応
2018-10-11 プレイヤーに状況表示を追加 |…Loading…|…Pausing…|…ERROR…|
2019-04-吉日 スマホからのアクセスが増えたことから機能拡張終息を撤回
2019-07-吉日 v2 4月からの作業を続けていたスマホ対応したアルファ版を公開
2019-08-30 選局繰り返しで不安定になる不具合が解消しましたので正式版として公開
2019-09-15 V3.01 表部分のJavaScriptを全面的に断捨離＆書換
2019-09-22 V3.02 音量調整をjQueryのスライダーから独自方式に変更
2019-09-22 V3.03 Visualiserの周波数表示の訂正
2019-10-25 V3.04 Visualiserの周波数表示の訂正の訂正（やっぱり周波数表示が間違っていた）
2019-10-25 V3.05 Visualiserの描画幅不具合の訂正（レスポンシブで表示幅の追従不具合を訂正）
2019-11-23 V3.05 ブラウザのタブに受信中のラジオ局名を表示（サーフィン中も受信中の局が一目でわかる）
2020-04-05 jQuery排除取り残しで初回自動都道府県判定がエラーになっていたので訂正
2020-05-02 V3.06 更に残っていたjQuery記述をネイティブJavaScriptで置換
※jQueryは便利でしたがES6を積極的に使う事にしましたのでjQuery依存から脱却しました。
・ローカル受信を行うコンパニオンアプリ「ちゅんラジあいる」の一般非公開（終息）
・「えぶり三昧」という謎機能の実装計画スタート（好きな番組が終了して気力喪失中）
・その他、細かな部分で気になっている箇所の改善
・番組情報などを表示（NHK以外は公式なデータ提供が無い為に微妙）
・ちゅんラヂのブラウザ拡張版（落書き人の野望がチラつく）
・メモ録機能の実装（↑ができたら考えるかも↑）
・Icecastを自前受信してmetadataを表示（落書き人が欲しい機能）
Twitterから追加して欲しい国内のサイマル配信ラジオをお知らせ下さい。お知らせ頂きたい情報は、そのネットラジオのプレイヤーURLや、そのネットラジオのホームページのURLです。ご返事が必要な場合はメールアドレスも合わせてお知らせ下さい。
技術的にちゅんラヂ・プレイヤーはHTML5のaudio要素を利用していますので特定環境に依存したプロプライエタリな配信は追加できません。また曲ごとにJavaScriptでダウンロード再生しているサイトも追加できません。
なお、ネット配信専門局については、追加可否とジャンルなどの分類は当該落書き人の感覚で行わせて頂きます。また、配信組織とサーバーが所在する国において著作権侵害が疑われるネット配信・公序良俗に反する・反社会的組織・宗教色が強い・特定な思想色が強い等で公共性が希薄なネットラジオについては追加できません。予めご了承下さい。
ご質問者はちゅんラヂを再読み込みさせているとの事ですが、選局欄で現在受信中で紺色になっている選局中放送局の所をクリックして下さい。この方法であれば素早く再受信されます。
なお、受信が止まる現象ですが、利用中のネット状態によりパケットが頻繁に途切れる時に発生します。再受信を10回まではリトライしておりますが、これを超えるとリトライを停止させています。リトライを永久に繰り返すとDoS攻撃モドキになってしまいますのでご理解下さい。
また、配信元自体が配信を停止している場合もございますので、聴けない場合は公式サイトで聴けるかをご確認下さい。公式サイトで聴けるのにちゅんラヂで聴けないという事がございましたら、改善を検討しますのでお知らせ下さい。
Special Thanksの項をご覧ください。
Webアプリとしては出来ませんので外部リンクにしてあります。radiko.jpはHTTP Headerの「X-Frame-Options」や「Access-Control-Allow-Origin」等でOrigin規制が行われています。ブラウザはこの規制に従っていますので、Webアプリとしてはこれらの制限を回避することは出来ません。
これは質問があった訳ではなく落書き人自身が経験した事象です。uBlockは動作が軽く悪質な広告サイトを有効にブロックしてくれます。
その検出方法の詳細はわかりませんが、幾つかのネットラジオ配信がブロックされてしまう事が判りました。身近なところではradiko.jpのプレイヤーがブロックされてしまいます。
そこで、あれ聴けないなと感じたら、uBlockの無効をクリックしてみて下さい。
誤ブロックが有ったとしても、uBlockはAdblock Plusの様にメモリーを異常に多く消費したりしませんので使い続けております。
ご指摘の通りでした。iNet Radio Reviver時代は上段に表示されるエリア（都道府県）のみを選局リストに表示する仕組みでした。ちゅんラヂは全都道府県を選局リストに表示している事から、ご質問者の言われる通り意味不明なものになっていました。そこで以下の様に改善しました。
・エリア(左上)は以前と同様に選択されている都道府県を表示
・その下に選局中の情報には「東京都 > TBSラジオ」の様に表示
・エリア(左上)をクリックすると都道府県一覧からエリアが選択できる
・選局リストのエリアをクリックでもエリアが選択できる
・判定中のエリアと天気予報の連動はしています。
エリア選択の方法が２通りあります。エリア(左上)から選択する方法ならスクロールの手間がなく操作が簡易です。
通常なら選曲リストで、選曲中の放送局をクリックしてください。これで再受信が行われます。
これでも受信が再開されない場合には、[HomePage]をクリックして、公式サイトで聴けるかを確認してください。公式で正常に聴けるのにちゅんラヂで聴けない場合は、その放送局名をお知らせくだされば調査いたします。
なお、下記の局は24時間配信を行っていない様です。
・エフエムしろいしWith-S（CSRAには配信停止とあるが不定期に配信されている）
・FMわいわい （ネット専門局）
・沖縄しまくとぅば放送局 （ネット専門局）
上記以外にも深夜に放送を停波する局があります。
ポーズ機能は受信を続けています。その受信内容は内部で保持し続けていいますので通常ならポースした所から再生が行われます。
しかし内部で受信内容を保持する為のリソース(メモリー等)に限界があります。限界はブラウザによっても違うようです。その限界を超えた時にはポーズ時点からの再生が出来なくなります。
そこでポーズではなく停止を行う場合は受信を停止させて下さい。受信停止は右上のちゅんラヂアイコンをクリックして下さい。
落書き人のココログへの埋め込みを拝見された方から問い合わせがありました。
特にクロスサイト制限等の技術的な制限は行っておりませんので埋め込みはできます。
なお仕様変更等を予告なく行うことがあります。このことから自前で作成さることをお勧めいたします。技術的にはaudioタグとWeb Audio APIの組み合わせです。ちゅんラヂのHTMLソースは自由にリバース・エンジニアリングして下さい。
Wi-Fi環境のAndroidのブラウザでちゅんラヂを利用して、Bluetoothスピーカーでラジオを聞きたいという相談の中で、画面がスリープになると受信が止まってしまうという相談を受けました。
この場合は充電中と思われますので、Wi-Fi設定の中のWi-Fiスリープ設定にて「電源接続時にはスリープにしない」にして下さい。
充電中以外でもWi-Fiが切れない様にするには「スリープにしない」に設定してください。この場合にはバッテリーの消費が大きくなります。しかしAndroid用のネットラジオ用アプリはWi-Fiがスリープならないように制御しています。つまりネットラジオ用アプリでラジオを聴いている人ならバッテリーの消費は同等です。
なおここの落書き人はWi-Fiをスリープで常に切らない設定にして、必要な時に手動でWi-FiをON-OFFしています。Wi-Fiが必要無い時はバッテリーの持ちが良くなりますし、暗号化されていない悪意のあるWi-Fiに遭遇して自動的に繋がってしまい、乗っ取られるという事態も防げますので精神的にも安心です。
その現象が再現するWindows10環境がありました。Windows10でもこの現象が発生しないパソコンもあります。原因がさっぱりわかりません。
ストリーミングの受信は継続していて音だけが止まってしまいますね。
問題が起きているパソコンのChromeでは問題なく利用できています。そこでChromeで利用することをお勧めいたします。
Firefoxに何かの問題がありそうですが、すべての環境でこの現象が再現するわけではありません。引き続き気には止めておきますが、原因が特定できるかはわかりません。
追伸 2019-09-01
再選局でWeb Audio APIのリソース開放して再接続するように改善しましたら解消しました。Firefoxはこれ以外にもガベージコレクションが弱い様で、メモリー利用が異常に膨らむ事が多々あります。リソース開放が有るAPIの場合は能動的に開放させた方が良いようです。ちなみにChromeでは多少は行儀悪く後片付けをしなくても安定しています。
プリセットデータは同じくJSONPです。ファイル名が変わっています。
JSONPデータ：http://www.7design.jp/js/tunein2data3.js
URL引数のdataで独自プリセットJSONPデータにて起動する機能も生きています。JSONPですのでクロスドメインが可能ですので、お使いのHTTPサーバーに置く事が可能です。
独自JSONPで起動：http://www.7design.jp/tunein2radio.html?data=～JSONPへのURLをURLエンコードして指定～
なお現状のJSONオブジェクトの仕様はドキュメント化をサボっていますが、現状のJSONデータを整形して閲覧することで、ある程度は推測できるものです。
独自にプリセット局を追加する場合は、事前にちゅんラヂプレイヤーで再生できるストリーミングなのかを確認してください。
ちゅんラヂプレイヤー：https://www.7design.jp/tunein2player.html?input
HTML仕様で表示できない配信があります。
ビジュアライザはWeb Audio APIという機能を利用しています。その制限によるもので、詳しくは『audio要素とWeb Audio APIでの「Access-Control-Allow-Origin」の扱いに違いが』を参照して下さい。
１．やりたいこと
ちゅんラヂでラジコは別タブで公式サイトを開く。
別タブはwindows.openで開いています。
２．ブラウザ設定
“ポップアップウィンドウをブロックする”にチェックが入っている、つまりwindowのpup-up表示を抑止している。
３．Firefoxでの問題点
windows.openで別タブに一回目は正常に開く。
windows.closeして、再度windows.openで別タブに開こうとすると開かない。
妙なこととして、windows.openの箇所にブレークポイント設定して、ステップインして、Ctrl+ｒで再読み込みると別タブが開く。
“ポップアップウィンドウをブロックする”のオプションで“http://7design.jp”にたいして許可を与えると動作は正常。
これ、何が問題かというと
・POP-UP抑止が別タブを開く動作に影響している
・１回目はOKで２回目は開かない。
もしFirefoxの仕様解釈が、別タブを開くのもPOP-UPと同等なら、１回目だけ開くのは変です。
因みにChromiumは別タブで開くのはPOP-UPじゃないという仕様解釈です。
４．結論
この問題は、かなり前にフィードバックしましたが改善される気配がありません。
そこで“ポップアップウィンドウをブロックする”にチェックが入れたままで、オプションで“http://7design.jp”からのPUP-UPを許可してください。 ^^;
JavaScriptでES6を使い始めましたので、IE11では構文エラーになり開きません。
今後は、ちゅんラヂでIE11をサポートする事はありません。
IE11でインターネットを閲覧することは機能的にもセキュリティ的にもおすすめできません。他のボダンブラウザに以降することを強くおすすめいたします。
国内の総てのサイマル配信ラジオを「ちゅんラジ」環境で聞けるようにしたいという思いで作成したコンパニオンプログラムです。
・radiko.jpがちゅんラヂで聴けるようになります
・WMP依存なCSRAがモダンブラウザでも聴けるようになります
・メモ録が可能（受信中の放送をメモしたい時にクイック録音）
・Visualizerが機能しなかった局も機能するよになります
手法的には「ちゅんラヂ」がユーザーインターフェイスを担い、サイマル配信の受信はFFmpegが担います。「ちゅんラヂあいる」は「ちゅんラヂ」からの指示で「FFmpeg」をキックするランチャーとして機能します。つまりウェブアプリ(柔軟なUI)とローカルアプリ(ウェブ制限を受けない)の良いとこ取りなハイブリット構成で動作します。
「ちゅんラヂあいる」はnode.js上で動くローカル ウェブ サーバーです。FFmpegはライセンス的に私的利用以外は微妙です。ということで現状は非公開です。
今後は、ライセンス的に微妙なFFmpegのランチャーではなく、面倒なライセンスに抵触しない様に、配信をデコードせずに橋渡しを行うだけのローカルプロキシーに書き換える予定です。
追伸 2019-09-24
現状のちゅんラヂあいるの公開計画はキャンセルしました。ループバックであっても実質的にWebの制限を外す中継機能は公開不可と判断しました。
ちゅんラヂあいるの資産をディスクトップアプリ（Node.js+Electron）に衣替えさせる予定です。