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.
muteddetermina que o áudio esteja mutado
loopdetermina que o áudio seja reproduzido em loop
autoplaydetermina 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/