HTML5 Audio Player - Dica

Veja nessa dica como criar e inserir um player de áudio com html5 em seu website/sistema web.

Assim como funciona com vídeos, a nova versão do html, o html5 permite que os usuários insiram arquivos de áudio para serem reproduzidos diretamente no browser, sem o uso de nenhum plugin ou hack, apenas usando a nova tag <audio>.

A sua sintaxe é bem simples e é necessário apenas saber o caminho dentro do sistema local/ftp ou a url do arquivo de áudio específico, veja um exemplo de uso na Listagem 1.

Listagem 1: Usando a tag Audio no HTML5

<!DOCTYPE html> <html> <head> <title>Tag Audio HTML5</title> </head> <body> <audio controls> <source src="ArquivoDeAudio.ogg" type="audio/ogg"> <source src="ArquivoDeAudio.mp3" type="audio/mpeg"> Seu navegador não suporta a tag áudio </audio> </body> </html>

Quando usamos a palavra “controls” dentro da tag áudio, o navegador do usuário insere os controles de áudio, como o botão play, pause e volume. Inserimos também, dentro da tag, um texto para se caso o navegador do usuário não suportar a tag, irá aparecer essa mensagem para ele, dizendo que o browser dele não suporta.

Abaixo segue uma tabela de compatibilidade dos navegadores com os tipos de arquivos de áudio suportados por eles.

Browser MP3 Wav Ogg
Internet Explorer 9+ SIM NÃO NÃO
Chrome 6+ SIM SIM SIM
Firefox 3.6+ NÃO SIM SIM
Safari 5+ SIM SIM NÃO
Opera 10+ NÃO SIM SIM

O mime-type para cada tipo de arquivo de áudio é:

Existem também outras formas de incrementar ainda mais o seu arquivo de áudio, é possível usar atributos como:

Seu uso fica da seguinte forma:

Listagem 2: Adicionando atributos

<!DOCTYPE html> <html> <head> <title>Tag Audio HTML5</title> </head> <body> <audio controls autoplay loop> <source src="ArquivoDeAudio.ogg" type="audio/ogg"> <source src="ArquivoDeAudio.mp3" type="audio/mpeg"> Seu navegador não suporta a tag áudio </audio> </body> </html>

Em casos de o arquivo de áudio ser um arquivo muito grande, é importante que ele seja pré-carregado, dessa forma quando o usuário clicar no “Play” a exibição do arquivo será muito mais rápida, para isso existe o atributo preload, esse atributo possui 3 valores:

Listagem 3: Usando o atributo preload

<!DOCTYPE html> <html> <head> <title>Tag Audio HTML5</title> </head> <body> <audio preload="auto" controls> <source src="ArquivoDeAudio.ogg" type="audio/ogg"> <source src="ArquivoDeAudio.mp3" type="audio/mpeg"> Seu navegador não suporta a tag áudio </audio> </body> </html>

Esses foram alguns exemplos de uso da tag áudio em html5, espero que tenha ficado claro e que todos tenham entendido o funcionamento dessa nova tag.

Até a próxima.

Veja também

Artigos relacionados