Busca

Carregando...

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!

Posts relacionados