A tag audio permite incorporar som diretamente na página. O Mestre usa áudio com controle,
contexto, performance e alternativa textual para transformar mídia em experiência acessível.
Pronto para narrar. As vozes disponíveis dependem do navegador e do sistema.
Abertura de impacto
A web também fala
Áudio na web não é “colocar um som”. É entregar informação auditiva com respeito ao usuário.
Um som sem controle, sem contexto e sem transcrição vira ruído técnico.
Promessa da aula:
Você vai dominar áudio nativo com audio, controls, src,
source, formatos, fallback, atributos avançados, transcrição e organização de podcast acessível.
Link para áudio: leva o usuário para o arquivo ou download.
Áudio incorporado: mantém o player dentro da página, com controle nativo.
Sintaxe essencial
A tag audio, controls, src, source e fallback
O elemento audio é o contêiner nativo de som no HTML5. O atributo
controls entrega autonomia ao usuário. A tag source permite múltiplos formatos.
<audio src="audio/podcast.mp3" controls>
Seu navegador não suporta áudio HTML5.
</audio>
<audio controls>
<source src="midia/aula-32.mp3" type="audio/mpeg">
<source src="midia/aula-32.ogg" type="audio/ogg">
Seu navegador não suporta áudio HTML5.
<a href="midia/aula-32.mp3">Baixar o áudio</a>.
</audio>
Erro que reprovamos:
Criar <audio src="musica.mp3"></audio> sem controls.
O áudio existe no código, mas o usuário não tem como controlar.
Compatibilidade
MP3, OGG, WAV, formato, codec e performance
MP3 é o mais compatível. OGG é eficiente e aberto. WAV é pesado e deve ser reservado para casos específicos.
O Mestre não sobe áudio bruto pesado sem compressão e sem testar navegadores.
Formato: extensão/contêiner do arquivo, como .mp3 ou .ogg.
Codec: algoritmo que codifica e decodifica o som.
Compatibilidade: capacidade do navegador de reproduzir o formato.
Nomenclatura mestre: use audio-aula-01.mp3, sem espaços ou acentos.
Comportamento e performance
preload, autoplay, muted, loop e controlsList
Atributos avançados controlam carregamento, reprodução e experiência do usuário.
Eles devem ser usados com responsabilidade, principalmente em páginas com vários áudios.
Áudio tocando automaticamente com som ativado. Isso irrita, assusta, consome dados móveis
e faz o usuário fechar a página.
preload="none": economiza banda até o play.
preload="metadata": carrega só informações básicas, como duração.
preload="auto": pode carregar o arquivo inteiro; use com cautela.
loop: só faz sentido para sons realmente cíclicos.
Acessibilidade
Áudio precisa de transcrição e contexto
A informação do áudio precisa existir também em texto. Usuários surdos, usuários em silêncio
e buscadores dependem da transcrição para acessar o conteúdo.
Episódio demonstrativo: Introdução ao áudio em HTML — duração aproximada: 3 minutos.
Transcrição resumida
Neste episódio, explicamos que a tag audio incorpora som diretamente na página,
mas o usuário deve manter controle total sobre reprodução, pausa, volume e acesso ao conteúdo por texto.
Dê título ao áudio antes do player.
Informe tema e duração.
Use controls para autonomia.
Forneça transcrição textual.
Use figure e figcaption quando o áudio for autocontido.
Organize arquivos em pasta como audio/ ou midia/.
Desafio Mestre
Página de Podcast HTML Acessível
Missão: criar o arquivo podcast-html-acessivel.html
demonstrando domínio total sobre áudio nativo, compatibilidade, performance, semântica e acessibilidade.
Episódio 01 — Fundamentos da tag audio
Duração: 04:10 • Tema: incorporação de áudio nativo.
Transcrição: Este episódio apresenta a função da tag audio e explica por que controles visíveis são obrigatórios para uma experiência profissional.
Episódio 02 — Formatos e compatibilidade
Duração: 06:30 • Tema: MP3, OGG e fallback.
Transcrição: Este episódio explica a diferença entre usar src direto e múltiplas tags source para compatibilidade entre navegadores.
Episódio 03 — Acessibilidade em podcast
Duração: 05:45 • Tema: transcrição, contexto e controle do usuário.
Transcrição: Este episódio reforça que áudio acessível precisa de alternativa textual, título, duração e controle total de reprodução.
Requisitos obrigatórios
Doctype HTML5 e html lang="pt-BR".
Head completo com charset, viewport, title e meta description.
Body com header, nav, main, section, article, aside e footer.
H1 com “Página de Podcast HTML Acessível”.
Section introdutória explicando a função da tag audio.
Nav interno com links para pelo menos 4 seções.
Pelo menos 3 articles representando episódios de podcast.
Cada episódio com título adequado.
Cada episódio com tag audio usando controls.
Pelo menos um áudio usando múltiplas tags source.
source com type correto.
Texto de fallback dentro da tag audio.
Pelo menos uma figure envolvendo áudio e figcaption.
Transcrição textual para cada áudio.
Indicação de duração ou tema do áudio.
Explicação de src direto vs source interno.
Explicação de preload, autoplay, muted e loop.
Lista com pelo menos 10 boas práticas para áudio na web.
Checklist de acessibilidade para áudio.
Quiz com gabarito
15 perguntas para provar domínio
Qual tag incorpora áudio nativamente? <audio>.
Para que serve controls? Exibe controles de reprodução.
Por que usar source? Para oferecer múltiplos formatos e compatibilidade.
O que autoplay faz? Inicia automaticamente a reprodução.
Qual a função do loop? Reiniciar o áudio ao terminar.
Como silenciar por padrão? Com muted.
Onde fica o fallback? Entre <audio> e </audio>.
Formato mais compatível? MP3.
Para que serve preload="none"? Economizar banda até o play.
Pode usar áudio dentro de figure? Sim.
O que type no source indica? Formato MIME, como audio/mpeg.
Autoplay com som é bom? Não.
Como ajudar usuários surdos? Fornecendo transcrição textual.
O que o navegador faz com vários source? Usa o primeiro compatível.
Audio precisa de fechamento? Sim, </audio>.
GitHub
Registre sua página de podcast acessível
git status
git add .
git commit -m "aula-32: cria pagina de podcast html acessivel"
git push
git status: verifica o novo arquivo de podcast.
git add .: prepara a página para commit.
git commit: documenta sua evolução em áudio HTML.
git push: envia sua evidência para o portfólio global.
Resumo Mestre
Áudio em HTML é escolha, controle e inclusão
Use audio com controls, múltiplos source,
fallback, transcrição, contexto e performance. O som deve servir ao usuário, nunca invadir a experiência.
Nota final: 10/10 Supremo.
Esta aula está no nível Mestre dos Mestres porque trata mídia como recurso técnico sério:
compatibilidade, acessibilidade, performance, semântica, transcrição e controle do usuário.