Player de áudio com HTML 5

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 dedownload 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://htmhelen.webcindario.com/music/Abacaiado.ogg" /> <source type="audio/mpeg" src="http://htmhelen.webcindario.com/music/Abacaiado.mp3" /> <a href="http://htmhelen.webcindario.com/music/Abacaiado.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 para baixar ouvir a música no Yahoo! Web Player em formato mp3.

► 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://htmhelen.webcindario.com/music/Quermesse.mp3" controls="controls" loop preload="preload" title="Quermesse - O Teatro Mágico"><a href="http://htmhelen.webcindario.com/music/Quermesse.mp3">Quermesse - O Teatro Mágico.mp3</a>

</audio>

Resultado em formato ogg (não vai funcionar no Internet Explorer nem no Safari):

Resultado em formato mp3 (não vai funcionar no Firefox nem no Opera):

► Tabela de extensões

Saiba quais formatos funcionam em cada navegador:

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

*Apesar de ser compatível com quase todos os navegadores, o formato wav não é muito adequado para a web, por ser muito pesado e, consequentemente, ter carregamento lento.