SonicPanel incluye un reproductor HTML5 que puede ser insertado en cualquier sitio web, en esta lección aprenderás a configurar el reproductor y luego agregarlo a tu sitio web.
Configurar reproductor en sonicPanel
Para comenzar, desde el panel de control ingresa a Widget para un reproductor que se encuentra en el menú lateral izquierdo dentro de la sección Centro de radio control.
Al ingresar encontrarás una vista previa del reproductor y opciones para configurarlo:
- Custom Advertisement Text: (Protection): escribe aquí el nombre de tu radio o algún otro texto, de esta manera si alguien copia el código del reproductor en otro sitio web el reproductor tendrá el nombre de tu radio.
- Now Playing Text: en esta sección puedes colocar el texto que deseas mostrar justa al lado del nombre de la canción, puedes escribir por ejemplo: En Vivo
- Template: el reproductor está disponible en dos versiones, una con fondo claro (light) y otra con fondo oscuro (dark), elige el template que mejor se adapte a tu sitio web.
- Show Song Titles: si deseas mostrar el nombre de las canciones en el reproductor selecciona Show, si por otro lado prefieres no mostrar los nombres de las canciones selecciona Hide.
- AutoPlay: selecciona SI cuando desees que el reproductor comience automáticamente después de la primera vez que el oyente hizo clic en el botón de play, elige NO si prefieres que el oyente tenga que apretar el botón Play cada vez que visite tu web.
- Para finalizar haz clic en el botón Guardar cambios.
Instalar el reproductor HTML5 en tu página web
El reproductor de la radio puede ser instalado en cualquier sitio web al que tú tengas acceso al código HTML.
El código que copiarás será un iframe que está configurado con 100% de ancho, puedes colocarlo dentro de una tabla, un div, etc para limitar su tamaño.
El proceso es muy sencillo, basta ingresar a Widget para un reproductor que se encuentra en el menú lateral izquierdo dentro de la sección Centro de radio control y copiar el código desde la parte inferior de la web directamente en la vista HTML de tu propia página web.
Para este ejemplo utilizaré el constructor web que ofrecemos en nuestros planes de web hosting puedes revisar los pasos a continuación: