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 é:
- audio/mpeg
- audio/ogg
- audio/wav
Existem também outras formas de incrementar ainda mais o seu arquivo de áudio, é possível usar atributos como:
- controls
- autoplay
- loop
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:
- none: não carrega o arquivo
- auto: carrega o arquivo
- metadata: carrega os meta dados do arquivo
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.
