HTML - Áudio

  »   HTML  »   HTML Tutorial - Inserindo sons e músicas em sua página HTML

Algum tempo atrás era bastante complicado inserir músicas e sons em uma página da web. Hoje esse problema foi resolvido e adicionar sons se tornou bastante simples.

html<embed height="60" type="audio/midi" width="144" src="audio.mp3" volume="60" loop="false" autostart="false" />

É recomendado que tanto o peso quanto o tamanho sejam proporcionais para evitar problemas.

àra esconder o valor do plazer existem atributos de esconder (o que é falso no momento) que serão substituídos por verdadeiros. Isso é feito se você tiver total certeza de que os usuários não irão querer interromper o som.

Controlando e manipulando o player de áudio

Observe o exemplo:

html<embed height="60" type="audio/midi" width="144" src="audio.mp3" volume="60" loop="false" autostart="false" />
  • autostart - define se o som começará imediatamente, assim que a página abrir. Você pode ter um valor de verdadeiro ou falso aqui.
  • loop - define se o áudio será tocado novamente para sempre. Você pode ter uma valor de verdadeiro ou falso aqui.
  • volume - pode ter qualquer valor de 1 a 100.

Você pode brincar um pouco com esses atributos para melhor memorizá-los e entendê-los, e ficar atento de que um volume maior pode ser chato para os usuários.

HTML 5 Tag de Áudio

Com a introdução de HTML5 tags de áudio se espalharam rapidamente e são suportadas pelos navegadores atuais. Tags de áudio são usadas para adicionar sons e música na página HTML. No momento a tag audio suporta três tipos de arquivos de áudio:

  • mp3 - MIME-type audio/mpeg
  • wav - MIME-type audio/wav
  • ogg - MIME-type audio/ogg
html<audio controls>
	<source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.mp3" type="audio/mpeg">
	<source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.ogg" type="audio/ogg">
	Seu navegador não suporta áudio tag.
</audio>

Demo

BrowserMP3WavOgg
Internet Explorer
Chrome
Firefox
Safari
Opera

Aqui você ode achar um gerador simples e poderoso audio html5 tag