Web開発
ATC Lofi Radio
独自のLofi RadioサービスをWeb上で提供。
- Client
- Personal Project
- Category
- Web Audio設計 / リアルタイムデータ統合 / フロントエンド開発
- Stack
- JavaScript / Web Audio API / WebSocket / FlightRadar24 API / Leaflet.js
Before課題
- 複数の音声ソースを独立制御しながら干渉させない実装は未着手だった
- リアルタイムデータ更新とUIレンダリングが競合する問題が未解決だった
After解決
- Web Audio APIのノードグラフ設計により、音声ソースごとの独立制御を実装
- 非同期処理の分離設計により、データ更新がUI描画を妨げない構造を確立
制作のポイント
FlightRadar APIとのリアルタイム統合
フライトレーダーは一定間隔でAPIをポーリングし、航空機の位置データを取得・地図上に描画します。問題は、このポーリング処理と音声再生・UI操作が同一スレッドで競合することでした。JavaScriptはシングルスレッドのため、重い処理がメインスレッドを占有すると音声にノイズが入ったり、操作への応答が遅れます。対処として、データ取得と描画処理を明示的に分離しました。
Web Audio APIによる音声ミキシング設計
ATCラジオは外部ストリーミング、lofiはローカル音源と性質が異なるため、単純にaudioを並べても音量調整やフェード処理を統一管理できません。
そこで Web Audio API のノード構成を採用し、各ソースを独立した GainNode に接続してから MasterGainNode に合流させました。これにより ATC と lofi の音量を個別に制御しつつ、最終ミックスを一括管理できます。フェードは linearRampToValueAtTimeで実装し、ブツ切れを防いでいます。
ATC のストリームはCORS 制約があるためプロキシ経由が必要な場合があり、ソース切替時にはノード再接続を行っています。