Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601

Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601
Como colocar audio no HTML 5

Colocando áudio no HTML 5

Antes do HTML 5, só era possível colocar áudio no site através do Flash Player e outros plugins. Se você não quer ficar dependente desses plugins, use a tag “&#60audio&#62” do HTML 5.

Atualizado em 03/10/2011

src: indica o endereço ou URL do arquivo de áudio
loop: determina se o áudio irá tocar repetidamente
controls: mostra os controles de áudio (botão play/pause e indicador de tempo decorrido do áudio)
autoplay: determina se o áudio começará a tocar assim que o site for acessado
autobuffer: determina se o áudio irá ser carregado em plano de fundo assim que o site for acessado

Os atributos “loop”, “controls”, “autoplay” e “autobuffer” são booleanos, ou seja, basta escrever dentro da tag “&#60audio&#62” se você quiser umas de suas funções. No exemplo acima se eu quisesse que ela tocasse repetidamente, bastava escrever “loop” dentro da tag “&#60audio&#62”.

Os atributos “autoplay” e “autobuffer” não podem ficar na mesma tag (ou o áudio carrega em plano de fundo ou ele é tocado imediatamente)

Veja abaixo os navegadores que aceitam os seguintes formatos de áudio:

OGG ->
MP3 ->

Você ainda pode estilizar os controles de áudio dentro da própria tag <audio>, colocando códigos de CSS como desejar.

Veja abaixo um exemplo de áudio no formato mp3 e OGG em HTML5 estilizado:

MP3

OGG

Boa sorte!

Confira aqui o Tutorial Completo HTML5 2012

Author Description

dukountra

There are 6 comments. Add yours

  1. 30th maio 2011 | João Paulo Polles says: Responder
    Oi, queria saber se tem jeito de por ip, para radio online por exemplo
    • 19th junho 2011 | @dukountra says: Responder
      Oi João Paulo. Não entendi sua dúvida. O que exatamente vc quer fazer?
      • 11th novembro 2014 | Marcos says: Responder
        Ola Luiz, Gostaria de falar com vc sobre video + audio no html5, jhp e mysql. Como posso te contatar, qual é seu e-mail ?
  2. 8th agosto 2011 | Públio Andrade says: Responder
    Quero saber se é possível com o html5, colocar som de fundo como no site nyan.cat (toca em todos os navegadores sem pedir instalação de plugins e etc.)
  3. 21st setembro 2011 | @dukountra says: Responder
    Oi Públio Andrade, Ainda não é possível, visto que nem todos os navegadores aderiram ainda ao HTML5. Caso vc queira fazer em html, é só vc não colocar o atributo "controls" e colocar os atributos "loop" e "autoplay".
  4. 17th dezembro 2011 | JS says: Responder
    Excelente blog. Dicas muito boas. Parabéns! Acredito que o @João Paulo Polles se refere ao live streaming (RTMP).

Join the Conversation