Aplica a: DattaRadio · Interfaz: panel CentovaCast y hosting web · Tiempo estimado: 15 min
¿Qué vas a lograr?
Incrustar un reproductor de audio en tu sitio web para que tus visitantes escuchen la radio directamente desde el navegador, sin necesidad de tener instalado ningún reproductor.
Antes de empezar
El reproductor está basado en jPlayer (jplayer.org) y usa HTML5 — si el navegador del visitante no lo soporta, carga automáticamente una versión en Flash. Necesitás acceso por FTP a tu hosting y poder editar el HTML de tu sitio.
Necesitás también la IP y el puerto de tu radio, que encontrás en Enlaces rápidos dentro del panel CentovaCast.
Pasos
1 — Descargar y subir los archivos
Descargá los archivos del reproductor desde el panel de CentovaCast y descomprimílos. Copiá la carpeta jplayer a la raíz de tu hosting por FTP. Dentro del archivo descargado encontrás un demo.html con código de ejemplo listo para usar.
2 — Agregar el código en el <head> de tu página
Pegá este código dentro de la etiqueta <head> de la página donde querés mostrar el reproductor:
<link href="/jplayer/skin/dattaradio/jplayer.dattaradio.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" />
<script type="text/javascript" src="/jplayer/js/jquery.jplayer.min.js" />
3 — Agregar el script de configuración
Inmediatamente después del código anterior, pegá el siguiente script. Reemplazá http://200.58.101.247:8000 por la IP y puerto de tu radio:
<script type="text/javascript">
$(document).ready(function(){
var stream = {
title: "MI Radio",
mp3: "http://200.58.101.247:8000/;stream/1"
},
ready = false;
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
ready = true;
$(this).jPlayer("setMedia", stream);
},
pause: function() {
$(this).jPlayer("clearMedia");
},
error: function(event) {
if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
$(this).jPlayer("setMedia", stream).jPlayer("play");
}
},
solution: 'flash, html',
swfPath: "js",
supplied: "mp3",
preload: "none",
wmode: "window",
keyEnabled: true
});
});
</script>
Si querés que la radio empiece a reproducirse automáticamente al entrar al sitio (sin que el visitante tenga que hacer clic en Play)
<script type="text/javascript">
$(document).ready(function(){
var stream = {
title: "MI Radio",
mp3: "http://200.58.101.247:8000/;stream/1"
},
ready = false;
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
ready = true;
$(this).jPlayer("setMedia", stream).jPlayer("play");
},
pause: function() {
$(this).jPlayer("clearMedia");
},
error: function(event) {
if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
$(this).jPlayer("setMedia", stream).jPlayer("play");
}
},
solution: 'flash, html',
swfPath: "js",
supplied: "mp3",
preload: "none",
wmode: "window",
keyEnabled: true
});
});
</script>
4 — Agregar el reproductor en el <body>
Pegá este código HTML en el lugar de la página donde querés que aparezca el reproductor, dentro de las etiquetas <body></body>:
<div id="jquery_jplayer_1"></div>
<div id="jp_container_1">
<div>
<ul>
<li><a href="javascript:;" tabindex="1">play</a></li>
<li><a href="javascript:;" tabindex="1">pause</a></li>
<li><a href="javascript:;" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div><div></div></div>
</div>
<div>
<span>Actualización requerida</span>
Para escuchar la radio con este player, tenés que actualizar tu navegador o tu
<a href="http://get.adobe.com/flashplayer/" target="_blank">plugin de Flash</a>.
</div>
</div>
Verificá que funcionó
Abrí la página en el navegador — deberías ver el reproductor. Si configuraste la reproducción automática, la radio empieza sola; si no, aparece el botón Play para que el visitante inicie la transmisión.
Errores frecuentes
El reproductor aparece pero no suena
→ Verificá que la IP y el puerto en el script coincidan exactamente con los datos que aparecen en Enlaces rápidos de CentovaCast.
El reproductor no aparece en la página
→ Verificá que la carpeta jplayer esté en la raíz del hosting y que las rutas del <head> sean correctas.