Como Inserir Som em HTML
Daniel Nogueira

Daniel Nogueira @udanielnogueira

About: ✦ Front-End Developer and UI Designer

Location:
Rio de Janeiro, Brazil
Joined:
Oct 7, 2022

Como Inserir Som em HTML

Publish Date: Dec 15 '24
3 0

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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:

Documento HTML com áudio inserido

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>
Enter fullscreen mode Exit fullscreen mode

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/

Comments 0 total

    Add comment