Melodía Stereo Bogotá

背景

Melodía Stereo は1967年からボゴタで放送を続けています。リスナーには高齢の方が多く、モバイル回線の弱い地域に住み、古い Android 端末を使う人も少なくありません。局の現在の WordPress サイトは、使えるようになるまでに123個のファイルで2.2 MBをダウンロードします。スライダーや複数のプレーヤープラグインがあり、jQuery は3回読み込まれています。

このプロジェクトは、サイトのあり方を示す非公式の提案です。局の公式ページではありません。既存の WordPress サイトからすべての内容を読み込み、局の配信をそのまま再生するので、局側では何も変える必要がありません。

できること

• 大きな再生ボタン。 どのページでも、ライブ放送の再生がいちばん簡単な操作です。
• 一時停止と音量は常に表示。 開いた瞬間から、すべてのページの下部にバーが固定されています。
• 音が途切れない。 ニュースを開いてもページを移動しても、ラジオは流れ続けます。
• 毎時のニュース速報。 最新の速報を、わかりやすい名前（「Avance de las 2 PM」）で表示します。
• ニュースとコメント。 元のサイトと同じニュースとリスナーのコメントを、その場で読み込みます。
• 読みやすさ。 本文は18px以上、ボタンは高さ48px以上、すべての文字がコントラスト比4.5:1を満たし、記事には A- / A+ ボタンがあります。
• 共有時のプレビュー。 WhatsApp や Facebook で記事のリンクを共有すると、タイトル、要約、写真が表示されます。

仕組み

Astro がシンプルな HTML ページを生成します。小さな Preact の部品が、ブラウザ上で WordPress API からニュース、速報、コメントを取得します。WordPress の応答には約2秒かかるため、各セクションには灰色のプレースホルダーと「Cargando noticias de melodiastereo.com…」のような一文を表示し、待ち時間の原因がどこにあるかをはっきり示します。訪問の間で何もキャッシュしないので、サイトは常に元のサイトと同じ内容を表示します。リクエストが失敗したり15秒以上かかったりした場合は、そのセクションだけに「Reintentar」ボタン付きのエラーを表示します。

ひとつの共有プレーヤーが、ページ内で唯一の <audio> 要素を管理します。この要素は下部のバーにあり、Astro がページ移動の間も保持します。ライブ放送、毎時の速報、記事内の音声はすべてこのプレーヤーを通り、同時に鳴るのはひとつだけです。ライブ放送中に速報を再生するとライブは一時停止し、速報が終わると現在の時点からライブが再開します。

ライブ放送は HLS です。HLS を自前で再生できるブラウザには配信アドレスをそのまま渡します。hls.js は再生できないブラウザでのみダウンロードするので、初回訪問のコードは約30 KBに収まります。配信が途切れると、プレーヤーは「Reconectando…」と表示し、待ち時間を少しずつ延ばしながら再接続を試みます。

記事の本文は WordPress から HTML として届きます。ページに出す前に、許可したタグの短いリストで整えます。埋め込み動画は普通のリンクに、音声は共有プレーヤー用の再生ボタンに置き換えます。リスナーのコメントに含まれるウェブアドレスは、サイトを離れる前に注意ページを通ります。

技術的に面白い点

• サイズの上限。 ホームページの初回読み込み（HTML、CSS、JS を gzip で圧縮した合計）が100 KBに達すると、スクリプトがエラーを出します。対象は Chrome 80 と iOS 14 の Safari です。
• サーバー処理はロボットのためだけ。 Vercel のミドルウェアがサーバー上で WordPress を読むのは、サイトマップの作成と、WhatsApp、Facebook、Google 向けの共有タグや検索タグの埋め込みのときだけです。人には常に静的なページをすぐに返します。
• ロック画面の操作。 Media Session API により、スマートフォンのロック画面に「Melodía Stereo · En vivo」または速報の名前と、再生・一時停止ボタンが表示されます。
• テスト。 Vitest による単体テストと、Playwright によるスマートフォンサイズのブラウザでのスモークテスト。