0Pricing
HTML Academy · Aula

O elemento audio: src controls loop autoplay

Incorpore reprodutores de áudio com atributos nativos do HTML5.

O elemento audio: src controls loop autoplay é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

Áudio nativo em HTML5

O HTML5 introduziu o elemento <audio> para incorporar áudio sem plugins:

<audio src="podcast.mp3" controls>
  Your browser does not support audio.
</audio>
<!-- controls: show the default player UI (play, pause, volume) -->
<!-- Fallback text is shown to browsers that don't support audio -->

O atributo de controles

O atributo controls exibe o reprodutor de áudio integrado do navegador:

<!-- Without controls: audio plays but no UI is visible -->
<audio src="bg-music.mp3"></audio>

<!-- With controls: browser shows play/pause, volume, scrubber -->
<audio src="podcast.mp3" controls></audio>

<!-- Always include controls for user-accessible audio
     Unless it is a background ambient sound (use controls anyway for accessibility) -->

O atributo de repetição

O atributo loop reinicia o áudio quando ele termina:

<audio src="bg-music.ogg" controls loop></audio>
<!-- loop is a boolean attribute -->
<!-- Good for: background music, demo soundscapes -->
<!-- Bad UX: loops without user consent are annoying -->

O atributo de reprodução automática

O atributo autoplay inicia a reprodução quando a página é carregada:

<audio src="alert.mp3" autoplay></audio>
<!-- Most modern browsers BLOCK autoplay for audio by default -->
<!-- Exception: autoplay + muted is allowed -->
<!-- Browsers allow autoplay if the user has interacted with the page -->

<!-- The muted workaround: -->
<audio src="bg.mp3" autoplay muted loop></audio>

O atributo de áudio silenciado

O atributo muted inicia o áudio silenciado:

<!-- Muted audio can autoplay in most browsers: -->
<audio src="ambient.mp3" autoplay muted loop></audio>

<!-- User can unmute with the controls -->
<audio src="ambient.mp3" autoplay muted loop controls></audio>

O atributo de pré-carregamento

O atributo preload indica quanto de dados deve ser carregado:

<audio src="podcast.mp3" controls preload="none">...</audio>
<!-- none: don't preload anything (saves bandwidth on mobile) -->

<audio src="short-clip.mp3" controls preload="auto">...</audio>
<!-- auto: preload the entire file (browser decides) -->

<audio src="song.mp3" controls preload="metadata">...</audio>
<!-- metadata: preload only duration and basic info (good default) -->

Controle de áudio com JavaScript

Controle o áudio com JavaScript:

const audio = document.getElementById('my-audio');

// Play:
audio.play();

// Pause:
audio.pause();

// Current time (seconds):
audio.currentTime = 30;  // jump to 30 seconds

// Volume (0 to 1):
audio.volume = 0.5;

// Duration:
console.log(audio.duration);

Eventos de áudio

Eventos de áudio comuns:

audio.addEventListener('play', () => console.log('Playing'));
audio.addEventListener('pause', () => console.log('Paused'));
audio.addEventListener('ended', () => console.log('Finished'));
audio.addEventListener('timeupdate', () => {
  console.log('Position:', audio.currentTime);
});
audio.addEventListener('error', () => console.log('Error loading audio'));

Reprodutor de áudio personalizado

Crie um reprodutor personalizado com JavaScript e CSS:

<div class="audio-player">
  <audio id="player" src="podcast.mp3" preload="metadata"></audio>
  <button id="play-btn" aria-label="Play">▶</button>
  <input type="range" id="scrubber" value="0" min="0" max="100">
  <span id="time">0:00</span>
</div>
<script>
const audio = document.getElementById('player');
document.getElementById('play-btn').addEventListener('click', () => {
  audio.paused ? audio.play() : audio.pause();
});
</script>

Áudio acessível

Requisitos de acessibilidade para áudio:

  • Forneça uma transcrição para todo o conteúdo de áudio
  • Para podcasts: disponibilize um link para uma transcrição em texto
  • Áudio reproduzido automaticamente viola a WCAG 1.4.2 se durar mais de 3 segundos
  • Garanta que os controles possam ser acessados pelo teclado (os controles nativos podem)

Elemento src versus source

Especifique alternativas de formato com <source> (na próxima lição):

<!-- Single format: -->
<audio controls src="podcast.mp3">...</audio>

<!-- Multiple formats: -->
<audio controls>
  <source src="podcast.opus" type="audio/ogg; codecs=opus">
  <source src="podcast.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

Verificação rápida

Qual atributo de áudio exibe a interface do reprodutor integrado do navegador?

Recapitulação: elemento audio

Elementos essenciais do elemento audio:

  • controls — exibe a interface do reprodutor (quase sempre inclua este atributo)
  • loop — reinicia quando termina
  • autoplay — reproduz ao carregar (bloqueado pela maioria dos navegadores)
  • muted — inicia silenciado (permite a reprodução automática na maioria dos navegadores)
  • preload="metadata" — um bom padrão para podcasts/música
  • Forneça transcrições para garantir a acessibilidade

Perguntas Frequentes

A aula “O elemento audio: src controls loop autoplay” é grátis?

Sim — o texto completo de “O elemento audio: src controls loop autoplay” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “O elemento audio: src controls loop autoplay”?

Incorpore reprodutores de áudio com atributos nativos do HTML5. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “O elemento audio: src controls loop autoplay”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O elemento audio: src controls loop autoplay
  2. O elemento video e a proporção da tela
  3. O elemento source para vários formatos
  4. Legendas com track e WebVTT
← Voltar para HTML Academy