Como embutir um arquivo de áudio MP3 (como um podcast, uma música ou voz) em uma página para que os visitantes possam ouvir o áudio no navegador sem precisar de um player externo?
Já recomendei aqui no blog o player MP3 do Google para embutir canções MP3 e podcasts em web pages mas, por alguma razão, o player em formato flash do Google parou de funcionar nos sites em que foi instalado (inclusive aqui, no Infoescravo), funcionando apenas nas mensagens com áudio em anexo no Gmail.
Por isso, vamos dar uma olhada em algumas opções de players de MP3 em flash, encontrados no próprio Google e em outros sites como o Yahoo!:
Eles leves, fáceis de implementar e extremamente eficientes.
1. MP3 Player do Google Reader
O Google Reader tem um MP3 player que é praticamente o mesmo do Gmail, mas funciona em qualquer site fora dos domínios do Google. Esse player tem controles de volume e auto-detecta a duração do arquivo, o que facilita aos leitores saber quando vai terminar o áudio. Veja aqui um exemplo, seguido do código HTML:
Para usar este MP3 player em seu website ou blog, basta copiar-colar o seguinte código e alterar URL_DO__ARQUIVO_MP3 pelo link do seu arquivo MP3.
2. MP3 Player do Yahoo!
Se você acha que o normal é ser simples e básico, dê uma olhada nisso. O portal Yahoo! oferece um gerador de código (chamado Easy Listener) que te ajuda a criar um player de MP3 em flash que combina com as cores e layout do seu site. Veja o exemplo:
Mesmo que o Easy Listener solicite, por padrão, o endereço da página web onde está hospedado o arquivo MP3, você pode incluir o link diretamente e ele vai funcionar perfeitamente. Suporta ‘auto play’, e você pode decidir onde os meta-dados associados com o MP3 devem ser exibidos.
3. Yahoo! Media Player
Se você mantem um site ou blog de MP3 ou roda um podcast que regularmente gera links a arquivos MP3, seria interessante embutir um player para cada áudio. Nesse caso eu recomendaria a você utilizar o Yahoo! Media Player, que auto-detecta links para arquivos MP3 em suas páginas e cria um player para cada link.
Você só precisa inserir o seguinte link no template do blog e todos os hyperlinks em formato MP3 serão convertidos em MP3 players. Ainda tem a função de reprodução aleatória (shuffle ou random) e os visitantes podem pular para qualquer música na playlist. Excelente opção.
4. MP3 Player do Odeo
O bom e velho Odeo oferece um MP3 player bastante interessante que roda perfeitamente em web pages e leitores RSS. Uma desvantagem é que o Odeo Player solicita que você digite a duração exata da música no código. Você pode até pular esse passo, mas a barra de progresso não vai refletir o tempo correto quando a música for tocada. E não tem controles de volume.
Para embutir o MP3 player do Odeo em seu blog ou site, adicione o código abaixo alterando URL_DO__ARQUIVO_MP3 e DURAÇÃO pelos valores de seu arquivo.
Escolha: Com tantas opções, qual player você vai usar em seu site?
Como um típico minimalista, eu prefiro o MP3 player do Google Reader, já que ele oferece controle de volume e é bem leve. E você, qual player costuma utilizar em seu site? Se tiver outras sugestões de MP3 player para embutir, pode deixar sua dica aqui nos comentários que será publicada.
Update em 7/03/2008: Considere sempre como excelente opção, o player desenvolvido pelo Fabricio Zuardi. O XSPF Web Music Player é um aplicativo Open Source em formato flash, excelente para tocar playlists e arquivos mp3.
O código básico é o seguinte:
E player pra rodar vídeo no computador, qual seria o melhor? obrigada
OLá Vanessa,
bom, eu recomendo fortemente o uso do VLC Media Player (da VideoLan).
Roda todo tipo de arquivo sem precisar instalar codecs, extensões, etc.
Onde tem pra baixar? Quero testar pra ver. Eu não aguento mais ter que trocar de player todahora pra tocar esse ou aquele vídeo, é um saco.
Vou publicar daqui a pouco uma matéria sobre o VLC Media Player, Ok?
Fique atenta e obrigado pela sugestão, Vanessa.
Ok, no aguardo. obrigadinha
Muito obrigado pela informação, foi de grande ajuda!
desculpa minha ignorâncoa mas quero saber onde eu posto o audio em mp3 para depois eu copiar este endereço para colar em meu site?
obrigado e aguardo resposta
Marcão
No seu site mesmo, Marcão. Se o endereço tvmnet.com.br é seu, vc deve pagar pela hospedagem e tem espaço suficiente para guardar seus áudios. Certo? bjinhos
Olá Eduardo! Parabéns pelo trabalho de disponibilizar estas informações todas! Mas segue uma perguntinha mais do que ignorante…
Baixei o FMP3… mas ainda não consegui entender como faço para colocá-lo no blog tocando uma música de minha escolha em uma das postagens… eu preciso pagar um site para hospedar músicas? ou coloco as que estão no meu desktop? como faço isso? rsrsrsrs… desculpe a ignorância…
Abração, Cris
Valeu Eduardo!
Obrigada!
abçs
Cris
Esse 3. Yahoo! Media Player não funcionou comigo, só mesmo no site do yahoo. Alguem poderia me ajudar?
Funciona muito bem, mas os arquivos devem estar na web, tanto os MP3 como a sua página html, php, etc… De outro modo não funciona.
Uma desvantagem é que não há a opção de barra deslizante. Mas se vc não quer ou não pode perder tempo digitando plylists, o yahooo media player é ideal.
Como faz pro player ( 3. Yahoo! Media Player ) tocar as musicas aleatoriamente
Thiago,
o Yahoo! Media Player auto-detecta links para arquivos MP3 nas páginas e cria um player para cada link. Ele é baseado num Javascript (arquivo no endereço mediaplayer.yahoo.com/js).
Por isso, você só consegue alterar as propriedades do Yahoo! Media Player se modificar o arquivo js. E para isto é preciso conhecer a linguagem Javascript.
(Mas podemos tirar algumas horas pra dar uma olhada no arquivo, quem sabe um dia desses…)
Obrigado por todas as informações.
Por favor tenho uma dúvida, quero colocar um player em meu site, mas gostaria que o playlista tocasse sem intervalo de uma música para outra, que imediatamente no final de cada começasse a p´roxima semelhante a uma mixagem…
Grato
Samir,
no seu caso não importa o player. O que tem que ser editado é a playlist e os arquivos mp3 que ela contem.
Olá… gostaria de saber como que eu faço pra inserir um destes players em meu blog… Pretendo utilizar o player do Google, mas não sei como inseri-lo em meu blog.
Valeu
mandou bem
,D
Eu ja tenho um player mto bom, mas eu to precisando de uma ajuda!
Eu preciso coloka ele no site, mas eu quero que ele nao atualize quando mudar de página.
Eu pensei se da pra coloka ele em uma layer e fazer com que essa layer seja comum em todas as paginas e que ela nao atualize, mas nao sei os codigos para fazer isso.
Por favor eu to precisando dessa ajuda, porque só falta isso para terminar o site.
Obrigado
Oi Allan,
dá sim. Precisa checar em qual sessão do site você deseja colocar o player.
Mas se você mudar de página ele será atualizado.
Eduardo,
Eu to fazendo o site de uma dupla sertaneja.
Eu coloquei o player no canto direito superior da página.
O site tem 6 paginas no total. Contando com a Home.
Eu quero que o player nao atualize…tipo se eu clicar em galeria, o player continue tocando a musica. Eu ja vi varios sites assim.
Por isso eu quero saber se tem algum código pra faze isso.
Os sites que eu vi estao em manutenção!
Meu site esta em Html, e estou usando dreamweaver para fazer o site.
Eu só queria saber se tem como dexar o player continuar tocando quando eu mudo de pagina.
Eu nao sei se tem como fazer isso em uma pagina em Html.
O player ta como tag Object.
Eduardo vc sabe uma maneira de fazer o player nao atualizar em um site todo em flash?
Tem sim, Allan. Você precisa aplicar um frame ou layer.
Quanto à página em flash, você precisa colocar o comportamento na edição do objeto.
Eu coloquei o player em uma layer(chamada Radio), e a logo e os botoes em outra(chamada cabeçalho).
Qual o codigo que eu coloco pra fazer a layer Radio e a layer cabeçalho nao atualizar?
booa, muito bom
eu gostei do 2,
2. MP3 Player do Yahoo!
so nao estou conseguindo colocar o autoplay,
sera que alguem poderia me ajudar ?
FlashVars="autoPlay=True"desculpe minha ignorancia mais ainda nao consegui, acrescentei o codigo e ai aparece que a midia nao foi encontrada,
teria como voce colocar o codigo completo pra mim ?
desde ja agradeço.
Willian, teria como você colocar o seu código completo aqui, pra podermos checar?
Seguinte pessoal,
eu uso o Yahoo player. Acontece que não estou encontrando músicas na web para que possa aumentar a playlist do meu site. Tenho procurado só que não estou obtendo êxito. Andei achando pouca coisa. Só mesmo um bocado de música do grupo Roxette e músicas desconhecidas.
Assim, queria saber se alguém aqui poderia me indicar alguma solução para que eu possa incrementar a playlist do player da rádio do meu site.
Quem souber uma forma de me ajudar pode me contactar por e-mail: lieggio@portaldoentorno.zzn.com
Bem é isso.
Desde já obrigado!
Oi Lucas,
você não poderia hospedar os MP3s no host do Portal do Entorno?
Ola Eduardo Tetera,
músicas acho que não. Tenho que verificar se o meu hospedeiro permite. Por isso busco encontrar um site que tenha MP3.
Obrigado.
pow Eduardo, valew mesmo,
esse player me ajudou bastante, e vc também ^^
otimo topico,
brigadao ae..
Valeu, Willian.
sinceramente gostei dos codigos.
pega d’boa
mas nao consegui fazer tocar as musicas
no lugar do codigo que pede,, favor de exeplos alguém ae de como add músicas para tocar???????
Olá, Eduardo, blz? Veja se pode me ajudar:
Gostaria de saber se existe algum player que eu possa embutir num site em flash que trabalha com arquivos em formato .WMA ao invés de MP3. Teria algum assim?
Grato, adelmo
Oi Adelmo,
todos players acima funcionam com arquivo .wma.
Eduardo eu to precisado da mesma coisa que o Allan, que o Player n atualize junto com o site. Vo te passar um site pra vc ver já q ce tinha pedido : http://www.trackitdown.net … Valew
Olá,
Estou com um quadro em uma rádio e tenho as gravações em mp3 no meu computador, como faço pra postar no meu blog?
Oi Caroline,
basta subir os arquivos de áudio quando for postar novo artigo.
As principais plataformas de blog disponibilizam esta ferramenta, como o Blogger e o WordPress.
gostaria de saber tenho varias musicas mp3 em meu computador. tem um play que posso por em meu site para inserir estas musicas la pois todas elas ja foram enserida no gerenciador de aquivos do meu sitee qual a url para copia aguardo resposta
Como adicionar várias música no player do Google????
Montando uma playlist, que pode ser no formato .m3u.
Como faço para adicionar músicas ao player MP3 Player do Google Reader. Sei que tenho que hospedar as músicas em site esse que foi indicado pra Cris o Googlepages eu não consegui usar então usei o MP3Tunes. Ele também serve? O dropbox eh um tipo de host? e como faço para pegar o URL neles.
Desculpa a quantidade d pergunta e minha ignorancia quanto o assunto hehehehe
Vlw’s
eu ja baixei a musica pela net e mesmo assim ñ da certo,por que?
Como faço para colocar o player?
Onde crio o player?
Em que parte do meu site configuro o player?
agradeço muito se puderes me ajudar!
obrigada
Todos funcionam perfeitamente.
valew! otimo post!
Eduardo, Vê só, muito bom esse tutorial e talz, porem, esses player só serverm para músicas online?
não teria como eu colocar musicas que estarão no site nao?
caso nao dê, como faço pra criar uma play list online?
vlw…
@Junior: As músicas que estão no site não estão online? Serve para qualquer arquivo de áudio que esteja hospedado em um servidor.
Olá,
“Uma desvantagem é que o Odeo Player solicita que você digite a duração exata da música no código. Você pode até pular esse passo, mas a barra de progresso não vai refletir o tempo correto(..)”
Solução:
Se se tirar a string «audio_duration=DURAÇÃO&», funciona corretamente com qualquer duração. 😉
LittleHelper
Onde arranjo um site pra hospedar as músicas?
Obg !
Tavez xpg. Espero ter ajudado. Obrigado.
cara seguinte … esses player n funcionam aqui … eles ta fora ou o problema eh aqui mesmo ?
Seguinte: nenhum destes players funcionam mais no orkut, que é onde me interessaria funcionar. Nem sei se funcionam em outros sites, mas pelo jeito vocês tem que achar outra maneira de poder ser aceito em sites.
Abs.
Não Funciona em Nenhum Site !
Ótima dica, funcionou legal, valeu!
Coloquei todos no meu Blog e nem um apareceu. dionoticias.blogspot.com