A tag <audio>, que é bem fácil de usar, promete facilitar a vida de todos nós: blogueiros, desenvolvedores e demais internautas. Vamos amar não depender mais de JavaScript, Flash e plugins para executar músicas e outros arquivos de áudio na web. Aprenda como funciona esse recurso e comece a usar desde já. Viva a simplicidade!
▶ O código
Como ainda não temos uma extensão que funcione em todos os navegadores, é preciso ter o áudio em pelo menos dois formatos: ogg e mp3. É necessário subir os arquivos para um host de site, não adianta colocá-los em um site específico de download porque o link não é executável.
Código:
As partes marcadas são aquelas que você deve personalizar. O resultado é o seguinte:
Caso seu navegador não seja compatível com HTML 5, você verá apenas um link.
▶ Só um formato
Para disponibilizar o arquivo em apenas um formato (o que não é recomendado ainda), o código é o seguinte:
Resultado em formato ogg, que não vai funcionar no Internet Explorer nem no Safari:
Resultado em formato mp3, que não vai funcionar no Opera:
Resultado em formato wav, que não vai funcionar no Internet Explorer:
▶ Loop
Para que o áudio se repita automaticamente e sempre, até que o visitante interrompa, use loop="loop" dentro da tag <audio>:
Segue um áudio bem curto com loop para você perceber como funciona:
▶ Autoplay
Se você quer que o áudio toque automaticamente ao abrir a página, use autoplay="autoplay":
▶ Tabela de extensões
Saiba quais formatos funcionam em cada navegador:
| Formatos: | mp3 | ogg | wav* |
|---|---|---|---|
| Chrome: | sim | sim | sim |
| Firefox: | sim | sim | sim |
| Internet Explorer 9: | sim | não | não |
| Opera: | não | sim | sim |
| Safari: | sim | não | sim |
*Apesar de ser compatível com quase todos os navegadores, o formato wav não é adequado para a web: é muito pesado e tem carregamento lento.
Leia também:
Imagem: Find Icons
Fonte: W3schools
Até mais!
Já ouvi falar nessas tags que permitem colocar um player de áudio numa página da web.
ResponderExcluirUma pena ainda só o Google Chrome que suporta os 3 formatos. Mas creio que logo os outros navegadores passarão a ter suporte a todos os formatos de áudio.
Pensava também que o IE 9(Primeiro navegador da Microsoft a suportar HTML5) não suportava a tag audio
Gosto muito da simplicidade do HTML5, ele, realmente, facilita muito certas coisas!
ResponderExcluirMas embora tenha facilitado a incorporação de áudio em blogs, acho que, para os blogueiros que não possuem host, o grande "problema" será onde hospedar tais arquivos.
E uma dúvida que me ocorreu: não é necessário utilizar o HREF dentro do código, estou certo? Pois ele só aparecerá para quem estiver utilizando navegadores incompatíveis com HTML5, então, ao invés de um HREF eu poderia colocar uma mensagem do tipo: "Seu navegador não é compatível com HTML5 e blá blá blá..."?
Gostei bastante do artigo!
Igor, exatamente: o link que coloquei é uma mensagem alternativa para quem tem navegador muito antigo. Como meu blog também tem script do Yahoo! Media Player, mesmo sem a tag áudio a pessoa consegue executar a música. Mas também pode ser uma mensagem de texto, como você falou. ;)
ResponderExcluirQuanto à hospedagem do áudio, no post Alternativas de hospedagem ao Geocities há alguns sites que fazem isso gratuitamente.
Até mais!
Ficou bem show mesmo, integrei a função autoplay="autoplay", mas ainda não descobri como fazer o "repeat" da música, se alguem souber por favor me avisa: marcelo@magicdesigner.com.br
ResponderExcluirSe quiserem ver o script funcionando acessem: www.imfszabunia.com.br
#############################
imfszabunia
Obrigada pela dica do autoplay. Quando eu descobrir sobre o loop eu conto aqui. ;)
ExcluirPara repetir "eternamente" adicione loop="loop" ao código.
Excluireu inseri autoplay mas não tocou automaticamente. O que faço?
Excluirconsegui e pelo Google Chrome ficou show!
ExcluirValeeeu :)
como q faz pra no google chrome ele n repetir
ResponderExcluirWeslei, aqui o Google Chrome só repete se eu coloco loop. Sem loop na tag não deve repetir.
ExcluirHtml 5 é um sonho mesmo rs. Só não entendi como posso colocar várias músicas, assim que acabasse uma, começaria a próxima... se puder dar um toque, obrigada ;)
ResponderExcluirParabéns pelo tuto
Alessandra, só com HTML não tem jeito ainda. Vai ter que usar JavaScript. Essa página aqui tem um código interessante: http://www.jezra.net/projects/pageplayer.
Excluireu tbm queria saber como colocar mais de 1 musica em meu player mas usando apenas comandos em html =//
ExcluirOi helen
ResponderExcluirnem sei como vim parar aqui, mas descobri seu blog/site e tem otimas dicas, to aqui com 5 abas abertas pra ler e aprender ehehe
entao, estou atras ah mto tempo de como fazer essa 'tabela' que voce fez ali no:
Formatos: mp3 ogg wav*
Chrome: sim sim sim
Firefox: não sim sim
Internet Explorer 9: sim não não
Opera: não sim sim
Safari: sim não sim
ela eh exatamente o que preciso (mas com bordas de linha cheia e nao pontilhadas) e com cores 'dentro'
tem como vc me ajudar nisso?
obgdo!!!
Oi, voltei
ResponderExcluirencontrei aqui: http://www.htmhelen.com/2009/10/como-criar-tabelas.html#more
mas ainda nao sei fazer as bordas de linha cheia =/
e minha outra duvida seria se tem como incluir imagens 'dentro' da tabela e qual seria o codigo.
obgdo ;)
Nuno, que bom que gostou do blog. Fico muito feliz por seu interesse em HTML/CSS. :) Para esclarecer suas dúvidas, sugiro os seguintes posts:
Excluir* Aprendendo a usar bordas
* Imagens no background
* Alinhamento de imagens (que também mostra como inserir imagens)
* Como começar a estudar HTML e CSS
Bons estudos!
Não consegui fazer uma playlist usando o código java que voce postou ali encima..
ResponderExcluiraté porque eu nem achei onde estava o código java >.<
Ciclo, sinto informar, mas você não entendeu o post. Primeiro porque não ensinei a fazer playlist. Segundo porque não postei nenhum código Java.
ExcluirEste tutorial exige algum conhecimento prévio que é saber o que é HTML. Para que você inicie seu estudo sobre o tema, indico esses dois posts:
♦ Como começar a estudar HTML e CSS.
♦ Sites sobre HTML e CSS.
Acredito que você conseguirá fazer uma playlist para o seu blog usando o Yahoo! Web Player, porque assim você não precisa se preocupar com a hospedagem das músicas, pode linkar as que já estão no YouTube. ;)
Até mais!
Meu nome é victor
ResponderExcluiroiee como faço para o usuario fexar o player e a musica para de tocar fiz um botao para o usuario fechar, mais quando fecha ele ainda continua tocando.
Obrigado
Chuta que é macumba!
Excluirsou eu victor de novo, oq eu faço para ele tocar na hora que abrir o site , sem precisar apertar o play.
ResponderExcluirobrigado!
Victor, para descobrir como fazer isso basta ler o post. ;)
ExcluirEm relação a isso, para casos que somente o HTML5 não resolva poderemos utilizar o plugin JPlayer para JQuery, funciona muito bem.
ResponderExcluirOlá como faço para editar aparencia do player,
ResponderExcluirtipo no IE9 ele fica muito largo
já tentei mais nao consegui
adersonteixeira[arraba]gmail.com
Aderson, defina a largura do elemento audio: <audio style="width:500px;"…
Excluir~le teatro magico + html *-------*
ResponderExcluirComo faço para que a musica não pare quando eu troco de página?
ResponderExcluirDesde já agradeço a ajuda..abs...
Apenas com esse código não é possível, é preciso criar (1) iframe, (2) pop-up ou (3) colocar todo o código do site em uma página só e dividir em camadas.
ExcluirComo não vou fazer nenhum desses tutoriais tão cedo, sugiro que use o scmplayer.net, ele gera um frame automaticamente, assim quando você muda de página, o player continua tocando.
Para vê-lo em funcionamento, visite www.helen.jor.br.
Como faço para diminuir o volume quando a musica carrega sozinha? tem como? abs e obrigado..
ResponderExcluirSei que é possível com JavaScript, sugiro que busque tutoriais nessa linguagem. ;)
ExcluirPreciso hospedar minhas musicas para fazer coloca-las em um player,porem onde faço isso para que gere o link em .mp3 ?
ResponderExcluirExistem várias opções. Algumas delas:
Excluir♦ DropBox
♦ XPG e outras hospedagens
como faso pra colocar varias musicas tocando uma atras da outra sem parar.om html,se puder me ajudar agradeso
ResponderExcluirmeu email jorgehenriqueborabora@yahoo.com.br
Já postei algumas dicas nos comentários que respondi acima.
ExcluirOlá pessoal, na minha empresa tem um servidor de streaming de audio e video, posso publicar o conteúdo em dois tipos: Silverlight ou pelo media player mesmo, vi que para usar o html5, necessita-se de bibliotecas(library), como meu forte não é programação WEB, fiquei com algumas dúvidas ao ler sobre o html5, casso possam me ajudar, deixo-as abaixo.
ResponderExcluirTenho uma página para o cliente acessar o conteúdo, essa página puxa o ponto de publicação, ambos no servidor de streaming, caso eu queira adicionar um player html5, essas (libraries) vão ficar onde na página(consigo adicioná-lo na mesma página de publicação? Apenas substituindo todo o código silverlight pelo do player html5)? E do lado do cliente, ele deve baixar algo como é o caso do silverlight?
Grato.
Junior, infelizmente eu não tenho conhecimento sobre streaming, com ou sem HTML 5.
ExcluirSe você souber inglês (ou souber usar o Google Tradutor), sugiro que procure por "html5 streaming". Você vai encontrar bastante coisa.
Boa sorte! ;)
oi como faço para trocar as musicas nesse play como faço ? <
ResponderExcluirNão existe essa função.
ExcluirBoa noite,
ResponderExcluirIntegrei sua explicação a um template e ficou bom mas, não funciona no IE10 sabe me dizer o que ocorre? no firefox e no chrome está ok
http://www.trilhatec.com.br/monsanto/audio.html#
Não tenho e nunca usei Internet Explorer 10. Não sei porque não funciona. :(
ExcluirOutras opções que talvez sejam compatíveis:
* Streampad
* SCM Player
* Yahoo! WebPlayer
Como eu faço para colocar pra tocar mais de uma musica?
ResponderExcluirLeia os comentários já respondidos. :)
Excluirnão consigo colocar esse player no meu blog ,gostei desse modelo
ResponderExcluirse poder me ajudar
Cleverson
Minha ajuda é o post. Se não conseguiu por meio dele, procure outro tutorial. Já devem existir milhares sobre esse mesmo assunto. ;)
ExcluirGostaria de aprender a 'criar' arquivo HTML de meus MP3 para colar em chats.
ResponderExcluirComo fazer?
Não conheço nenhum chat que aceite HTML, exceto meia dúzia de tags de formatação como, por exemplo, <b> e <i>.
Excluiroi Helen
ResponderExcluirese codigo funciona em joomla ?
aqui, o player aparece e logo some e nao toca a musica
grato
1. Nunca testei em Joomla.
Excluir2. Deveria funcionar.
3. Se não funciona, provavelmente o código fonte do site (talvez a folha de estilos) tem alguma informação que faz o player desaparecer.
E para disponibilozar video eu consegui a barra de ferramentas do mesmo player que o seu mas o video nao roda
ResponderExcluir?
ExcluirOla, e no caso de varias musicas.... so tem q se repetir as tags, ou a um jeito, mas facil e rapido de por as musicas todas de uma so vez!!?
ResponderExcluir↑
Excluirminha querida qual a possibilidade de colocar mais de uma musica na tag audio?
ResponderExcluir↑
ExcluirConsegui, obrigada !!
ResponderExcluirE no caso de múltiplas músicas em um player só como faço?
ResponderExcluirNão consegui fazer o player funcionar com arquivo de música mp3 no google drive ou anexado em página do google sítes.
ResponderExcluirAlguém sabe me explicar como faço pra funcionar com o arquivo no google drive ou em sites google?
Desde já agradeço.
Até onde eu sei, realmente não é possível. Mas com o comentário publicado pode ser que alguém possa ajudar.
ExcluirOlá, gostaria que me desses um link se páginas que explicam como personalizar a tag de audio.
ResponderExcluirEncara inglês? Então tá na mão: Creating a Custom HTML5 Audio Element UI.
Excluiroi Helen
ResponderExcluirQueria saber se é possivel mudar a cor desse player e dimuir o tamanho dele tambem
obrigado
Jeito tem, mas nunca fiz. O link do post em inglês que ensina está no comentário acima.
Excluirfiz um com strean de radios online mas é um codigo diferente
ResponderExcluirsó tem um poblema que não consegui resolver é que ele só funciona todos de uma vez
queria saber como resolver isto
ao dar play em um dar stop em outro
Olá Helen Fernanda, primeiramente queria agradecer pelo conteudo disponibilizado, segundo eu queria tirar uma dúvida, eu coloquei o código completo, pra musicas ficar repetindo e pra começar a tocar automaticamente, só que tem um problema, quando coloca pra começar a tocar automaticamente o player desaparece e só toca a musica, não aparece o botão de pausa do player, como eu resolvo isso, pode me ajudar?
ResponderExcluirObrigado!
Não posso ajudar. Isso significa que os navegadores não estão totalmente compatíveis com essa opção. Boa sorte!
ExcluirHost é hospedagem. Com o Ziddu e outros sites de sharing e download não funciona, como já disse acima.
ResponderExcluirNo post Alternativas de hospedagem ao Geocities você encontra algumas opções.
OI. Se colocar muito arquivo de áudio na página, não há o risco do carregamento da página demorar?
ResponderExcluirSim.
ExcluirPARABÉNS! PELO SEU TRABALHO.
ResponderExcluirObrigada.
Excluir