📶 Documentación / VinylCast Radio Player – HTML5 + PWA

📌 Introducción

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.

🧧 Estructura del proyecto

El proyecto se compone de los siguientes archivos y carpetas:

🔧 Configuración

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.

📬 Instalación

  1. Sube todos los archivos del proyecto a tu servidor o alojamiento web
  2. Asegúrate de que tu sitio use HTTPS (necesario para instalar la app como PWA)
  3. Accede a index.html desde el navegador
  4. Desde un navegador móvil o PC, el usuario podrá instalar la aplicación como app

🛡 Seguridad

🎯 Personaliza el <head> para SEO y redes sociales

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.

🔄 Elementos que debes modificar:

🌐 Para compartir correctamente en redes:

🎨 Iconos personalizados:

📌 Ejemplo de cabecera personalizada:

<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.

🤵 Autor

Edwin Giovani Macz Bac
edwingiovani2009@gmail.com
📫 WhatsApp: +502 4547 2055