Audio Player

Audio Player é um mp3 player simples. Existem duas versões, nessa página iremos falar da versão standalone (para qualquer site), caso queira ver um tutorial sobre a versão para wordpress (plugin version), clique aqui.
Entre outras coisas, é possível configurar as cores, codificar a url do arquivo mp3 para evitar que encontrem a url no codigo fonte e baixem o arquivo, pode configurar audios para tocar antes e/ou depois da reprodução do mp3 (ex: aberturas e encerramentos para podcast), integração com ID3 tag, etc.

Abaixo um exemplo do player:

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Faça donwload do arquivo zip aqui.
Dentro do zip tem 5 arquivos:
1. audio-player.js
2. audio-player-noswfobject.js
3. audio-player-uncompressed.js
4. license.txt
5. player.swf

O arquivo 1. é a versão do javascript com a biblioteca swfobject 2.1 inclusa (iremos usar essa versão do javascript).
O arquivo 3 é a versão do javascript sem a biblioteca swfobject, para uso da biblioteca em arquivo separado. Esse arquivo é a versão comprimida, apenas para o uso.
O arquivo 2 é igual ao arquivo 3, porém é a versão comentada, para estudo e modificação do código.
O arquivo 4 são os termos de licença do javascript
O arquivo 5 é o player.

Instalação:
1. Extraia os arquivos e faça upload para seu servidor. (para o nosso tutorial só será necessário fazer upload dos arquivos: audio-player.js e player.swf).
2. Inclua o audio-player.js no HEAD da sua página.
3. Ainda no HEAD, configure o Audio Player como no exemplo abaixo (linha 5 até 9). A única opção obrigatória é a width (largura).
4. Para inserir o player em sua página, coloca uma tag html (usei a tag div, mas pode ser qualquer uma) e dê a ela uma ID única (veja exemplo, em azul).
5. Essa tag será substituida pelo player. Se o seu navegador não permitir Audio Player, a tag não será substituida, portanto use ela para colocar um conteúdo alternativo (veja exemplo, em verde).
6. Coloque o script após a tag, como mostrado abaixo.

Exemplo:
Substitua "http://seusite.com.br/pasta/" com o caminho correto para os arquivos.

1. <html>
2. <head>
3. <title>Título da página</title>

4. <script type="text/javascript" src="http://seusite.com.br/pasta/audio-player.js"></script>

5. <script type="text/javascript">
6. AudioPlayer.setup("http://seusite.com.br/pasta/player.swf", {
7. width: 290
8. });
9. </script>

10. </head>
11. <body>

12. <div id="audioplayer_1">Conteúdo alternativo</div>
13. <script type="text/javascript">
14. AudioPlayer.embed("audioplayer_1", {soundFile: "http://seusite.com.br/pasta/mp3_file_1.mp3"});
15. </script>

16. <div id="audioplayer_2">Conteúdo alternativo</div>
17. <script type="text/javascript">
18. AudioPlayer.embed("audioplayer_1", {soundFile: "http://seusite.com.br/pasta/mp3_file_2.mp3"});
19. </script>

20. </body>
21. </html>

Configuração:
Você pode configurar o Audio Player no script colocado na HEAD da página:

1. <script type="text/javascript">
2. AudioPlayer.setup("http://seusite.com.br/pasta/player.swf", {
3. width: 290,
4. initialvolume: 100,
5. transparentpagebg: "yes",
6. left: "000000",
7. lefticon: "FFFFFF"
8. });
9. </script>

E pode configurar cada player separadamente no script colocado abaixo da tag:

1. <script type="text/javascript">
2. AudioPlayer.embed("audioplayer_1", { 3. soundFile: "http://seusite.com.br/pasta/mp3_file.mp3", 4. titles: "Título da música", 5. artists: "Nome da banda", 6. autostart: "yes" 7. }); 8. </script>

Para carregar mais de um arquivo, apenas coloque as URLs em soundFile separados por vírgula:

1. <script type="text/javascript">
2. AudioPlayer.embed("audioplayer_1", {
3. soundFile: "http://seusite.com.br/pasta/mp3_file_1.mp3,http://seusite.com.br/pasta/mp3_file_2.mp3",
4. titles: "Título da música 1,Título da música 2",
5. artists: "Nome da banda 1,Nome da banda 2"
6. });
7. </script>

Lista de opções para as configurações dos players:

Faixas:

Opção	Padrão	Descrição
soundFile	Vazio	URL do arquivo de áudio. Campo obrigatório
titles	ID3 tag	Título do áudio
artists	ID3 tag	Nome do artista

Opções

Opção	Padrão	Descrição
autostart	no	Se colocado valor "yes" o player começará a tocar ao carregar a página
animation	yes	Se colocado o valor "no" o player ficará sempre aberto
remaining	no	Se colocado o valor "yes", mostrará quanto tempo falta para terminar o audio, ao invés de mostrar o tempo corrido.
noinfo	no	Se colocado o valor "yes" o player não mostrará as informações de nome e artista
initialvolume	60	Volume inicial do player. Escolha de 0 (desligado) à 100 (mais alto).
buffer	5	Tempo em segundos da distância entra a parte que está sendo reproduzida no momento, e a parte que está sendo carregada do áudio.
encode	no	Se colocado o valor "yes", a URL do arquivo será codificada para evitar que encontrem a url no codigo fonte e baixem o arquivo
checkpolicy	no	Se colocado o valor "yes" o Audio Player procura por um policy file no servidor
RTL	no	Se colocado o valor "yes", inverte a posição do player, da direita pra esquerda.

Opções do Flash player:

Opção	Padrão	Descrição
width	Vazio	Largura do player. Ex: 290 (pixels) ou 100%. Campo obrigatório
transparentpagebg	no	Se colocado o valor "yes", o background será transparente

Opções de cores:
Todas as cores devem ter 6 dígitos hexadecimal, sem # ou 0x na frente.

Opção	Padrão	Descrição
bg	E5E5E5	Cor de Fundo
leftbg	CCCCCC	Cor de fundo do lado esquerdo
lefticon	333333	Cor do icone do lado esquerdo
voltrack	F2F2F2	Cor do track de volume
volslider	666666	Cor do slider de volume
rightbg	B4B4B4	Cor de fundo do lado direito
rightbghover	999999	Cor de fundo do lado direito ao passar o mouse
righticon	333333	Cor do ícone do lado direito
righticonhover	FFFFFF	Cor do ícone do lado direito ao passar o mouse
loader	009900	Cor de fundo da barra de carregamento
track	FFFFFF	Cor de fundo da barra de carregamento/progresso
tracker	DDDDDD	Cor da barra de progresso
border	CCCCCC	Cor da borda da barra progresso
skip	666666	Cor do ícone de próximo/anterior
text	333333	Cor do texto