Como Adicionar Sons em HTML

Nesse artigo vamos aprender qual tag usamos para criar um elemento de som em HTML, bem como conhecer os atributos que irão definir como o áudio irá se comportar.

Indo direto ao ponto, para adicionar sons em um documento HTML é necessário usar a tag <audio>. Primeiro criamos a tag de <audio> e depois adicionamos o atributo controls para exibir um controle de reproduçã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.

Por fim, caso nenhum dos arquivos sejam suportados no navegador, podemos exibir uma mensagem de texto informado ao usuário o motivo do erro.

<audio controls>
  <source src="./audio/sound-effect.wav" type="audio/wav" />
  <source src="./audio/sound-effect.mp3" type="audio/mp3" />
  O seu navegador não suporta a tag de áudio.
</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" />
  O seu navegador não suporta a tag de áudio.
</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/