Tag <audio>

Código:

<audio controls="controls" loop preload="preload title="Abaçaiado - O Teatro Mágico"> <source type="audio/ogg" src="https://meuted.io/music/Abacaiado.ogg" /> <source type="audio/mpeg" src="https://meuted.io/music/Abacaiado.mp3" /> <a href="https://meuted.io/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://https://meuted.io/music/Quermesse.mp3" controls="controls" loop preload="preload" title="Quermesse - O Teatro Mágico"> <a href="https://meuted.io/music/Quermesse.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:

► Autoplay e 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:

Se você quer que o áudio toque automaticamente ao abrir a página, use autoplay="autoplay":

<audio controls="controls" autoplay="autoplay" preload='preload'>

Veja um exemplo de autoplay clicando aqui.

Outro exemplo com loop:

► 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 é muito adequado para a web, por ser muito pesado e, consequentemente, ter carregamento lento.