音量調整UI
プレイヤーのVisualizer表示枠をマウスで左右にドラック(スマフォならスワイプ)することで音量調整ができます。
弾くように素早くドラック(スマフォならフリック)することで、音を切る、音を最大にする事ができます。
知らないと判りづらいインターフェイスかもしれませんが、判ってしまえば直感的かと思います。
マウスのドラック(スワイプ)の検知は以下のモジュールを利用しています。
スワイプ、フリック
耳で感じる音量変化に調整
ちゅんラヂの音量調整はAudio要素のvolumeプロパティで行っています。
このプロパティは値(x)に対して音圧db(y)が直線的（x = yの比例関係）に変化する特性(Bカーブ)です。
しかし人の耳に感じる音量変化はプロパティ値xが小さい値の方で大きく変化し、xが大きい値に近づくと音量変化が緩やかに感じま。
これはオーディオアンプのボリュームと同じ様に、Xとyの関係をAカーブまたはDカーブにすることで、人の耳で自然な変化に感じるようできます。
BカーブをAカーブ,Dカーブ相当する場合のシミュレーション
ちゅんラヂはDカーブになるように調整しています。
Web Audip API
ちゅんラヂはAudio要素の出力を、Web Audio APIに引き渡して音遊びをしています。
Visualizerで周波数特性を可視化
Special Thanks：謝辞 ymgd-a様
『Web Audio APIを使ってDAW（っぽいもの）を作ってみる』
上記をフォークして以下の機能を調整しました。
・描画色をちゅんラヂ用に合わせて青系に変更(setColorメソッドで変更可)
・stop機能を追加 ※ちゅんラヂで再生停止や再選局した時に描画ループを止める為
・周波数メモリ表示をレスポンシブ対応
・スペアナ描画と周波数目盛のズレ改善 ※描画周波数の求め方を改善
・上記で正弦波のスペアナ表示で歯抜け欠落する事があったので改善
・Web Audio APIじゃない時は独自アニメイメージ(サインバー)と音量バー情報のみを描画
・スペアナの描画を20Khzまでに限定 ※ちゅんラヂは20Khzまでで十分
・その他微調整、カットアンドトライしたので何したか忘れました
調整後のプログラムソースは以下のソースマップ付きちゅんラヂから参照してください。
https://7design.jp/trials_tr/
※上記ウェブページはbasic認証が必要です。
Compressorで周波数特性を可視化
ラジオ局毎の音量差を緩和したくてコンプレッサーを実装してみた。
結果としては良好とは言い難い。
後ほどOPTIMOD FM8100を出来る範囲で模倣したいと企んでいます思う。
Equalizerで聞きやすく
落書き人のPCオーディオ環境はプアーですのでイコライザーが欲しかった。それだけです。