Adicionar áudio a uma página da web com HTML é bastante fácil. Qualquer pessoa com conhecimentos básicos de HTML pode fazê-lo. O segredo é entender como a tag

Dito isso, a qualidade do áudio é tão importante quanto a funcionalidade. Se você estiver adicionando gravações de voz, usar um microfone de qualidade pode fazer uma grande diferença. Algo como o Hollyland LARK A1 funciona muito bem. Ele oferece um desempenho forte, com recursos como Proteção Automática contra Clipping, alcance sem fio de 198 metros e 3 níveis de Cancelamento Inteligente de Ruído.

Hollyland LARK A1 - Affordable Wireless Microphone

A perfect starter mic for creators on a budget. It’s simple to use and features effective noise cancellation.

Key Features: 48kHz/24-bit | 3-Level Noise Cancellation | 54-Hour Battery

Check on Amazon

Como funciona a tag de áudio HTML

Você pode reproduzir som em uma página da web usando a tag

Coloque a tag source dentro da tag audio para vincular seu arquivo. Isso informa ao navegador qual áudio carregar e qual formato esperar. Se um navegador não suportar a tag de áudio, você pode exibir uma mensagem curta. Dessa forma, os usuários saberão que o recurso de som não está funcionando para eles.

Existem também alguns atributos extras:

• autoplay: Inicia o áudio quando a página carrega.
• muted: Deixa o áudio silencioso por padrão.
• loop: Repete o áudio várias vezes.

O HTML suporta estes três formatos de áudio:

• MP3 (melhor suporte entre os navegadores)
• WAV
• OGG

MP3 é a escolha mais segura, pois funciona em quase todos os lugares.

Como adicionar áudio em HTML: instruções passo a passo

Siga estas etapas para adicionar áudio à sua página HTML:

1. Prepare seu arquivo de áudio

• Use MP3 para obter os melhores resultados em todos os navegadores.
• Coloque o arquivo de áudio na mesma pasta que seu arquivo HTML.

• Você pode obter música gratuita na Biblioteca de Áudio do YouTube.

Você também pode baixar faixas de qualquer site livre de royalties.

2. Crie a estrutura HTML

• Abra seu arquivo HTML.
• Dentro do , adicione uma tag

<audio></audio>

• Salve o arquivo HTML e atualize o navegador.

3. Adicione controles ao player de áudio

• Dentro da tag

<audio controls></audio>

• Salve e atualize a página.
• Você deve ver um player de áudio na página do navegador.

No entanto, neste momento, a barra deve estar acinzentada, indicando que precisamos adicionar mais atributos e tags.

4. Vincule o arquivo de áudio

• Entre as tags de áudio de abertura e fechamento, insira uma tag.
• Use o atributo ‘src’ para apontar para o nome do arquivo de áudio.

<audio controls>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

• Salve e atualize. Os controles de áudio agora devem estar ativos.

5. Adicione uma mensagem de fallback

• Caso o navegador não suporte áudio, escreva uma mensagem simples.

<audio controls>

  <source src="bro_time.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

6. Use um caminho de arquivo (se o áudio estiver em uma pasta diferente)

• Se o arquivo de áudio não estiver na mesma pasta, inclua o caminho completo.

<source src="C:/Users/YourName/Desktop/bro_time.mp3" type="audio/mpeg">

7. Repita o áudio

• Para repetir o áudio continuamente, adicione ‘loop’ à tag de áudio.

<audio controls loop>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

8. Inicie o áudio mudo

• Para reproduzir o áudio silenciosamente por padrão, use muted.

<audio controls muted>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

9. Reproduza o áudio automaticamente

• Adicione autoplay para iniciar o áudio automaticamente.

<audio controls autoplay>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

Importante: A reprodução automática não funciona bem em navegadores modernos, especialmente no Chrome e em dispositivos móveis. Além disso, muitos especialistas não recomendam a tag de áudio com reprodução automática, pois pode violar a privacidade dos usuários.

10. Oculte os controles para áudio de fundo

• Remova o atributo controls para reproduzir música de fundo sem player visível.

<audio autoplay>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

• Use isso com sabedoria. Áudio oculto com reprodução automática pode incomodar os usuários.

Caso de uso: criando uma página da web com vários arquivos de áudio

Quer tentar um exemplo real? Vamos fazer uma página de música básica. Este pode ser um projeto divertido. Tudo o que você precisa são alguns arquivos de áudio e um arquivo HTML básico.

Siga estas etapas para construí-lo:

Prepare seus arquivos de áudio

• Escolha pelo menos quatro músicas ou clipes de som em MP3
• Nomeie-os claramente como bro_time.mp3, block_party.mp3
• Coloque todos os arquivos de áudio na mesma pasta que seu arquivo HTML

Inicie um novo documento HTML

• Abra qualquer editor de texto como Bloco de Notas ou VS Code
• Crie um arquivo .html em branco
• Salve-o na mesma pasta que seus arquivos de áudio

Configure o título da página

• Dentro da seção , adicione um cabeçalho principal

MeTunes

Adicione a primeira faixa de áudio

• Digite o nome da música usando uma tag

• Adicione um player de áudio abaixo com o arquivo de origem

<h3>Bro Time</h3>

<audio controls>

  <source src="bro_time.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

Repita para mais músicas

• Copie e cole a mesma estrutura
• Altere o cabeçalho e o nome do arquivo de origem

<h3>Block Party</h3>

<audio controls>

  <source src="block_party.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<h3>City Night Lights</h3>

<audio controls>

  <source src="city_night_lights.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<h3>Beat Your Competition</h3>

<audio controls>

  <source src="beat_your_competition.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

Adicione espaço entre cada faixa

• Use tags
  para adicionar espaçamento extra
• Isso mantém a página limpa e fácil de ler

Teste em um navegador

• Clique duas vezes em seu arquivo HTML para abri-lo
• Certifique-se de que todas as músicas estejam funcionando corretamente
• Se algo não tocar, verifique os nomes dos arquivos e caminhos

Agora você tem uma página de música funcional usando HTML básico. Cada arquivo de áudio mostra seu próprio player, e tudo toca bem.

DICA: Aqui está o código completo deste projeto. Simplesmente copie e cole. Altere os caminhos dos arquivos e os nomes das músicas para praticar a adição de suas músicas favoritas a um site HTML.

<!DOCTYPE html>

<html>

  <head>

  <title>MY PRACTICE AUDIO HTML SITE</title>

</head>

  <body>

    <h1>SongSite</h1>

    <br>

Song One:

    <br>

<audio controls>

  <source src="song_one.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<br>

Song Two:

    <br>

<audio controls>

  <source src="song_two.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

    <br>

  Song Three:

    <br>

<audio controls>

  <source src="song_three.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<br>

    Song Four:

    <br>

<audio controls>

  <source src="song_four.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

    <br>

  </body>

</html>

Se você fez corretamente, a página HTML deve aparecer semelhante a isto:

Conclusão

Quando você entende o básico da tag de áudio, inserir música em uma página HTML se torna muito fácil. Este artigo mostra cada etapa essencial que permite adicionar uma faixa de áudio ao HTML.

No entanto, é importante que você use os atributos corretos para garantir a privacidade do usuário. Da mesma forma, sempre recomendamos o uso de música gratuita ou licenciada para evitar violações de direitos autorais.

Perguntas Frequentes

1. Como tornar o player de áudio invisível em HTML?

Para manter o player de áudio oculto, omita a palavra controls na tag. Quando alguém visita sua página, o áudio é reproduzido sem mostrar nada. Se você também usar autoplay, ele começa imediatamente. Apenas tenha cuidado. Alguns navegadores podem bloquear o som se não houver controles.

2. O que as tags de áudio e vídeo fazem em HTML?

As tags de áudio e vídeo permitem adicionar som ou vídeo. Você pode colocar música ou clipes diretamente em sua página. Essas tags fazem parte do HTML5 e funcionam na maioria dos navegadores atualmente. Adicione-as dentro da seção body para mostrar players na tela. Elas também suportam diferentes tipos de arquivo, dependendo do navegador.

3. As pessoas ainda usam HTML para sites modernos?

Sim, o HTML ainda é usado para construir todos os sites online. Mesmo páginas avançadas precisam de HTML para estrutura e layout. Ele ajuda com SEO, velocidade de carregamento e design de página. Seja uma página pequena ou complexa, o HTML ainda é importante. Sem ele, nenhum site carregaria corretamente em qualquer navegador.