Você que tem um site (um blog tão interessante quanto o TecnoSapiens, quem sabe), talvez já tenha pensado em um tocador de músicas como um recurso atraente para o visitante. Dentre várias opções, gostaria de abordar e tratar aqui de um que acho interessante: XSPF Web Music Player. Ele foi desenvolvido em Flash, é gratuito e bem simples de usar. Um recurso bem legal é a possibilidade de criar suas próprias playlists. Então vamos por partes, sim?

1. Baixando o XSPF

Há três versões do player: uma que é um player completo, outra slim (apenas a barra de controles exibindo a música sendo tocada) e a terceira versão é apenas um pequeno botão que inicia a playlist, sem que o visitante veja qualquer informação. Neste artigo vamos abordar a versão completa (você pode baixar as outras versões no site do XSPF, e os passos para instalação e configuração são semelhantes).

Baixar versão completa do XSPF

2. Sobre o player e sua playlist

Após extrair o conteúdo do arquivo zip, você encontrará dois arquivos-fonte (xspf_player.fla e xspf_player.as) e o arquivo já compilado que você vai usar no seu site (com os arquivos-fonte você poderá customizar o player, mas não abordaremos isso no momento).

O player carregará uma playlist feita por você, e esta playlist precisa estar no formato XSPF, que é livre e gratuito. A playlist XSPF é escrita em XML.

3. Upload dos arquivos necessários

Agora vamos definir as músicas que você quer e escrever a playlist. No nosso caso, vamos ter somente uma música, do artista Andre Williams, chamada I Wanna Be Your Pajamas (liberada sob a licença Creative Commons). No seu servidor, crie um diretório contendo o arquivo xspf_player.swf. Após isto, crie um diretório musicas (sem acento) dentro do diretório do player, copiando para lá a(s) música(s) selecionada(s) por você. Agora vamos escrever a nossa playlist. Abra um editor HTML ou um editor simples de texto, e siga o exemplo abaixo:

 

Aqui vai a URL completa do arquivo MP3 (Substitua aqui)

http://www.tecnosapiens.com.br/player/musicas/Andre_Williams-I_wanna_be_your_pajamas.mp3

 

Após isto salve o arquivo com a extensão xspf, por exemplo, playlist1.xspf. Faça upload deste arquivo para o diretório das músicas.

Dica: recomendo que suas MP3′s sejam renomeadas, removendo qualquer acentuação gráfica e espaços no nome do arquivo.

4. Exibindo o player no site

Agora vem a parte mais simples do trabalho, que é exibir o player. Eis o código HTML:

<object width="350" height="170" type="application/x-shockwave-flash">data="http://www.tecnosapiens.com.br/player/xspf_player.swf?playlist_url=http://www.tecnosapiens.com.br/player/musicas/playlist1.xspf&amp;autoplay=false&amp;shuffle=true"&gt;<param name="movie" /> value="http://www.tecnosapiens.com.br/player/xspf_player.swf?playlist_url=http://www.tecnosapiens.com.br/player/musicas/playlist1.xspf&amp;autoplay=false&amp;shuffle=true" /&gt;</object>&nbsp;
 

E o resultado final será esse:

Perceba que a URL que aponta o player contém alguns parâmetros iniciados por um ? (o primeiro) e outros por & (playlist_url, autoplay e shuffle no nosso exemplo). Estes parâmetros definem para o player, respectivamente, a URL da playlist, se o player deve tocar automaticamente ao ser carregado (valor true ou false) e se as músicas da playlist devem ser tocadas aleatoriamente. Estes e outros parâmetros você encontra no site oficial do XSPF.

Então é isso pessoal, espero que esta dica tenha sido útil para vocês!

Atualização em 31/03/2009 : Pessoal, este artigo vem recebendo diversos comentários de pessoas com o mesmo problema, o player com a mensagem “Loading playlist”. Verifiquem, e tenham certeza de que o caminho, a URL que aponta a playlist está correta, pois olhando com atenção os códigos percebo que o erro cometido é justamente esse. Abraços e boa sorte!