En la nueva pantalla pegamos el código del reproductor. Algunos proveedores de servicios te ofrecen sus propios reproductores. Si no lo tienes, de los que hemos probado (y han sido varios) los que mejor funcionan son los más sencillos HTML5. Además, funcionan en teléfonos celulares. Siempre y cuando el protocolo de tu streaming sea seguro sea seguro, es decir, comience con https://
[Recomendamos que una vez pegado el código sustituyas a mano todas las comillas (“)]
En source colocas la URL de tu streaming (la misma que usas para enviar la señal al servidor) y el type de transmisión. Si es mp3 escribes type=”audio/mpeg” si es ogg será type=”audio/ogg”. Si quieres que la radio comience a escucharse al abrise la página web deberás indicarlo con la palabra autoplay. Si lo borras tendrán que pulsar play para comenzar a escuchar.
<audio autoplay controls="controls"> <source src="https://radios.yanapak.org/radio_trama" type="audio/ogg" /> </audio> Si estás usando un servidor Shoutcast, tendrás que añadir un punto y coma (;) al final de la barra invertida de la URL, tal como se indica a continuación. Si tuviera “punto de montaje” como /stream o /live no hará falta el punto y coma.
<audio autoplay controls="controls"> <source src="https://185.85.29.166:8000/;" type="audio/mpeg" /> </audio> Si tienes nociones de CSS o diseño puedes jugar mucho más con la etiqueta de video. Meter una imagen de fondo, un marco de color. Por ejemplo, con este código quedaría algo así:
<style type="text/css">
#reproductor
{
position:absolute;
top: 50px;
left:0px;
display:block;
border: 1px solid #B40000;
background-color: #F1F1F1;
}
</style>
</br>
Síguenos en las Redes Sociales: Twitter:
<a href="https://twitter.com/RadiosLibres" target="_blank">@RadiosLibres</a>
</br>
<video id="reproductor" controls autoplay preload width="640" height="360" poster="http://radioslibres.net/wp-content/uploads/media/theme/images/RadiosLibres-Cabezal.png">
<source src="https://stream.codigosur.org:8000/kasandrxs.mp3" type="audio/mpeg">
</video>Así se vería el reproductor:
Tendrías que cambiar en la etiqueta video la URL del lugar donde este tu fotos, sino te saldrá el logo de radios libres:
poster="http://URL-de-tu-foto.png"