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!; 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.
<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=URL_DO__ARQUIVO_MP3" width="400" height="27" allowscriptaccess="never" quality="best" bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded" /> 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.
<embed src="http://webjay.org/flash/dark_player" width="400" height="40" wmode="transparent" flashVars="playlist_url=URL_DO__ARQUIVO_MP3&skin_color_1=-145,-89,-4,5&skin_color_2=-141,20,0,0" type="application/x-shockwave-flash" /> 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.
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script> 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.
<embed type="application/x-shockwave-flash" src="http://www.odeo.com/flash/audio_player_standard_gray.swf" width="400" height="52" allowScriptAccess="always" wmode="transparent" flashvars="audio_duration=DURAÇÃO&external_url=URL_DO__ARQUIVO_MP3" /> 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.
O código básico é o seguinte:
<object type="application/x-shockwave-flash" width="400" height="170"
data="http://seu domínio.com/xspf_player.swf?playlist_url=http://seudomínio.com/suaplaylist.xspf">
<param name="movie"
value="http://seudomínio.com/xspf_player.swf?playlist_url=http://seudomínio.com/suaplaylist.xspf" /></object>
Leia também:- Como montar uma rádio web ao vivo
- Crie arquivos de áudio MP3 convertendo o texto
- Faça seu computador tocar músicas de acordo com seu humor
Digite teteraconsultoria.com.br/blog em seu browser móvel.
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
Sua pergunta foi publicada Vanessa.
Qual é o melhor player de vídeo?
O link é:
http://blog.teteraconsultoria.com.br/2008/03/vlc-media-player-sem-codecs.html
Um abraço
Grande dica. passei uma tarde em busca disso e quando tava desistindo eis que encontrei esse ótimo post. Vi muitos na net, mas no meu wordpress só funciona se for com a tag embed, então esses cairam como uma luva! Só que ocorreu o seguinte, escolhi o do google reader por ser mais simples, uso linux e aqui ficou tudo beleza, mas quando fui ver o windows e explorer o meu blog carregou o mini player do windows midia player e pra variar bagunço o coreto!... por que será... vou estudar o código...
Abraços
Paulo
vc pode me explicar o que é URL_DO_ARQUIVO_MP3,pq eu tenho varias musicas no meu pc mais não sei seu ou sua URL !
É o endereço do arquivo MP3 na web.
Exemplo de URL:
http://teteraconsultoria.com.br/infoescravo/arquivos/vinheta-yahoo-nao-oficial.mp3
Ok?
Olá, eu achei mt bom esse post, mas a música não executa. O que acontece?
O link da minha música é esse:
http://www.esnips.com/doc/ba08cc3c-7528-4c61-b1ce-4fe27b30b0f0/Walk-on-the-Ocean
Obrigada.
Olá, Tutacozi
O link está incorreto. No endereço que você enviou o arquivo está embutido.
A URL do arquivo deve ser direta (no formato blah_blah_blah.mp3).
Olá, Eduardo, obrigada por responder meu comentário.
Eu tentei colocar a extensão.mp3, mas mesmo assim o arquivo não executa, e o player ainda é substituído pelo do media player.
Será que terei que hospedar o arquivo em outro site?
PS: No site, o arquivo executa direitinho.
Obrigada. Abraço.
Exatamente. No Esnips o arquivo fica embutido, mascarado. Perde-se o acesso direto ao arquivo (o que acontece na maioria deste tipo de hospedeiro).
Minha sugestão é o Odeo.com. Seria uma excelente opção. Gratuito, permite embutir em seu blog, dá a escolha do download e muito mais.
Olá, Eduardo, obrigada novamente, eu visitei e criei uma conta nesse site que vc falou (odeo), mas não faço idéia de como ele funciona, se dá pra colocar músicas nele, entrei lá e não entendi nadinha. Tem como vc explicar como esse site funciona?
Obrigada. Abraço.
O player MP3 Player do Google Reader
suporta playlist?
Infelizmente não, Israel.
Também já tive esta idéia, seria interessante. Vamos aguardar, e ver as alterações que a equipe do Google fará.
Muito obrigado pela informação, foi de grande ajuda!
Valeu pelas dicas, mas algum desses players funcionam automaticamente, tipo autoplayer?
Sim, Josman, todos eles.
Olá, cara estou tentando implementar em meu site XSPF Web Music Player mas não consigo fazer ele funcionar. Tem algo mais que tenho que fazer para ele aparecer no site e funcionar.
Se precisare olhar o que eu fiz de errado, segue o link de meu site:
url:http://gabrielperes.kinghost.net/testeplaylist.html
Aguardo o vosso retorno.
Att,
o codigo html do google player n tah funcionando, poderia me passar o correto
Oi Matheus,
o código correto do Google Player é o que está no artigo. Não está funcionando em sua página porque você cometeu alguns erros.
Veja:
Você colocou o src como:
src="http://www.google.com/reader/ui/3247397568-audio-player.swf" ?audiourl="http://www.festcol.com.br/music/kiss_kiss.wma"
1. Existe um espaço entre o swf" e o símbolo da url do audio;
2. Na sequência você pôs audiourl=. O correto é audioUrl=;
3. Experimente incorporar o player com um áudio no formato MP3.
Depois diga se funcionou, ok?
abraços
Olá.. Fiz extamente como vc postou e não consegui rodar o player. Pq?
Vc pode me ajudar?
Obrigada
Oi Bianca, o que houve? Qual está sendo a dificuldade?
Olá, Eduardo
Parabéns pelo BLOG, e pela atenção que você dá respondendo aos coments e tirando as dúvidas. Compartilhar conhecimento: isso não tem preço!
Procurava por esta informação, e tambem sobre o player de vídeo. Maravilha ter encontrado tudo aqui.
Um problema que apareceu no player do Google: quando publico ele toma o formato do windows media player, e eu gostaria do formato padrão, que está no modelo.
E para ficar completa minha alegria, preciso muito de uma informaçao: como faço para inscrever o meu site nos feeds? Poderia me ajudar?
Obs.: não é blog, é site mesmo.
Se puder me ajudar, fico imensamente agradecida.
Abraços
Oi Sereníssima,
para inscrever seu site nos feeds recomendo o FeedBurner.
--
Você está certa de que utilizou exatamente o código do Player Google publicado aqui?
Você pode enviar o link da página onde você publicou o player. Assim podemos revisar o código embutido e estudar o comportamento da página.
Ok?
Abraços
Parabéns pelas informações, procurei por esses players e só encontrei aqui...
A primeira parte já consegui, rodou certinho, mas, gostaria de inserir vários arquivos de áudio, como se fosse um podcast diário. Como faço isso usando somente um player como no www.filecast.info
Agradeço,
Meu blog é www.fabiorbas.blogspot.com
O player do Google Reader não está funcionando no IE7. Está inclusive com uma interface diferente... testei no Google Chrome e no Firefox, e toca direitinho em ambos... o que pode estar errado?
Sua escolha por um bom browser. Aí está o erro.
Esqueça de vez esse navegador troglodita e fique com o Firefox.
Aí você vai ver tudo funcionar direitinho.
Você tem até razão, Candido...
O problema é que eu estava tentando embedar esse player no meu site, e muitos usuários utilizam o Internet explorer como navegador... :(
Eu sei.
Passei muuuito pelo desespero de nunca saber se a coisa vai funcionar ou se vai dar pau.
Até descobrir que existem Macs e outros produtos a parte da empresa de Bill gates.
Ps.: Existe vida além da Microsoft. E é muito boa.
Ola pessoal atualmente tive problemas para encontrar um bom player que rodasse no blogspot pois ele tem um verificador XML, quebrei a cabeça muitas horas até adaptar um player muito bom que achei na net vejam
embed align='middle' allowScriptAccess='sameDomain' height='25' name='mp3playerlightsmallv3' pluginspage='http://www.macromedia.com/go/getflashplayer' quality='high' src='http://www.podbean.com/podcast-audio-video-blog-player/mp3playerlightsmallv3.swf?audioPath=SEU_MP3_AQUI&autostart=yes' type='application/x-shockwave-flash' width='210' wmode='transparent'/
para usuarios do blogspot, tirem a ultima barra antes do sina ">" a do fim pois o verificador de XML do blogspot é enjoado e ele gosta de colocar ele mesmo :) , os demais
não prescisam de quebrar a cabeça acho q é facil
Abraços à Todos
espero ter
A Detalhe coloquem os "<" e ">"
no inicio e no fim pois com esses tags não conseguia postar
Véi... Vc me ajudou d+! O FreeWebs não suporta fazer vários uploads no mesmo dia (isto quando é no grátis)...
Tava procurando um bonito, bom, e interessante... Achei aqui no Infoescravo! O Yahoo Media Embed!
Continuem assim!
Léo
Legal, Léo!
Existem outros players também, no artigo
» Players Mp3 em formato flash para seu site
Por favor alguem me ajude eu não consigo colocar a musica pra tocar no blog. To com problemas pra upar ela e pegar o link depois. Por favor alguem me add pra me ensinar eu agradeço mto! sterminator_@hotmail.com
Como faço para ativar o autoplayer do player do google?
flashvars="autoPlay=yes"
Olá Eduardo,
parazer em conhecer o teu blog. Poxa venho te agradecer pois há tempos mesmo que gostaria de acrescentar um player de áudio em meu blog. Na verdade já tenho um , mas é com uma playlist de músicas. O que eu procurava mesmo era um player como este do google (modelo que eu mais gostei), para poder postar arquivos de áudios, individualmente em postagens. E usei este mencionado aqui e deu tudo hiper certo! Quer dizer, se não fosse no início aquele probleminha q o blogger tem em interpretar os scripts dentro de um post, ao contrário de quando colocamos na sidebar né. Mas tb vim por mais dois outros motivos: eu criei um post e inseri o player com o arquivo desejado, e citei seu blog como fonte de minha pesquisa. E deixo aqui o link do post para que vc possa conferir se quiser:
http://amorepazsemfronteiras.blogspot.com/2009/06/paz-do-grande-espirito-inspiracao-xama.html
Fora isto, vi que vc tb aceita sugestões de seus leitores caso tb conheçam outros players. Então venho dar minha pequena contribuição se vc me permitir, indicando um serviço que gosto muito e não vi mencionado aqui. É o Mix.Pod (antigo My FlashFetish). Neste serviço, se vc fizer o registro no site , que é super facil, vc terá mais opções, como criar quantas playlists quiser, seja de áudio e/ou de video, e armazená-las por tempo indeterminado. bem, o meu player eu tenho já desde o ano passado no blog, e tudo funciona direitinho sempre. carregam os arquivos super rápido mesmo. E vc tb pode escolher skins para a sua playlist, desde as mais simples, até outras mais cheias de coisa. Personaliza tudo mesmo, e com a cor do seu blog se quiser. Parece até que fui paga para fazer propaganda a eles né rrss. Mas não, até pq meu blog não tem fins lucrativos e não tem nada a aver com tecnologia. E outra coisa: neste serviço vc tanto pode criar playlists com arquivos q encontra na net (videos do youtube inclusive), como tb add as suas músicas e /ou arquivos mesmo, com o endereço tal e qual vc postou acima (URL MP3). Para isto claro q tem de hospedar seus arquivos antes. E eles mesmo dão sugestão de dois serviços, mas o que mais gostei é do http://boxstr.com/, pois da para escolher se quer seus arquivos publicos, privados, ou compartilhar somente com quem quisermos. Super facil de usar, ainda mais eu que não entendo muito destas coisas.
Este é o url do meu Mix.Pod acaso vc queira ver como é: http://www.mixpod.com/lucysemfronteiras
E te peço desculpas de antemão por escrever uma msg tão extensa, mas fiquei encorajada quando li acima q vc mesmo menciona q seus leitores poderiam contribuir com mais algum serviço caso conhecessem.
E finalizando, estou preparando um novo template a meu blog (eu uso um do blogger a principio), e assim q eu alterar o layout, vou colocar um link para o teu, nos sites q recomendo.
Desde já grata mais uma vez por sua contribbuição e boa vontade em compartilhar informação. Coisa meio rara hj em dia.
Paz, Luz e sucesso a ti
Lucy
Coisa linda, Lucy, hein?
Contribuição nota 1000.
Teremos o maior prazer em publicar suas sugestões aqui no Infoescravo.
Assim que sair te mando o link, ok?
Sucesso
Muito obrigada Eduardo!!!
Fiquei muito contente por tua presença no blog e teu comentário tb!
Aguardo o link com o maior prazer. E mais uma vez, muito agradecida pelo teu trabalho tb.
Paz e muito sucesso a ti!
Lucy
OLA EDUARDO.
PARABENS PELO SEU BLOG E SEUS CONHECIMENTOS.
EU GOSTARIA DE SABER O SEGUINTE:
EU CRIEI UM SITE COM O PROPOSITO DE UMA WEB RADIO, QUERO RODAR AS MUSICAS NO ZARARADIO, E QUANDO ALGUEM VSITAR O SITE CLICKAR NO PLAYER IRA OUVIR AS MUNHAS MUSICAS DO PLAYLIST DO ZARA RADIO, SÓ QUE AINDA NÃO COLOQUEI O PLAYER POIS NÃO SEI DE UM PLAYER BOM E ONDE COLAR O CODIGO LA NO SITE.
DSSDE JA AGRADEÇO AS ORIENTAÇÕES
O codigo html do google player está só com um pequeno detalhe errado: no final... flashvars="playerMode=embedded" /> , tem esse espaço sobrando entre as aspas e a barra... é só deixar tudo junto (...flashvars="playerMode=embedded"/>) que funciona direitinho...
Obrigada Eduardo!!!!!!!!!!
Olá, Eduardo,
obrgda pelas dicas. Muita generosidade dividir seus conhecimentos. E aproveito para pedir ajuda: não sei como colocar o meu site no FEED. Pode me ajudar?
o site (ainda em fase de construção), mas já tem os links definidos, e um link pront.
www.avozdapoesia.com.br
Desde já agradeço!
Abraços
Olá, Eduardo,
obrgda pelas dicas. Muita generosidade dividir seus conhecimentos. E aproveito para pedir ajuda: não sei como colocar o meu site no FEED. Pode me ajudar?
o site (ainda em fase de construção), mas já tem os links definidos, e um link pronto.
www.avozdapoesia.com.br
Desde já agradeço!
Abraços
Meu email: serenissima@gamabrasil.com
Qual o comando que eu coloco dentro do codigo para o audio começar tocando sem ter que apertar o PLAY?
flashvars="autoPlay=yes"
ou
&autostart=yes
olá .. estou apanhando do PLayer do myspace para q ele toque sozinho qndo eu mando um comentario dentro do proprio myspace ow em scraps do orkut ...
por favor me diga aonde coloco o código para q ele faça autoplay ...
O problema é o seguinte: como faço para converter o meu arquivo mp3 em URL? Quais sites que fazem esse serviço?
Um abraço.
Player do Google parou de funcionar!
ñ carrega!
percebi hj! tinha pego a dica daqui e funcionava perfeitamente!
alguem tem uma nova dica aew ????
Experimente utilizar o player do Gmail (que é o mesmo).
» http://mail.google.com/mail/html/audio.swf
Ola amigo eu tenho musicas no 4shared e se eu collocar aquela url la vai reporduzir legal em meu site,na verdade ja tentei mas nao funcionou com aquela url do 4shared
com o dreamweaver midia inseriri plugins neh coloquei o codigo com a url da minha musicca do 4shared,ah coloquei o primeiro reporditor ai de todos que vc mostrou ai mas nao consegui nada rsrsrs vlw
Ta explicado, é uma assessoria, por isso coloca o código de sugestão do player e não deixa copiar...
Desde já´, obrigado...
Rui Carlos de Souza
Correio eletrônico: ruicarlos@portoweb.com.br
olha, fiz de uma forma muito tosca, porem que deu certo, peguei um video do youtube e no campo weight coloquei o parametro 25 assim somente a barra de curso aparece.
QUEM PODE MIM ENSINAR COMO FAÇO PRA COLCOAR AS MUSICAS QUE ESTÃO POSTADAS NO SITE WWW.4SHARED.COM EM ALGUM DESSES PLAY PQ Ñ CONSIGO COLOCALAS PRA EXECUTAR OBRIGADA MANDA PRO MEU E-MAIL OU MIM ADD josedasena@hotmail.com msn ok valeu a todos