Melodía Stereo Bogotá

Why

Melodía Stereo has been on the air in Bogotá since 1967. Many of its listeners are older people, and many live in parts of Colombia with weak mobile internet and old Android phones. The station’s current WordPress site downloads 2.2 MB in 123 files before it can be used, with sliders, several player plugins and jQuery loaded three times.

This project is an unofficial proposal for what the site could look like. It is not the station’s official page. It reads everything from the existing WordPress site and plays the station’s own stream, so nothing on the station’s side has to change.

What it does

• One big play button. Pressing play on the live stream is the easiest thing on every page.
• Pause and volume always on screen. A bar fixed to the bottom of every page, from the moment it opens.
• Audio that never stops. The listener can open a news story or change page and the radio keeps playing.
• Hourly bulletins. The newest news bulletin, named in plain words (“Avance de las 2 PM”).
• News and comments. The same stories and listener comments as the original site, read live.
• Easy to read. Body text of at least 18px, buttons at least 48px tall, all text passing the 4.5 to 1 contrast test, and A- / A+ buttons on stories.
• Share previews. Story links shared on WhatsApp or Facebook show the title, summary and photo.

How it works

Astro builds plain HTML pages. Small Preact parts fetch the news, bulletins and comments from the WordPress API in the browser. WordPress takes about 2 seconds to answer, so every section shows a grey placeholder and a line such as “Cargando noticias de melodiastereo.com…” to make clear where the wait comes from. Nothing is cached between visits, so the site always shows exactly what the original site shows. If a request fails or takes more than 15 seconds, only that section shows an error with a “Reintentar” button.

One shared player owns the single <audio> element. It lives in the bottom bar, which Astro keeps alive across page changes. The live stream, the hourly bulletin and any audio clip inside a story all go through it, and only one plays at a time. If a bulletin starts while live radio is on, live pauses and comes back at the present moment when the bulletin ends.

The live stream is HLS. Browsers that play HLS on their own get the stream address directly. hls.js is downloaded only when the browser cannot play it, which keeps the first visit at about 30 KB of code. If the stream drops, the player shows “Reconectando…” and retries with growing waits.

Story text arrives from WordPress as HTML. It is cleaned against a short list of allowed tags before it reaches the page. Embedded videos become plain links and audio clips become a play button for the shared player. Web addresses in listener comments go through a warning page before leaving the site.

Technically interesting parts

• Size budget. A script fails the build check if the home page’s first load (HTML, CSS and JS, gzipped) reaches 100 KB. The code targets Chrome 80 and Safari on iOS 14.
• Server work only for robots. A Vercel middleware reads WordPress on the server only to build the sitemap and to fill in share and search tags for WhatsApp, Facebook and Google. People always get the static page right away.
• Lock screen controls. The Media Session API shows “Melodía Stereo · En vivo” or the bulletin name with play and pause on the phone’s lock screen.
• Tests. Unit tests with Vitest and smoke tests in a phone-sized browser with Playwright.