Este proyecto es un reproductor de radio online moderno, responsivo y optimizado como Aplicación Web Progresiva (PWA). Permite reproducir transmisiones de radio por streaming, mostrar información dinámica del tema actual (si usas una API) y personalizarlo con tus redes sociales.
El proyecto se compone de los siguientes archivos y carpetas:
Edita el archivo js/script.js para personalizar tu reproductor. Este archivo contiene el objeto radioConfig:
const radioConfig = {
streamUrl: 'TU_STREAM',
streamInfoUrl: 'TU_API',
defaultCover: 'img/logo.png',
stationLogo: 'img/envivo.gif',
stationName: 'Nombre de la Radio',
stationSlogan: 'Slogan',
websiteUrl: 'https://tusitio.com',
facebookUrl: 'https://facebook.com/turadio',
twitterUrl: 'https://x.com/turadio',
whatsappNumber: '50200000000',
instagramUrl: '',
tiktokUrl: ''
};
Nota: El campo streamInfoUrl es opcional. Solo utilízalo si tienes una API que devuelva título y artista.
index.html desde el navegadorstreamInfoUrl, considera validarla y protegerla con CORS o autenticación
Para que tu reproductor se vea profesional y bien posicionado en buscadores como Google y redes sociales como Facebook o X (Twitter), debes editar el contenido dentro de la etiqueta <head> en el archivo index.html.
<title>: Cambia el título de la página por el nombre de tu radio o proyecto.description: Escribe una descripción clara y atractiva de tu emisora o sitio.keywords: Incluye palabras clave relevantes, separadas por comas.author: Coloca tu nombre o el de tu marca.og:image y twitter:image: Usa una URL válida (idealmente de 1200x630 px) para mostrar vista previa al compartir tu sitio.og:url: Cambia a tu dominio real, por ejemplo https://miweb.com/.favicon y apple-touch-icon por los tuyos dentro de la carpeta /img.<title>Mi Radio Online – Escucha en vivo 24/7</title>
<meta name="description" content="Escucha música, noticias y más en vivo desde tu navegador." />
<meta name="keywords" content="radio online, emisora en vivo, streaming" />
<meta name="author" content="Mi Radio Guatemala" />
<meta property="og:image" content="https://miweb.com/img/preview.png" />
<meta property="og:url" content="https://miweb.com/" />
<link rel="icon" href="img/favicon.ico" />
<link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
Si necesitas una vista previa de cómo se verá tu sitio en redes sociales, puedes usar herramientas como metatags.io.
Edwin Giovani Macz Bac
✅ edwingiovani2009@gmail.com
📫 WhatsApp: +502 4547 2055