¿Cómo integro el reproductor en mi sitio web?

Simplemente copia el código HTML generado y el fragmento de JavaScript, luego pégalos en el HTML de tu sitio web donde quieras que aparezca el reproductor.

Widget de Radio Gratis

Agrega un Reproductor de Radio a tu Sitio Web

Configurador de Reproductor de Radio

Vista Previa en Vivo

Cargando reproductor...

Vista previa en tiempo real

Contenido

Título del Reproductor

Eslogan del Reproductor

Apariencia

Color del Título

#FFFFFF

Color del Eslogan

#FFFFFF

Color de Fondo

#000000

Color de Botones

#FFFFFF

Configuración de Medios

Fuente de Audio

Imagen de Portada

Código de Integración

Instrucciones de instalación

Ambos códigos a continuación son necesarios para que el reproductor funcione correctamente en su sitio web:

Agregue el código HTML donde quiera que aparezca el reproductor
Agregue el código JavaScript antes de la etiqueta </body> de su página

Paso 1: Código HTML (Coloque donde quiera el reproductor)

<div id="customWebPlayer" playerTitle="Reproductor de Radio Personalizado" playerTitleColor="#FFFFFF" playerSlogan="Reproductor de Radio" playerSloganColor="#FFFFFF" playerBGColor="#000000" audioSrc="https://nap.casthost.net/proxy/casthost/stream" coverImageSrc="https://www.casthost.net/images/172407545766c34dc1aeef3.jpg" buttonColors="#FFFFFF"> ...</div>

Paso 2: Código JavaScript (Coloque antes de </body>)

<script language="javascript" type="text/javascript" src="https://www.casthost.net/publicCustomPlayer.js"></script>

Ejemplo Completo (Archivo HTML completo)

<!DOCTYPE html>
<html>
<head>
    <title>Mi sitio web con reproductor de radio</title>
</head>
<body>
    <h1>Bienvenido a mi sitio web</h1>
    
    <!-- Paso 1: Coloca aquí el reproductor de radio -->
    <div id="customWebPlayer" playerTitle="${playerTitle}" playerTitleColor="${playerTitleColor}" playerSlogan="${playerSlogan}" playerSloganColor="${playerSloganColor}" playerBGColor="${playerBGColor}" audioSrc="${audioSrc}" coverImageSrc="${coverImageSrc}" buttonColors="${buttonColors}">
        ${localizedExampleLoading}
    </div>
    
    <p>Otro contenido en tu página...</p>
    
    <!-- Paso 2: Agrega este script antes de cerrar la etiqueta body -->
    <script language="javascript" type="text/javascript" src="https://www.casthost.net/publicCustomPlayer.js"></script>
</body>
</html>

Acerca del reproductor de radio web de CastHost

El reproductor de radio web de CastHost es una solución moderna, adaptable y altamente personalizable para integrar streaming de audio en cualquier sitio web. Con su widget fácil de usar, puedes ofrecer a tus visitantes una experiencia auditiva profesional, adaptada a tu marca y necesidades técnicas. Compatible con todos los navegadores modernos y optimizado para dispositivos móviles, este reproductor se integra perfectamente en tu sitio, ya seas una emisora de radio, podcaster o creador de contenido de audio.

Herramienta gratuita: Este configurador de reproductor de radio es completamente gratuito y está diseñado para ayudarte a mejorar el SEO de tu sitio web.

Personalización avanzada: Explicación de los atributos del widget

playerTitle: El título principal que se muestra en el reproductor. Úsalo para destacar el nombre de tu emisora, programa o marca. Un título claro mejora el reconocimiento y el SEO de tu página.
playerTitleColor: Personaliza el color del título para que coincida con tu identidad visual. Los colores coherentes refuerzan la marca y la experiencia del usuario.
playerSlogan: Añade un eslogan o breve descripción bajo el título principal. Puedes incluir un mensaje clave, frecuencia o frase de marketing para captar la atención.
playerSloganColor: Define el color del eslogan para lograr una armonía visual perfecta. Un buen contraste mejora la legibilidad.
playerBGColor: Controla el color de fondo del reproductor para integrarlo perfectamente en tu sitio web, ya sea claro u oscuro. Un fondo adecuado mejora la integración y la percepción profesional.
audioSrc: Especifica la URL de tu flujo de audio (Shoutcast, Icecast, etc.). El reproductor admite HTTP y HTTPS. Usa siempre streams seguros para mejor SEO y seguridad.
coverImageSrc: Añade una imagen de portada personalizada (logo, carátula de álbum, etc.) para una presentación profesional y atractiva. Las imágenes optimizadas mejoran la carga y la experiencia del usuario.
buttonColors: Personaliza el color de los botones de reproducción/pausa para que coincidan con tu paleta de colores. Botones visibles y coherentes mejoran la interacción.

¿Cómo funciona?

Configura tu reproductor: Usa la herramienta de arriba para personalizar el título, el eslogan, los colores, la imagen de portada y la fuente de audio según tus necesidades.
Copia el código generado: Obtén el código HTML y el script JavaScript que aparecen en la sección "Código de Integración".
Intégralo en tu sitio: Pega el código HTML donde quieras que aparezca el reproductor y añade el script JavaScript antes de la etiqueta </body>.
Disfruta de la transmisión: Tu reproductor personalizado ya está en línea y listo para transmitir a tus visitantes en cualquier dispositivo.

Mejores prácticas para integrar el reproductor de radio

Usa streams HTTPS: Para máxima compatibilidad y seguridad, utiliza fuentes de audio HTTPS.
Optimiza la imagen de portada: Elige una imagen cuadrada, liviana y de alta calidad para que se vea bien en todos los dispositivos.
Accesibilidad: Añade texto alternativo relevante a la imagen de portada para mejorar la accesibilidad.
Prueba en móvil: Verifica la apariencia y funcionalidad del reproductor en diferentes dispositivos y navegadores.
Mantén el código actualizado: Usa siempre la última versión del script JavaScript para aprovechar nuevas funciones y correcciones.
Personaliza para tu marca: Ajusta los colores y textos para que coincidan con la identidad visual de tu sitio.

¿Por qué elegir el reproductor de radio de CastHost?

Instalación ultrarrápida: Solo copia y pega el código HTML y el script JavaScript en tu sitio.
Totalmente compatible: Funciona en todos los navegadores modernos (Chrome, Firefox, Safari, Edge) y dispositivos (PC, móvil, tablet).
Diseño adaptable: Se ajusta automáticamente al tamaño de pantalla para una experiencia óptima en móvil y escritorio.
Seguridad: Soporte para flujos HTTPS para integración segura en sitios web modernos.
Personalización avanzada: Modifica la apariencia y el comportamiento del reproductor sin necesidad de conocimientos de programación.
Soporte y actualizaciones: Disfruta de soporte técnico ágil y actualizaciones regulares para garantizar compatibilidad y seguridad.

Ya seas una radio local, un podcaster independiente o una gran emisora, el reproductor de radio de CastHost te permite transmitir tu contenido de audio fácilmente, ofreciendo una experiencia moderna y profesional.

Preguntas Frecuentes

¿Qué es el reproductor de radio web de CastHost?

El reproductor de radio web de CastHost es un widget de audio personalizable y responsivo que puedes integrar en cualquier sitio web para transmitir contenido de radio directamente a tus visitantes.

¿Cómo puedo personalizar la apariencia del reproductor de radio?

Puedes personalizar colores, título, eslogan, fondo, colores de botones, imagen de portada y fuente de audio usando nuestra herramienta de configuración fácil de usar en esta página.

¿Es el reproductor de radio compatible con todos los navegadores?

Sí, nuestro reproductor de radio está diseñado para funcionar en todos los navegadores web modernos incluyendo Chrome, Firefox, Safari y Edge, en escritorio y móvil.

¿Puedo usar transmisiones HTTPS con el reproductor de radio?

¡Absolutamente! El reproductor soporta transmisiones de audio HTTP y HTTPS, asegurando compatibilidad con sitios seguros y cumpliendo los requisitos de navegadores modernos.

¿Cómo integro el reproductor en mi sitio web?

Simplemente copia el código HTML generado y el fragmento de JavaScript, luego pégalos en el HTML de tu sitio web donde quieras que aparezca el reproductor.

¿Es el reproductor de radio responsivo para dispositivos móviles?

Sí, el reproductor es completamente responsivo y se adapta automáticamente a diferentes tamaños de pantalla, proporcionando una experiencia de escucha óptima en smartphones, tabletas y escritorios.

Ponte en contacto