Antes um pouquinho, eu postei um tutorial de como fazer sua rádio online com player personalizado e tudo... Mais aí veio a dúvida: só existe aqueles tipos de players? Não claro que não! Se você já acessava outras rádios pode ter percebido recursos bem legais como aumentar e diminuir o volume, fazer seu pedido, ouvir em algum outro player, algo assim. Aqui, neste tutorial, eu vou dar a base de quem precisa desse post. Achei os códigos aleatoriamente no nosso portal de conhecimentos online (kkkkkkk) e postei aqui! Espero que dê certo..


| Começando Tutorial |
 

O primeiro passo é você conseguir um encoder que transforme todas as suas músicas MP3 para WMA. (Formato de arquivo para se fazer stream online).

O segundo passo é você criar os playlist e salvar o arquivo no formato “lista1.asx” (ASX é a extensão do arquivo para você indicar como link para sua rádio). Abaixo vamos explicar isso tudo!

Uma opção como encoder é o Free Converter. Baixe-o para re-codificar suas músicas que serão tocadas na rádio! DOWNLOAD.

Agora vamos criar um playlist no formato ASX. Abra um bloco de notas e coloque o seguinte código:

<ASX Version="3.0">
  <entry><ref href= "mms://seu_ip/musica1.wma" /></entry> //Nome das músicas que vão rodar
  <entry><ref href= "mms://seu_ip/musica2.wma" /></entry>
  <entry><ref href= "mms://seu_ip/musica3.wma" /></entry>
  <entry><ref href= "mms://seu_ip/musica4.wma" /></entry>
  <entry><ref href= "mms://seu_ip/musica5.wma" /></entry>
  <entry><ref href= "mms://seu_ip/musica6.wma" /></entry>
</ASX>

Faça as modificações necessárias e salve como 'playlist.asx' (sem aspas).
Pronto, sua playlist está criada.

Vamos ao player. Lembrando que aqui, só será dado a base e não o codigo pronto! Você precisa saber o mínimo de HTML para mexer com isso!

O código do seu player será isso:

<table width="500" cellpadding="0" cellspacing="0" align="left" class="font08">
<tr>
<td valign="middle" bgcolor="#000000" align="center" width="263">
<object ID="WMPlay" width="250" height="24" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"codebase="http://activex.microsoft.com/activex/%20%20%20controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Carregando a Radio do Seko" type="application/x-oleobject" VIEWASTEXT>

<param name="FileName" value="arquivo.asx">
<param name="AutoStart" value="True">
<param name="TransparentAtStart" value="True">
<param name="ShowControls" value="0">
<param name="ShowDisplay" value="0">
<param name="ShowStatusBar" value="1">
<param name="AutoSize" value="0">
<param name="AnimationAtStart" value="true">

<!--Plugin para o Netscape-->
<embed type="application/x-mplayer2" ID="MediaPlayer" Name="WMPlay" type="application/x-oleobject" src="arquivo.asx" autostart="0" transparentatstart="0" showcontrols="0" showdisplay="0" showstatusbar="1" animationatstart="0" width="250" height="24">
</object>
</td>
</tr>
</table>

Agora você terá que criar as imagens (Volume - +, Voltar, Play, Pause, stop e Próxima). Depois de já criadas, coloque isso no codigo:

<script language="JavaScript">
<!--
function RegisterEventObservers()
{
    var plugin = document.WMPlay;
    document.appObs.setByProxyDSNewStreamObserver(plugin, true);
    troca();
    numero = numero - 1;
}
function OnDSNewStreamEvt(oldstate, newstate)
{
    setTimeout('troca();',1000);
}       
function PlayClick()
{
    document.WMPlay.Play();
}
function StopClick()
{
    numero = 1;
    document.WMPlay.Stop();
    if (navigator.appName.indexOf('Netscape') != -1) {
        document.WMPlay.SetCurrentPosition(0);
    } else {
        document.WMPlay.CurrentPosition = 0;
    }
}
function PauseClick()
{
    if (navigator.appName.indexOf('Netscape') != -1) {
        estado=document.WMPlay.GetPlayState();
    } else {
        estado=document.WMPlay.PlayState;
    }

    if (estado==1) {
        document.WMPlay.Play();
    } else if (estado==2) {
        document.WMPlay.Pause();
    }
}
function FowardClick()
{
    document.WMPlay.Next();
}
function BackClick()
{
    numero = numero - 2;
    document.WMPlay.Previous();
}
function UpVolumeClick()
{
    if (document.WMPlay.Volume <= -300) {
        document.WMPlay.Volume = document.WMPlay.Volume + 300;
    }
}
function DownVolumeClick()
{
    if (document.WMPlay.Volume >= -8000) {
        document.WMPlay.Volume = document.WMPlay.Volume - 300;
    }
}
//-->
</script>

E agora defina as imagens:

<img src="nome_da_imagem.gif" alt="Diminuir Volume" onclick="DownVolumeClick()">
<img src="nome_da_imagem.gif" alt="Aumentar Volume" onclick="UpVolumeClick()">
<img src="nome_da_imagem.gif" alt="Voltar" onclick="BackClick()">
<img src="nome_da_imagem.gif" alt="Play" onclick="PlayClick()">
<img src="nome_da_imagem.gif" alt="Pause" onclick="PauseClick()">
<img src="nome_da_imagem.gif" alt="Stop" onclick="StopClick()">
<img src="nome_da_imagem.gif" alt="Próxima Música" onclick="FowardClick()"> 

Fácil não? Qualquer coisa siga o exemplo dos códigos neste tutorial!

Leia mais: http://togetherblogs.blogspot.com/2009/10/criando-um-player-para-radio-online.html#ixzz0jVBRPGGv
Under Creative Commons License: Attribution Non-Commercial