TecnoSapiens

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:

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>

<track>
<title>Aqui vai o título da música (Substitua aqui)</title>
<location>Aqui vai a URL completa do arquivo MP3 (Substitua aqui)</location>
</track>

<track>
<title>Andre Williams - I Wanna Be Your Pajamas</title>
<location>http://www.tecnosapiens.com.br/player/musicas/Andre_Williams-I_wanna_be_your_pajamas.mp3</location>
</track>

</trackList>
</playlist>


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 type="application/x-shockwave-flash" width="350" height="170"
data="http://www.tecnosapiens.com.br/player/xspf_player.swf?playlist_url=http://www.tecnosapiens.com.br/player/musicas/playlist1.xspf&autoplay=false&shuffle=true">

<param name="movie"
value="http://www.tecnosapiens.com.br/player/xspf_player.swf?playlist_url=http://www.tecnosapiens.com.br/player/musicas/playlist1.xspf&autoplay=false&shuffle=true" />
</object>


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!