Además de los links que permiten a los visitantes escuchar tu radio a través de sus reproductores favoritos (iTunes, Windows Media, VLC, Real Media, Winamp, etc.), DonWeb te provee de un reproductor Flash/HTML para que lo incluyas en tu sitio, así pueden escuchar también tu radio sin necesidad de tener un reproductor instalado en su PC/MAC/Linux o dispositivo móvil.
Subiendo algunos archivos a tu alojamiento web y pegando un poco de código en tu sitio, podrás hacer que tus visitantes escuchen tu radio muy rápidamente y ampliar así la cantidad de oyentes.
Funcionamiento: El reproductor que te brindamos está basado en jPlayer (jPlayer.org). jPlayer es un reproductor de Audio y Video Open Source, desarrollado para funcionar con jQuery, HTML5 y Flash.
Una de los principales beneficios de jPlayer es que utiliza tecnología HTML5 para reproducir audio, y si la versión del navegador es antigua y no soporta HTML5, automáticamente incluirá un reproductor en Flash para que el visitante no se quede sin escuchar la radio.
Hoy, la gran mayoría de los navegadores de los dispositivos móviles soportan HTML5, con lo cual, los visitantes móviles podrán escuchar tu radio al visitar tu sitio web.
Agregar Reproductor
2) Descomprimir y copiar la carpeta “jplayer” a la raíz del hosting de tu sitio (en el archivo demo.html, incluido en el archivo que descargaste, encontrarás código de ejemplo).
3) Ahora, es necesario incluir los códigos necesarios en la/s página/s de tu sitio donde estará 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" />
Este código debe pegarse dentro de las etiqueta HEAD del código HTML de la página.
4) Inmediatamente después del código de arriba, pegar el siguiente código:
<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>
Es necesario que reemplaces http://200.58.101.247:8000 por la combinación IP/Puerto de tu radio. Esta información la encontrarás en el menú “Enlaces rápidos” de tu panel de control.
Para que la radio comience a reproducirse ni bien el visitante llega al sitio, cambia el código anterior por el siguiente. De lo contrario el visitante deberá hacer clic en el botón PLAY para comenzar a escuchar la 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).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>
5) Finalmente, será necesario colocar el siguiente trozo de código HTML en el lugar de la página donde queremos que el reproductor aparezca, siempre dentro de las etiquetas <body></body>.
<div id="jquery_jplayer_1"></div>
<div id="jp_container_1">
<div>
<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, tienes que actualizar tu browser o tu <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
<p>by <a href="https://dattatec.com/site/radio-en-internet-audio-streaming" title="Tu radio en Internet" target="_blank">DattaRadio</a> Player</p>
</div>
En el archivo que descargaste para instalar y configurar el reproductor, hay un archivo llamado demo.html dónde encontrarás todo este código de ejemplo listo para usar.
💡Consejos
Si tienes algunos conocimientos de HTML y CSS, podrás crear tu propio skin o modificar el que te brindamos por defecto para adaptar el reproductor al estilo del sitio donde se incruste.
Además, si tienes conocimientos de JavaScript y jQuery, te invitamos a visitar la web del reproductor jPlayer.org para potenciar el uso del mismo.
Comentarios
0 comentarios
El artículo está cerrado para comentarios.