CodeGym/Cursos/Frontend SELF PT/Inserção de áudio: <audio>

Inserção de áudio: <audio>

Disponível

3.1 Fundamentos da tag <audio>

A tag <audio> no HTML5 é usada para inserir arquivos de áudio em uma página web. Este elemento suporta vários formatos de áudio e proporciona ao usuário controles embutidos para reprodução, pausa e ajuste de volume.

Exemplo mais simples

A tag <audio> é usada com o atributo src, que indica o caminho para o arquivo de áudio. Também é possível adicionar atributos controls para exibir controles padrão, como botões de reprodução, pausa e ajuste de volume.

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

Exemplo com várias fontes

Para garantir suporte em diferentes navegadores, é possível especificar várias fontes de áudio usando a tag <source>. Isso permite que o navegador escolha o formato de áudio suportado.

HTML
<audio controls>
  <source src="audiofile.mp3" type="audio/mpeg">
  <source src="audiofile.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

Atributos da tag <audio>

  • src: indica o caminho para o arquivo de áudio.
  • controls: exibe os controles de reprodução
  • autoplay: reproduz automaticamente o áudio ao carregar a página
  • loop: repete a reprodução do áudio após o término
  • muted: desativa o som ao carregar
  • preload: indica como o navegador deve carregar o áudio. Valores possíveis: none, metadata, auto

3.2 Exemplos de uso de atributos

Atributo controls

O atributo controls adiciona controles padrão de reprodução de áudio, como botões "Play", "Pause" e controle de volume. Este atributo torna o elemento de áudio mais interativo e conveniente para os usuários.

Exemplo:

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

Atributo autoplay

O atributo autoplay faz com que o arquivo de áudio comece a ser reproduzido automaticamente assim que a página é carregada. Use este atributo com cautela, pois a reprodução inesperada de áudio pode irritar os usuários.

Exemplo:

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

Atributo loop

O atributo loop indica que o arquivo de áudio deve ser reproduzido em loop infinito. Isso é útil para música de fundo ou efeitos sonoros que devem se repetir.

Exemplo:

HTML
<audio src="audiofile.mp3" autoplay loop></audio>

Atributo muted

O atributo muted desativa o som do arquivo de áudio ao carregar. Isso pode ser útil se você quiser que o áudio seja reproduzido sem som por padrão, permitindo que o usuário ative o som quando necessário.

HTML
<audio src="audiofile.mp3" muted></audio>

Atributo preload

O atributo preload indica ao navegador como ele deve carregar o arquivo de áudio ao carregar a página. Ele pode aceitar um dos três valores:

  • none: o navegador não deve pré-carregar o áudio
  • metadata: o navegador deve carregar apenas os metadados (duração, tamanho, etc.)
  • auto: o navegador deve carregar completamente o áudio quando a página for carregada
HTML
<audio src="audiofile.mp3" preload="auto"></audio>

3.3 Formatos de áudio suportados

Para garantir a compatibilidade entre navegadores, recomenda-se usar vários formatos de áudio. Os formatos mais comuns incluem MP3, OGG e WAV. Vamos detalhar cada um deles.

Formato MP3

MP3 (MPEG-1 Audio Layer III) é um dos formatos de áudio mais populares. Ele é suportado pela maioria dos navegadores e dispositivos. O MP3 usa compressão com perda, que reduz o tamanho do arquivo enquanto mantém uma qualidade de som razoavelmente alta.

Exemplo:

HTML
<audio src="audiofile.mp3" type="audio/mpeg"></audio>

Formato OGG

OGG (Ogg Vorbis) é um formato de compressão de áudio com perda, que é suportado pela maioria dos navegadores modernos. Este formato oferece boa qualidade de som e é frequentemente usado como uma alternativa ao MP3.

Exemplo:

HTML
<audio src="audiofile.ogg" type="audio/ogg"></audio>

Formato WAV

WAV (Waveform Audio File Format) é um formato de áudio sem compressão, que oferece alta qualidade de som. No entanto, os arquivos WAV são maiores em tamanho comparados aos arquivos MP3 e OGG, e por isso são menos comuns para uso na web.

Exemplo:

HTML
<audio src="audiofile.wav" type="audio/wav"></audio>

3.4 Compatibilidade de formatos

Nem todos os navegadores suportam os mesmos formatos de áudio. Para garantir a compatibilidade entre navegadores, é recomendado usar vários formatos de áudio, como MP3, OGG e WAV.

Exemplo com suporte a múltiplos formatos:

HTML
<audio controls>
  <source src="audiofile.mp3" type="audio/mpeg">
  <source src="audiofile.ogg" type="audio/ogg">
  <source src="audiofile.wav" type="audio/wav">
  Your browser does not support the audio element.
</audio>

Acessibilidade

Para garantir a acessibilidade, forneça uma alternativa textual para casos em que o navegador não suporte o elemento <audio> ou os arquivos de áudio. Isso pode ser feito com texto entre as tags de abertura e fechamento do <audio>.

Exemplo de acessibilidade:

HTML
<audio controls>
  <source src="audiofile.mp3" type="audio/mpeg">
  <source src="audiofile.ogg" type="audio/ogg">
  <source src="audiofile.wav" type="audio/wav">
  Your browser does not support the audio element.
  You can download the audio file <a href="audiofile.mp3">here</a>.
</audio>

Entender as capacidades da tag <audio> e seu API ajuda a criar páginas web mais interativas e acessíveis.

1
Tarefa
Frontend SELF PT,  nível 6lição 3
Bloqueado
Áudio com controle
Áudio com controle
1
Tarefa
Frontend SELF PT,  nível 6lição 3
Bloqueado
Áudio com formatos
Áudio com formatos
Comentários
  • Populares
  • Novas
  • Antigas
Você precisa acessar para deixar um comentário
Esta página ainda não tem nenhum comentário