Como inserir no meu site o reprodutor oferecido pela DonWeb para minha rádio?
Além dos links que permitem aos visitantes escutar sua rádio através dos seus reprodutores favoritos (iTunes, Windows Media, VLC, Real Media, Winamp, etc.), a DonWeb oferece para você um reprodutor Flash/HTML para que possa inclui-lo no seu site, assim podem escutar também a sua rádio sem precisar de um reprodutor instalado no seu PC/MAC/Linux ou dispositivo móvel.
Subindo alguns arquivos na sua hospedagem e colando um pouco de código no seu site, você poderá fazer que seus visitantes escutem a sua rádio rápidamente e aumentar a quantidade de ouvintes.
Funcionamento
O reprodutor que oferecemos para você está baseado no jPlayer (jPlayer.org). jPlayer é um reprodutor de Áudio e Vídeo Open Source, desenvolvido para funcionar com o jQuery, HTML5 e Flash.
Um dos principais benefícios do jPlayer é que utiliza tecnologia HTML5 para reproduzir áudio, e se a versão do navegador é antiga e não suporta o HTML5, automáticamente incluirá um reproductor em Flash para que o visitante não fique sem escutar o rádio.
Hoje, a maioria dos navegadores dos dispositivos móveis suportam HTML5, con o qual, os visitantes móveis poderão escutar a sua rádio no momento de visitar seu site.
Instruções para para inserir no seu site.
<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 deve ser colado dentro das etiqueta HEAD do código HTML da página.
<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>
É preciso que você substitua http://200.58.101.247:8000 pela combinação IP/Porto da sua rádio. Esta informação pode ser encontrada no menu “Enlaces rápidos” do seu painel de controle.
Para que a sua rádio comece a se reproduzir assim que o visitante chegar ao site, mude o código anterior pelo seguinte. Caso contrário o visitante deverá clicar no botão PLAY para começar a escutar a rádio.
<script type="text/javascript">
$(document).ready(function(){
var stream = {
title: "Minha Rádio",
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>
<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 escutar a rádio com este player, você deve atualizar seu browser ou sue <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="Sua rádio na Internet" target="_blank">DattaRadio</a> Player</p>
</div>
No arquivo que você tenha descarregado para instalar e configurar o reprodutor, tem um arquivo chamado demo.html onde você encontrará todo este código de exemplo pronto para usar.
Além do mais…
Se você tiver alguns conhecimentos do HTML e CSS, você poderá criar seu próprio skin ou modificar aquele que oferecemos para adaptar o reprodutor ao estilo do site onde seja inserido.
Aliás, se você tem conhecimentos do JavaScript e jQuery, pode visitar a web do reprodutor jPlayer.org para potenciar o uso dele.
