Áudios nativos com a tag audio

Assim como a tag <video> trouxe reprodução de vídeo nativa ao HTML5, a tag <audio> trouxe reprodução de áudio diretamente no navegador — sem plugins, sem dependências externas e com suporte completo a CSS e JavaScript.

De podcasts a efeitos sonoros, de músicas a narrações de conteúdo, a tag <audio> cobre todos esses casos de uso com uma API simples e poderosa.

Anatomia básica da tag audio

<audio src="podcast.mp3" controls>
  Seu navegador não suporta reprodução de áudio.
</audio>

Assim como <video>, a tag <audio> tem abertura e fechamento — o conteúdo entre as tags é o texto de fallback para navegadores que não a suportam.

O resultado visual padrão é um player compacto com controles nativos do navegador.

A diferença visual entre audio e video

Sem o atributo controls, a tag <audio> fica completamente invisível na página — diferente do <video>, que mantém uma área visual.

O atributo controls

<!-- ✅ Com controles — o usuário pode interagir -->
<audio src="musica.mp3" controls></audio>

<!-- ❌ Sem controles — invisível e sem como interagir -->
<audio src="musica.mp3"></audio>

O atributo controls é booleano — sua presença já ativa a interface nativa do navegador com play/pause, barra de progresso, controle de volume e velocidade de reprodução.

⚠️ Assim como no <video>, nunca omita controls em áudios de conteúdo. Sem ele, o elemento fica invisível na página e o usuário não tem como interagir com o áudio.

Múltiplas fontes com a tag source

Diferentes navegadores suportam diferentes formatos de áudio. Para garantir compatibilidade, forneça múltiplas fontes com a tag <source>:

<audio controls>
  <source src="podcast.ogg"  type="audio/ogg">
  <source src="podcast.mp3"  type="audio/mpeg">
  <source src="podcast.wav"  type="audio/wav">
  Seu navegador não suporta reprodução de áudio.
  <a href="podcast.mp3">Baixar o episódio (MP3)</a>.
</audio>

Formatos de áudio para a web

Estratégia de formatos recomendada

<audio controls>
  <!-- Opus: melhor qualidade/tamanho — para modernos -->
  <source src="episodio.opus" type="audio/ogg; codecs=opus">

  <!-- OGG Vorbis: boa qualidade — Firefox e Chrome -->
  <source src="episodio.ogg"  type="audio/ogg">

  <!-- MP3: compatibilidade universal — fallback -->
  <source src="episodio.mp3"  type="audio/mpeg">

  Seu navegador não suporta áudio HTML5.
  <a href="episodio.mp3" download>Baixar episódio (MP3)</a>.
</audio>

Atributos de comportamento

autoplay: reprodução automática

<audio src="audio.mp3" autoplay controls></audio>

Assim como no <video>, a maioria dos navegadores modernos bloqueia autoplay com som por padrão. Diferente de vídeos de fundo, não existe um uso legítimo comum de autoplay sem muted para áudio — pois áudio mudo não faz sentido na maioria dos contextos.

Use autoplay com extrema cautela e apenas quando o contexto justifica claramente — como em um aplicativo de rádio onde o usuário ativou explicitamente a reprodução.

loop: repetição automática

<audio src="musica-fundo.mp3" loop autoplay controls></audio>

Reinicia o áudio automaticamente ao terminar. Útil para músicas de fundo em aplicações ou jogos.

muted: iniciar sem som

<audio src="audio.mp3" muted controls></audio>

Inicia o elemento com volume zero. O usuário pode desmutar manualmente pelos controles. Menos comum em <audio> do que em <video>.

preload: dica de carregamento

<!-- Não pré-carrega nada — ideal para listas longas -->
<audio src="episodio-1.mp3" controls preload="none"></audio>

<!-- Carrega apenas metadados (duração, codec) -->
<audio src="episodio-2.mp3" controls preload="metadata"></audio>

<!-- Navegador decide o quanto carregar (padrão) -->
<audio src="episodio-3.mp3" controls preload="auto"></audio>

audio vs. video: quando usar cada um

Uma dúvida comum: devo usar <audio> ou <video> para conteúdo apenas de áudio?

<!-- ✅ Use <audio> para conteúdo de áudio puro -->
<audio controls>
  <source src="podcast.ogg" type="audio/ogg">
  <source src="podcast.mp3" type="audio/mpeg">
</audio>

<!-- ⚠️ Evite usar <video> para áudio puro -->
<video controls>
  <source src="podcast.mp4" type="video/mp4">
</video>

Use <audio> quando o conteúdo é puramente sonoro — podcasts, músicas, narrações, efeitos. Use <video> apenas quando há conteúdo visual junto ao áudio.

Casos de uso práticos

Player de podcast

<article>
  <h2>Episódio 42: O futuro do HTML</h2>
  <p>Duração: 38 minutos</p>

  <audio controls preload="metadata">
    <source src="ep42.ogg" type="audio/ogg">
    <source src="ep42.mp3" type="audio/mpeg">
    <p>
      Seu navegador não suporta reprodução de áudio.
      <a href="ep42.mp3" download="episodio-42-html.mp3">
        Baixar episódio (MP3)
      </a>.
    </p>
  </audio>

</article>

Player de música com figura e legenda

<figure>

  <figcaption>
    <strong>Aquarela</strong>
    <span>— Toquinho</span>
  </figcaption>

  <audio controls preload="metadata">
    <source src="aquarela.ogg" type="audio/ogg">
    <source src="aquarela.mp3" type="audio/mpeg">
    Seu navegador não suporta reprodução de áudio.
  </audio>

</figure>

Lista de episódios com preload none

Para uma lista longa de episódios, preload="none" evita o carregamento desnecessário de todos os arquivos:

<section>
  <h2>Todos os episódios</h2>

  <article>
    <h3>Ep. 01 — Introdução ao HTML</h3>
    <audio controls preload="none">
      <source src="ep01.ogg" type="audio/ogg">
      <source src="ep01.mp3" type="audio/mpeg">
    </audio>
  </article>

  <article>
    <h3>Ep. 02 — A tag head</h3>
    <audio controls preload="none">
      <source src="ep02.ogg" type="audio/ogg">
      <source src="ep02.mp3" type="audio/mpeg">
    </audio>
  </article>

  <article>
    <h3>Ep. 03 — Estrutura semântica</h3>
    <audio controls preload="none">
      <source src="ep03.ogg" type="audio/ogg">
      <source src="ep03.mp3" type="audio/mpeg">
    </audio>
  </article>

</section>

Efeito sonoro em um jogo ou aplicação

Para efeitos sonoros que são disparados por JavaScript e não precisam de interface visual:

<!-- Sem controls — disparado por JavaScript -->
<audio id="som-acerto" preload="auto">
  <source src="sons/acerto.ogg" type="audio/ogg">
  <source src="sons/acerto.mp3" type="audio/mpeg">
</audio>

<audio id="som-erro" preload="auto">
  <source src="sons/erro.ogg"   type="audio/ogg">
  <source src="sons/erro.mp3"   type="audio/mpeg">
</audio>

💡 Esse é um dos raros casos em que omitir controls é justificado: efeitos sonoros disparados programaticamente não precisam de interface visual. O preload="auto" garante que os sons estejam prontos para tocar instantaneamente quando acionados.

Acessibilidade em áudios

Forneça transcrição do conteúdo

Diferente do vídeo, a tag <audio> não suporta a tag <track> para legendas. A alternativa acessível é fornecer uma transcrição em texto do conteúdo:

<article>

  <h2>Episódio 42: O futuro do HTML</h2>

  <audio controls preload="metadata">
    <source src="ep42.ogg" type="audio/ogg">
    <source src="ep42.mp3" type="audio/mpeg">
  </audio>

  <!-- Transcrição acessível -->
  <details>
    <summary>Ler transcrição do episódio</summary>
    <div>
      <p>
        <strong>[00:00]</strong> Olá, bem-vindos ao episódio 42
        do nosso podcast sobre desenvolvimento web...
      </p>
      <p>
        <strong>[01:30]</strong> Hoje vamos falar sobre as novidades
        do HTML Living Standard...
      </p>
      <!-- ... resto da transcrição ... -->
    </div>
  </details>

</article>

💡 O elemento <details> com <summary> cria um componente colapsável nativo — o usuário pode expandir e ler a transcrição sem que ela polua visualmente a página inteira.

Identifique o conteúdo do áudio

Sempre contextualize o <audio> com um título ou descrição próximos — leitores de tela anunciam a presença de um elemento de áudio, mas não seu conteúdo:

<!-- ❌ Sem contexto -->
<audio controls>
  <source src="narração.mp3" type="audio/mpeg">
</audio>

<!-- ✅ Com contexto claro -->
<section>
  <h2>Narração do capítulo 1</h2>
  <p>Ouça a narração completa do primeiro capítulo:</p>
  <audio controls preload="metadata">
    <source src="narracao-cap1.ogg" type="audio/ogg">
    <source src="narracao-cap1.mp3" type="audio/mpeg">
    <a href="narracao-cap1.mp3" download>
      Baixar narração (MP3)
    </a>
  </audio>
</section>

Comparação: audio e video

Resumindo

Boas práticas:

• Sempre use controls em áudios de conteúdo
• Forneça múltiplos formatos com <source>: Opus ou OGG primeiro, MP3 como fallback
• Forneça transcrição em texto para acessibilidade
• Use preload="none" em listas longas de áudio
• Use preload="auto" apenas em efeitos sonoros que precisam tocar instantaneamente
• Contextualize sempre o <audio> com título e descrição próximos
• Inclua link de download como fallback dentro da tag