domingo, 11 de setembro de 2011

Player de áudio com HTML 5

Atualizado dia 04.nov.2016

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:

<audio controls="controls" loop preload="preload title="Abaçaiado - O Teatro Mágico"> <source type="audio/ogg" src="http://enderecodoseusite.com/audio.ogg" /> <source type="audio/mpeg" src="http://enderecodoseusite.com/audio.mp3" /> <a href="http://enderecodoseusite.com/audio.mp3">Abaçaiado - O Teatro Mágico.mp3</a> </audio>

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:

<audio src="http://enderecodoseusite.com/audio.mp3" controls="controls" loop preload="preload" title="Quermesse - O Teatro Mágico"> <a href="http://enderecodoseusite.com/audio.mp3">Quermesse - O Teatro Mágico.mp3</a> </audio>

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>:

<audio controls="controls" loop="loop" preload='preload'>

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":

<audio controls="controls" autoplay="autoplay" preload='preload'>

Segue página com exemplo de autoplay: www.helenfernanda.com.br/2016/11/audio-com-autoplay.html.

▶ Tabela de extensões

Saiba quais formatos funcionam em cada navegador:

Formatos:mp3oggwav*
Chrome:simsimsim
Firefox:simsimsim
Internet Explorer 9:simnãonão
Opera:nãosimsim
Safari:simnãosim

*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!

69 comentários:

  1. Já ouvi falar nessas tags que permitem colocar um player de áudio numa página da web.

    Uma 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

    ResponderExcluir
  2. Gosto muito da simplicidade do HTML5, ele, realmente, facilita muito certas coisas!

    Mas 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!

    ResponderExcluir
  3. 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. ;)

    Quanto à hospedagem do áudio, no post Alternativas de hospedagem ao Geocities há alguns sites que fazem isso gratuitamente.

    Até mais!

    ResponderExcluir
  4. 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
    Se quiserem ver o script funcionando acessem: www.imfszabunia.com.br
    #############################




    imfszabunia

    ResponderExcluir
    Respostas
    1. Obrigada pela dica do autoplay. Quando eu descobrir sobre o loop eu conto aqui. ;)

      Excluir
    2. Para repetir "eternamente" adicione loop="loop" ao código.

      Excluir
    3. eu inseri autoplay mas não tocou automaticamente. O que faço?

      Excluir
    4. consegui e pelo Google Chrome ficou show!
      Valeeeu :)

      Excluir
  5. como q faz pra no google chrome ele n repetir

    ResponderExcluir
    Respostas
    1. Weslei, aqui o Google Chrome só repete se eu coloco loop. Sem loop na tag não deve repetir.

      Excluir
  6. Html 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 ;)

    Parabéns pelo tuto

    ResponderExcluir
    Respostas
    1. 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.

      Excluir
    2. eu tbm queria saber como colocar mais de 1 musica em meu player mas usando apenas comandos em html =//

      Excluir
  7. Oi helen
    nem 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!!!

    ResponderExcluir
  8. Oi, voltei
    encontrei 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 ;)

    ResponderExcluir
    Respostas
    1. 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:

      * 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!

      Excluir
  9. Não consegui fazer uma playlist usando o código java que voce postou ali encima..
    até porque eu nem achei onde estava o código java >.<

    ResponderExcluir
    Respostas
    1. 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.

      Este 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!

      Excluir
  10. Meu nome é victor

    oiee 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

    ResponderExcluir
  11. sou eu victor de novo, oq eu faço para ele tocar na hora que abrir o site , sem precisar apertar o play.

    obrigado!

    ResponderExcluir
    Respostas
    1. Victor, para descobrir como fazer isso basta ler o post. ;)

      Excluir
  12. Em relação a isso, para casos que somente o HTML5 não resolva poderemos utilizar o plugin JPlayer para JQuery, funciona muito bem.

    ResponderExcluir
  13. Olá como faço para editar aparencia do player,
    tipo no IE9 ele fica muito largo
    já tentei mais nao consegui


    adersonteixeira[arraba]gmail.com

    ResponderExcluir
    Respostas
    1. Aderson, defina a largura do elemento audio: <audio style="width:500px;"

      Excluir
  14. ~le teatro magico + html *-------*

    ResponderExcluir
  15. Como faço para que a musica não pare quando eu troco de página?
    Desde já agradeço a ajuda..abs...

    ResponderExcluir
    Respostas
    1. 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.

      Como 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.

      Excluir
  16. Como faço para diminuir o volume quando a musica carrega sozinha? tem como? abs e obrigado..

    ResponderExcluir
    Respostas
    1. Sei que é possível com JavaScript, sugiro que busque tutoriais nessa linguagem. ;)

      Excluir
  17. Preciso hospedar minhas musicas para fazer coloca-las em um player,porem onde faço isso para que gere o link em .mp3 ?

    ResponderExcluir
  18. como faso pra colocar varias musicas tocando uma atras da outra sem parar.om html,se puder me ajudar agradeso
    meu email jorgehenriqueborabora@yahoo.com.br

    ResponderExcluir
    Respostas
    1. Já postei algumas dicas nos comentários que respondi acima.

      Excluir
  19. Olá 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.

    Tenho 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.

    ResponderExcluir
    Respostas
    1. Junior, infelizmente eu não tenho conhecimento sobre streaming, com ou sem HTML 5.

      Se você souber inglês (ou souber usar o Google Tradutor), sugiro que procure por "html5 streaming". Você vai encontrar bastante coisa.

      Boa sorte! ;)

      Excluir
  20. oi como faço para trocar as musicas nesse play como faço ? <

    ResponderExcluir
  21. Boa noite,

    Integrei 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#

    ResponderExcluir
    Respostas
    1. Não tenho e nunca usei Internet Explorer 10. Não sei porque não funciona. :(

      Outras opções que talvez sejam compatíveis:

      * Streampad
      * SCM Player
      * Yahoo! WebPlayer

      Excluir
  22. Como eu faço para colocar pra tocar mais de uma musica?

    ResponderExcluir
  23. não consigo colocar esse player no meu blog ,gostei desse modelo

    se poder me ajudar

    Cleverson

    ResponderExcluir
    Respostas
    1. Minha ajuda é o post. Se não conseguiu por meio dele, procure outro tutorial. Já devem existir milhares sobre esse mesmo assunto. ;)

      Excluir
  24. Gostaria de aprender a 'criar' arquivo HTML de meus MP3 para colar em chats.

    Como fazer?

    ResponderExcluir
    Respostas
    1. Não conheço nenhum chat que aceite HTML, exceto meia dúzia de tags de formatação como, por exemplo, <b> e <i>.

      Excluir
  25. oi Helen
    ese codigo funciona em joomla ?
    aqui, o player aparece e logo some e nao toca a musica
    grato

    ResponderExcluir
    Respostas
    1. 1. Nunca testei em Joomla.

      2. 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.

      Excluir
  26. E para disponibilozar video eu consegui a barra de ferramentas do mesmo player que o seu mas o video nao roda

    ResponderExcluir
  27. Ola, 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
  28. minha querida qual a possibilidade de colocar mais de uma musica na tag audio?

    ResponderExcluir
  29. E no caso de múltiplas músicas em um player só como faço?

    ResponderExcluir
  30. Não consegui fazer o player funcionar com arquivo de música mp3 no google drive ou anexado em página do google sítes.
    Alguém sabe me explicar como faço pra funcionar com o arquivo no google drive ou em sites google?
    Desde já agradeço.

    ResponderExcluir
    Respostas
    1. Até onde eu sei, realmente não é possível. Mas com o comentário publicado pode ser que alguém possa ajudar.

      Excluir
  31. Olá, gostaria que me desses um link se páginas que explicam como personalizar a tag de audio.

    ResponderExcluir
  32. oi Helen
    Queria saber se é possivel mudar a cor desse player e dimuir o tamanho dele tambem

    obrigado

    ResponderExcluir
    Respostas
    1. Jeito tem, mas nunca fiz. O link do post em inglês que ensina está no comentário acima.

      Excluir
  33. fiz um com strean de radios online mas é um codigo diferente
    só 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

    ResponderExcluir
  34. 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?

    Obrigado!

    ResponderExcluir
    Respostas
    1. Não posso ajudar. Isso significa que os navegadores não estão totalmente compatíveis com essa opção. Boa sorte!

      Excluir
  35. oq seria "host de site" ?
    estou hospedando minhas musicas no Ziddu

    ResponderExcluir
    Respostas
    1. Host é hospedagem. Com o Ziddu e outros sites de sharing e download não funciona, como já disse acima.

      No post Alternativas de hospedagem ao Geocities você encontra algumas opções.

      Excluir
  36. obrigado... vou tentar outros aqui então :)

    ResponderExcluir

Posts relacionados