DEV Community

Cover image for Como Inserir Som em HTML
Daniel Nogueira
Daniel Nogueira

Posted on • Edited on

Como Inserir Som 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>
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/

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay