Áudio HTML

A lição de vídeo ensinou clips com imagem. Áudio é o primo só de som: podcasts, notas de voz, intros de lição e efeitos curtos. O elemento é audio. Comece com controls para as pessoas reproduzirem no próprio ritmo — a mesma cortesia do vídeo — sem poster, quadro visual ou caixa de vídeo reservada. Uma barra fina obtém um ficheiro de media/ e deixa o layout mais calmo do que um clip completo.

O que o audio faz

audio pede ao navegador para obter um ficheiro de som e mostrar um leitor compacto. Pode definir um ficheiro com src ou listar vários filhos <source> para o navegador escolher um formato que entenda. Não há tela visual como em video; com controls costuma aparecer uma barra fina. A linha do tempo, o silêncio e o volume ainda importam porque o som interrompe uma sala quieta tanto quanto um vídeo alto. Trate o leitor como uma ferramenta que o visitante opera, não como fundo que começa sozinho.

Resposta direta

Escreva <audio controls src="sound.mp3"> ou aninhe vários <source> para formatos como MP3 e Ogg. Inclua texto de reserva curto (e opcionalmente um link de descarga) dentro do elemento. Prefira ficheiros comprimidos para a web. Evite autoplay surpresa com som. Se o clip ensina com fala, planeie uma transcrição ou notas claras ao lado do leitor.

Formatos que o principiante encontra

Os navegadores não preferem todos o mesmo codec. Principiantes costumam começar com MP3 e acrescentar Ogg como segundo candidato. WAV serve para editar no computador mas muitas vezes é grande demais como única cópia web. A tabela abaixo é um mapa prático de início — não uma enciclopédia de codecs.

Áudio simples com controls

Um MP3 curto mais controls basta para muitas páginas de prática. Coloque o ficheiro sob media/, verifique o caminho como nas URL de imagem. Se a barra aparecer sem reproduzir, abra as ferramentas de desenvolvimento ou teste a URL do ficheiro — caminhos partidos falham em silêncio.

Leitura do exemplo simples

• controls mostra reproduzir, pausar, procurar e muitas vezes volume
• src aponta para o ficheiro relativo à página (aqui sob media/)
• O texto interior é reserva quando o elemento não pode reproduzir
• Não há poster aqui — isso pertence a video
• Para uma barra de áudio básica normalmente não precisa de width como no vídeo

Várias fontes e link de descarga

Listar Ogg e MP3 com valores MIME em type melhora a chance de um candidato reproduzível. A ordem importa: o navegador percorre a lista até encontrar algo que possa descodificar. Um link de descarga ajuda quando a reprodução falha ou quando alguém quer guardar. Ao exportar dois formatos, mantenha o mesmo conteúdo da lição em cada ficheiro.

Leitura do exemplo multi-fonte

• As fontes são tentadas por ordem até o navegador encontrar uma reproduzível
• type ajuda a saltar formatos sem suporte rapidamente
• O link de descarga é reserva humana dentro de audio
• Mantenha nomes e pastas exatos — um typo em src parece um “leitor partido”
• Ainda pode ficar com um só src em demos minúsculas; multi-fonte é o upgrade de robustez

Respeite ouvidos e largura de banda

Autoplay com som sem ação clara do utilizador muitas vezes é bloqueado e costuma ser rude. Sem controls, o visitante não pausa com honestidade. Um WAV longo sem compressão desperdiça dados móveis quando um MP3 compacto ensina a mesma ideia. Exporte áudio tamanho web como exporta vídeo web. Música de fundo mais tarde é outra decisão de design com consentimento e mute — não o padrão de uma página para principiantes.

Transcrições quando a fala ensina

Se o clip explica um conceito com palavras, planeie uma transcrição ou notas claras na página. audio não usa alt como img. Acessibilidade da fala é alternativas de texto, títulos claros perto do leitor e controlo do utilizador — não uma imagem poster. Mesmo um parágrafo curto que reformula a dica falada ajuda quem não pode ouvir agora.

Áudio vs vídeo vs embeds

• Ficheiro de som auto-hospedado → audio
• Clip auto-hospedado com imagem → video
• Página de leitor de outro site → muitas vezes iframe (lição posterior sobre embeds estilo YouTube)
  Não meta um podcast em video só porque viu controls lá primeiro. Não envolva um MP3 local num iframe quando audio basta. Combine o elemento com o tipo de média.

Prática no editor

1. Adicione um .mp3 curto sob media/ (dez a trinta segundos bastam).
2. Integre com audio controls e caminho relativo correto.
3. Reproduza, pause, procure e ajuste o volume com a UI do navegador.
4. Opcional: adicione um segundo tipo source e um link de descarga.
5. Escreva uma frase de transcrição ou notas ao lado do leitor se o clip falar.
6. Confirme que a página ainda faz sentido se ninguém premir play.

Erros fáceis

• Autoplay com som sem ação clara do utilizador
• Falta de controls
• Ligar um WAV enorme sem compressão quando um MP3 basta
• Esperar poster em audio
• Esquecer texto de reserva ou caminho de descarga
• Confundir embeds iframe estilo YouTube com ficheiros audio auto-hospedados
• Conteúdo falado diferente em cada source nos testes
• Caminho media/ partido e culpar o navegador

Resumo

• audio incorpora ficheiros de som que você hospeda
• Use controls para o visitante reproduzir, pausar e procurar
• Vários formatos source com type melhoram o suporte
• Prefira ficheiros comprimidos e reprodução iniciada pelo utilizador
• Planeie transcrição ou notas quando a fala leva a lição
• Áudio para som, vídeo para imagem+som, iframe para leitores externos