ちゅんラヂのビジュアライザー

ラジオは聞くもので見るものじゃないですが、ふとプレイヤーに目をやった時に動きがほしい。ちゅんラヂのビジュアライザはそんな経緯で実装したものです。

それで判ったことは、放送局によって高音の伸びに差がある事です。
同じJCBAからの配信でも局によって高音の伸びが違います。かなり差があります。
過入力でクリッピングしている放送局は高音の音圧が大きく歪みが発生しているのが判ります。
面白いのは、アナウンスの声とは連動していない信号が、モスキート域にかなり強いレベルで入っている番組がありました。これって若者向けに何らなのメッセージを埋め込んでいるのかなと勘ぐりたくなるものでした。残念ながら私の耳では確認しようがありません。

本題のビジュアライザーの実装方法です。
原作は「Web Audio APIを使ってDAW（っぽいもの）を作ってみる」で、それをフォークしてちゅんラヂ用に機能を調整しました。有難うございます。ビジュアライザーの技術的な理解はそちらをご覧ください。

ここでは、機能調整した内容だけを書き留めておきます。

■フォークしして機能調整したソースコード
　http://7design.jp/js/tunein2vis.js
　ソースコード中にコメント記述してありますので解説は省略します。

■機能調整したこと
・描画色をちゅんラヂ用に青系に変更
・stop機能を追加　※ちゅんラヂで一時停止や再選局した時に描画ループを止める為
・周波数目盛表示のレスポンシブ対応
・スペアナ描画と周波数目盛のズレを改善　※描画周波数の求め方を改善
　　確認事例 http://7design.jp/tunein2radio.html?area=NET13
・正弦波のスペアナ表示で歯抜け欠落する事があったので改善
・音量バーを表示
・Web Audio APIじゃない時は独自アニメイメージと音量バー情報のみを描画
・スペアナの描画を20Khzまでに限定 ※ちゅんラヂは20Khz以上が不要な為

■機能追加したメソッド
・stop() 描画ループを止める ※Web Audio APIのリソース開放前に利用
・setInfo() 右下に情報表示させる情報を受ける ※ちゅんラヂでは音量表示で利用
・setVolue() 音量バーの値を受ける

■実装事例
・ビジュアライザー組み込み完成形【ちゅんラヂ】
http://7design.jp/tunein2radio.html　　　　スペアナ表示
http://7design.jp/tunein2radio.html?wave　　波形表示
・利用しているイメージファイルは以下のフォルダからご自由に取得してください
https://www.7design.jp/img/
・ブログへのちゅんラヂプレイヤー埋込事例
http://nakkara.cocolog-nifty.com/nakkara/cat24152847/index.html