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.