Antes do HTML 5, só era possível colocar áudio no site através do Flash Player e outros plugins. Se você não quer ficar dependente desses plugins, use a tag “<audio>″ do HTML 5.

Ex: <audio id="audiodeentrada" src="http://html5.x4ids.com.br/wp-content/uploads/musica/Prologue.mp3" controls autobuffer></audio>

src: indica o endereço ou URL do arquivo de áudio
loop: determina se o áudio irá tocar repetidamente
controls: mostra os controles de áudio (botão play/pause e indicador de tempo decorrido do áudio)
autoplay: determina se o áudio começará a tocar assim que o site for acessado
autobuffer: determina se o áudio irá ser carregado em plano de fundo assim que o site for acessado

Os atributos “loop”, “controls”, “autoplay” e “autobuffer” são booleanos, ou seja, basta escrever dentro da tag “<audio>″ se você quiser umas de suas funções. No exemplo acima se eu quisesse que ela tocasse repetidamente, bastava escrever “loop” dentro da tag “<audio>″.

Os atributos “autoplay” e “autobuffer” não podem ficar na mesma tag (ou o áudio carrega em plano de fundo ou ele é tocado imediatamente)

Veja abaixo os navegadores que aceitam os seguintes formatos de áudio:

OGG ->
MP3 ->

Você ainda pode estilizar os controles de áudio dentro da própria tag <audio>, colocando códigos de CSS como desejar.

Veja abaixo um exemplo de áudio no formato mp3 e OGG em HTML5 estilizado:

MP3

OGG

Uma vez que nem todos os navegadores aceitam a tag de áudio, surge um problema: como um desenvolvedor pode fazer um site com essas tags html5 que atenda a todos usuários possíveis de quaisquer navegadores?

O atributo “source” veio para resolver esse problema. Com ele, você pode permitir que mais usuários possam acessar o seu conteúdo. Veja o exemplo abaixo, seguido por seu código fonte:

Faça o download, caso não abra no seu navegador.

Vamos entender o código acima. Caso o usuário esteja visualizando em um navegador que não suporte o formato mp3, Será fornecido a ele o formato ogg. Caso ele esteja visualizando em um navegador que não suporte os dois citados acima (no caso o por exemplo), será fornecido ao usuário a opção de fazer o download da música.

Outro aspecto importante é aumentar a velocidade de carregamento dos seus arquivos de áudio e de vídeo. Para isso, vamos aprender como usar dois atributos: <type> e <codecs>. Vamos ver dois exemplos abaixo, com seus respectivos códigos-fonte:

<type>: indica qual o formato de áudio.
<codecs>: indica qual o codec que o seu navegador irá carregar para poder rodar o arquivo de mídia.

É muito importante acrescentar essas informações, pois vai evitar que o navegador baixe o arquivo para, depois, descobrir que não consegue tocá-lo. Além disso, irá contribuir para que seu navegador identifique o tipo do arquivo de arquivo mais rapidamente, e assim, carregá-lo com menor tempo.