Tag HTML <audio>

A tag <audio> é um dos elementos HTML5 adicionados para permitir a incorporação de arquivos de áudio em uma página web. Ela reproduz músicas, podcasts, efeitos sonoros e qualquer outro stream de áudio com o player nativo do navegador, dispensando plugins Flash ou widgets de terceiros.

Esta página aborda como incorporar áudio, quais formatos de arquivo os navegadores suportam, os atributos que controlam a reprodução (controls, autoplay, loop, muted, preload), a política de autoplay que confunde quase todo mundo, e como tornar o áudio acessível.

A tag <source> ou o atributo src aponta para o arquivo de áudio. O caminho pode ser uma URL absoluta ou relativa. Para vídeo, a tag intimamente relacionada <video> funciona da mesma forma.

Sintaxe

A tag <audio> vem em pares. Você pode definir o arquivo diretamente com src, ou aninhar um ou mais elementos <source> entre as tags de abertura (<audio>) e fechamento (</audio>) para que o navegador possa escolher um formato compatível.

<audio>
  <source src="URL" type="MIME-type">
  <source src="URL" type="MIME-type">
</audio>

Exemplo da tag HTML `<audio>`

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls>
      <source src="/build/audios/jingle_bells.ogg" type="audio/ogg" />
      <source src="/build/audios/audio.mp3" type="audio/mpeg" />
    </audio>
    <p>Click the play button</p>
  </body>
</html>

Experimente Você Mesmo »

Formatos de áudio suportados

Nem todo navegador consegue decodificar todos os codecs, por isso o áudio HTML possui três formatos relevantes na prática. A tabela abaixo mostra a extensão do arquivo, o tipo MIME a ser usado em type="" e o suporte geral:

Formato	Tipo MIME	Suporte
MP3	`audio/mpeg`	Suportado por todos os navegadores modernos. O padrão mais seguro.
WAV	`audio/wav`	Suportado em todos os lugares, mas os arquivos são não comprimidos e grandes.
OGG (Vorbis)	`audio/ogg`	Chrome, Firefox, Edge, Opera. Não funciona no Safari.
WebM	`audio/webm`	Chrome, Firefox, Edge, Opera. Não funciona no Safari.

Como o MP3 funciona em todos os lugares, um único <source src="audio.mp3" type="audio/mpeg"> geralmente é suficiente. Formatos adicionais são necessários apenas se você quiser uma alternativa livre de royalties (OGG/WebM) ou a maior qualidade possível (WAV).

Como o navegador escolhe um `<source>`

Quando você aninha vários elementos <source>, o navegador os percorre de cima para baixo e reproduz o primeiro que consegue decodificar — os demais são ignorados. Liste primeiro o formato preferido ou mais eficiente. O atributo type permite que o navegador ignore formatos incompatíveis sem precisar baixá-los, por isso é uma boa prática sempre incluí-lo.

<audio controls>
  <source src="audio.webm" type="audio/webm"> <!-- tried first -->
  <source src="audio.ogg"  type="audio/ogg">  <!-- fallback -->
  <source src="audio.mp3"  type="audio/mpeg"> <!-- universal fallback -->
</audio>

O atributo controls

Sem controls, o elemento de áudio não renderiza nada visível e o usuário não tem como iniciá-lo. O atributo controls instrui o navegador a exibir a interface do player nativo (play/pause, linha do tempo, volume):

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

Exemplo da tag HTML `<audio>` com o atributo controls

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls src="/build/audios/audio.mp3">
      Your browser does not support the audio element.
    </audio>
    <p>Click the play button</p>
  </body>
</html>

Experimente Você Mesmo »

O atributo loop

loop é um atributo boolean. Quando presente, o clipe reinicia do início toda vez que termina — útil para ambientação de fundo ou um efeito sonoro em loop:

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

Autoplay e o atributo muted

Esta é a fonte de confusão mais comum com o áudio HTML, então leia com atenção.

O atributo autoplay solicita ao navegador que inicie a reprodução assim que a mídia estiver pronta, sem que o usuário precise pressionar play:

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

Na prática, os navegadores modernos bloqueiam o autoplay com som. Chrome, Safari e Firefox se recusam a reproduzir automaticamente mídia audível até que o usuário tenha interagido com a página (um clique, um toque, uma tecla pressionada). Isso protege as pessoas de páginas que reproduzem som inesperadamente. Se você definir autoplay em um clipe audível, ele geralmente ficará em silêncio e pausado.

A única forma confiável de fazer o autoplay funcionar é também definir muted. Um clipe silenciado não produz som, portanto o navegador permite que ele inicie por conta própria:

<!-- Autoplays in modern browsers because it is muted -->
<audio src="audio.mp3" controls autoplay muted></audio>

O atributo muted simplesmente inicia o elemento com o volume desligado; o usuário pode reativar o som pelos controles. Para áudio especificamente, um clipe silenciado em autoplay raramente é útil por si só, mas o padrão vale a pena conhecer porque a mesma regra governa a tag <video>, onde o autoplay mudo é amplamente utilizado.

Se você realmente precisa que o som comece, acione a reprodução a partir de uma ação do usuário. A API JavaScript do HTML DOM permite que você controle o elemento com métodos como .play() dentro de um manipulador de clique, o que o navegador trata como aprovado pelo usuário.

O atributo preload

preload é o único atributo de <audio> que recebe um valor em vez de ser um boolean. Ele indica ao navegador quanto do arquivo deve ser buscado antes que o usuário pressione play:

auto — o navegador pode baixar o arquivo inteiro antecipadamente. Use quando você espera que o áudio seja reproduzido e quer uma reprodução instantânea.
metadata — busca apenas metadados como duração e os primeiros bytes, não o áudio em si. Um bom meio-termo que permite aos controles exibir a duração da faixa sem desperdiçar largura de banda.
none — não pré-carrega nada até que o usuário interaja. Melhor quando a página tem muitos clipes ou quando a maioria dos visitantes não reproduzirá o áudio.

<audio src="audio.mp3" controls preload="metadata"></audio>

preload é apenas uma dica — o navegador pode ignorá-la para economizar dados, e é substituído por autoplay, que força o carregamento do arquivo.

Acessibilidade

Áudio que existe apenas como som exclui qualquer pessoa que não consiga ouvi-lo. Algumas adições tornam o áudio incorporado inclusivo:

Forneça uma transcrição em texto. Para áudio com muito conteúdo falado (entrevistas, podcasts), publique o texto próximo ao player para que usuários de leitores de tela e pessoas surdas tenham acesso ao mesmo conteúdo.
Adicione legendas com <track>. Um elemento <track kind="captions"> permite que os navegadores exibam texto sincronizado para o áudio.
Identifique o player com aria-label quando não há uma legenda visível, para que a tecnologia assistiva anuncie o que é o clipe.
Use o texto de fallback entre as tags como degradação elegante: navegadores que não conseguem reproduzir o elemento o exibem em seu lugar.

<audio controls aria-label="Episode 12: Building accessible web audio">
  <source src="podcast.mp3" type="audio/mpeg">
  <track kind="captions" src="podcast.vtt" srclang="en" label="English">
  Your browser does not support the audio element.
  <a href="podcast.mp3">Download the audio</a> instead.
</audio>

Atributos

A tag <audio> possui atributos que indicam o caminho para o arquivo de áudio, o comportamento de reprodução, entre outros. Os atributos controls, autoplay, loop e muted são boolean; seus valores podem ser omitidos. Quando especificados, a função correspondente é habilitada por padrão.

Atributo	Valor	Definição
autoplay		Reproduz o arquivo de áudio automaticamente após o carregamento da página.
controls		Exibe o painel de controle (play/pause, volume, etc.). Se o atributo controls estiver ausente, o áudio não ficará visível na página.
loop		Repete o arquivo de áudio continuamente desde o início após o término.
muted		Silencia o áudio por padrão.
preload	auto, metadata, none	Define a estratégia de pré-carregamento para o arquivo de áudio.
src	URL	Especifica o caminho para o arquivo de áudio.

A tag <audio> suporta os Atributos Globais e os Atributos de Evento.

Prática

Quais são as propriedades da tag de áudio HTML?

É usada para inserir som ou música em documentos HTML.A tag de áudio perde toda a sua funcionalidade se o atributo controls não for fornecido.A tag de áudio suporta os atributos controls, autoplay e loop.Ela só pode reproduzir arquivos no formato mp3.O atributo autoplay iniciará a reprodução do áudio assim que estiver pronto.

Prática

Por que um clipe de áudio com autoplay frequentemente fica em silêncio nos navegadores modernos?

Os navegadores bloqueiam o autoplay audível até que o usuário interaja com a página.O atributo autoplay não é HTML válido.Adicionar o atributo muted permite que um clipe seja reproduzido automaticamente porque não emite som.O autoplay só funciona no Internet Explorer.

Prática

Quando você aninha vários elementos source, qual deles o navegador reproduz?

O primeiro que consegue decodificar, lendo de cima para baixo.O último source listado.Todos eles, misturados.Um source compatível aleatório.

Prática

O que o preload definido como metadata faz?

Busca apenas dados como a duração, não o áudio completo.Baixa o arquivo inteiro antes da reprodução.Desabilita o painel de controles.Silencia o áudio por padrão.

Sintaxe

Exemplo da tag HTML <audio>

Formatos de áudio suportados

Como o navegador escolhe um <source>

O atributo controls

Exemplo da tag HTML <audio> com o atributo controls

O atributo loop

Autoplay e o atributo muted

O atributo preload

Acessibilidade

Atributos

Prática

Exemplo da tag HTML `<audio>`

Como o navegador escolhe um `<source>`

Exemplo da tag HTML `<audio>` com o atributo controls