Como Adicionar Sons em HTML

Para adicionar sons em um documento HTML usamos a tag <audio>, primeiro criamos a tag de <audio> com o atributo controls para exibir um controle de reprodução do áudio em questão.

<audio controls>

</audio>

Em seguida, adicionamos a tag <source> com o caminho do arquivo de áudio.

Um detalhe interessante, também podemos adicionar mais de um arquivo com uma extensão diferente como medida de segurança, o HTML irá considerar o primeiro arquivo suportado.

Nesse caso, iremos adicionar um arquivo de extensão .wav, caso o arquivo não seja suportado ou apresente algum problema, o HTML irá considerar o próximo arquivo .mp3.

<audio controls>
  <source src="./audio/sound-effect.wav" type="audio/wav" />
  <source src="./audio/sound-effect.mp3" type="audio/mp3" />
</audio>

Os arquivos de áudio suportados pelo navegador são:

• MP3
• WAV
• OGG

Também usamos o atributo type na tag <source> para informar ao navegador o tipo de arquivo que está sendo usado, é uma boa forma de manter o HTML semântico.

Esse será o resultado:

Atributos da Tag de Áudio

Além do atributo controls, podemos incluir outros atributos na tag <audio>, a maioria deles são atributos que não precisam receber valor, inclusive.

• muted determina que o áudio esteja mutado
• loop determina que o áudio seja reproduzido em loop
• autoplay determina que o áudio seja reproduzido automaticamente

<audio controls autoplay loop>
  <source src="./audio/sound-effect.wav" type="audio/wav" />
  <source src="./audio/sound-effect.mp3" type="audio/mp3" />
</audio>

No caso do código acima, assim que a página carregar, o áudio será reproduzido automaticamente por causa do atributo autoplay e continuará sendo reproduzido por causa do atributo loop.

Esse artigo abordou

• Tag audio
• Tag source
• Atributos da tag audio

Autor

Daniel Nogueira
https://www.linkedin.com/in/udanielnogueira/