Melodía Stereo Bogotá

Por qué

Melodía Stereo está al aire en Bogotá desde 1967. Muchos de sus oyentes son personas mayores, y muchos viven en zonas de Colombia con internet móvil débil y celulares Android antiguos. El sitio actual de la emisora, hecho en WordPress, descarga 2,2 MB en 123 archivos antes de poder usarse, con carruseles, varios plugins de reproductor y jQuery cargado tres veces.

Este proyecto es una propuesta no oficial de cómo podría verse el sitio. No es la página oficial de la emisora. Lee todo del sitio WordPress existente y reproduce la señal de la propia emisora, así que no hay que cambiar nada del lado de la emisora.

Qué hace

• Un gran botón de reproducir. Escuchar la señal en vivo es lo más fácil en cada página.
• Pausa y volumen siempre a la vista. Una barra fija en la parte de abajo de cada página, desde que se abre.
• Un audio que nunca se corta. El oyente puede abrir una noticia o cambiar de página y la radio sigue sonando.
• Boletines de cada hora. El boletín de noticias más reciente, con un nombre claro (“Avance de las 2 PM”).
• Noticias y comentarios. Las mismas noticias y comentarios de los oyentes que el sitio original, leídos en vivo.
• Fácil de leer. Texto de al menos 18 px, botones de al menos 48 px de alto, todo el texto con un contraste de al menos 4,5 a 1 y botones A- / A+ en las noticias.
• Vistas previas al compartir. Los enlaces a noticias compartidos por WhatsApp o Facebook muestran el título, el resumen y la foto.

Cómo funciona

Astro genera páginas HTML simples. Pequeñas partes en Preact traen las noticias, los boletines y los comentarios desde la API de WordPress en el navegador. WordPress tarda unos 2 segundos en responder, así que cada sección muestra bloques grises y una línea como “Cargando noticias de melodiastereo.com…” para dejar claro de dónde viene la espera. No se guarda nada entre visitas, así que el sitio siempre muestra exactamente lo mismo que el sitio original. Si una petición falla o tarda más de 15 segundos, solo esa sección muestra un error con un botón “Reintentar”.

Un único reproductor compartido controla el único elemento <audio>. Vive en la barra de abajo, que Astro mantiene activa al cambiar de página. La señal en vivo, el boletín de cada hora y cualquier audio dentro de una noticia pasan por él, y solo suena uno a la vez. Si un boletín empieza mientras suena la radio en vivo, la señal se pausa y vuelve en el momento presente cuando el boletín termina.

La señal en vivo es HLS. Los navegadores que reproducen HLS por sí mismos reciben la dirección de la señal directamente. hls.js solo se descarga cuando el navegador no puede reproducirla, lo que deja la primera visita en unos 30 KB de código. Si la señal se cae, el reproductor muestra “Reconectando…” y vuelve a intentar con esperas cada vez más largas.

El texto de las noticias llega desde WordPress como HTML. Se limpia con una lista corta de etiquetas permitidas antes de llegar a la página. Los videos incrustados se convierten en enlaces simples y los audios en un botón para el reproductor compartido. Las direcciones web en los comentarios de los oyentes pasan por una página de aviso antes de salir del sitio.

Partes técnicas interesantes

• Límite de tamaño. Un script falla si la primera carga de la página de inicio (HTML, CSS y JS, comprimidos con gzip) llega a 100 KB. El código apunta a Chrome 80 y Safari en iOS 14.
• Trabajo en el servidor solo para robots. Un middleware de Vercel lee WordPress en el servidor solo para armar el mapa del sitio y llenar las etiquetas para compartir y para buscadores de WhatsApp, Facebook y Google. Las personas siempre reciben la página estática de inmediato.
• Controles en la pantalla de bloqueo. La API Media Session muestra “Melodía Stereo · En vivo” o el nombre del boletín con reproducir y pausar en la pantalla de bloqueo del celular.
• Pruebas. Pruebas unitarias con Vitest y pruebas de humo en un navegador del tamaño de un celular con Playwright.