HTML - Elemento de Áudio

Sintaxe Básica

A tag HTML <audio> é usada para adicionar conteúdo de áudio a uma página web. É uma forma simples de adicionar arquivos de áudio ao seu site. A tag <audio> precisa de um atributo src que aponta para o arquivo de áudio que você deseja reproduzir. Os formatos de áudio suportados incluem MP3, WAV e OGG.

<audio src="caminho/para/arquivo/audio.mp3"></audio>

O atributo src informa ao navegador onde encontrar o arquivo de áudio. Você pode usar um caminho relativo se o arquivo de áudio estiver hospedado no mesmo servidor que a página web, ou uma URL absoluta se o arquivo de áudio estiver hospedado em um servidor diferente.

Você também pode usar o atributo type para informar ao navegador o tipo MIME do arquivo de áudio. Isso ajuda o navegador a saber se pode reproduzir o arquivo de áudio antes de fazer o download.

<audio src="caminho/para/arquivo/audio.mp3" type="audio/mpeg"></audio>

Nem todos os navegadores suportam os mesmos formatos de áudio. Para garantir que seu áudio funcione em tantos dispositivos quanto possível, você pode fornecer várias fontes de áudio usando a tag <source> dentro do elemento <audio>.

<audio>
  <source src="caminho/para/arquivo/audio.mp3" type="audio/mpeg">
  <source src="caminho/para/arquivo/audio.ogg" type="audio/ogg">
  Seu navegador não suporta o elemento de áudio.
</audio>

Neste exemplo, o navegador tentará reproduzir a primeira fonte (MP3) e se não for suportada, tentará a próxima fonte (OGG). Se nenhum dos formatos de áudio funcionar, o navegador mostrará o texto "Seu navegador não suporta o elemento de áudio."

O conteúdo alternativo é importante para navegadores mais antigos que não suportam a tag <audio>. Ao fornecer conteúdo alternativo, você pode garantir que todos os usuários possam acessar as informações em sua página web, mesmo que não possam ouvir o áudio.

Atributos

A tag HTML <audio> possui diversos atributos que você pode usar para controlar como o áudio é reproduzido e exibido na sua página web.

O atributo controls é usado para mostrar os controles de áudio, como botões de reprodução, pausa e volume. Sem esse atributo, o player de áudio não terá controles e você não poderá iniciar ou parar o áudio.

<audio src="path/to/audio/file.mp3" controls></audio>

O atributo autoplay faz o áudio começar a tocar assim que a página web carrega. Isso pode ser incômodo para você, então é melhor usar esse atributo com cuidado.

<audio src="path/to/audio/file.mp3" autoplay></audio>

O atributo loop faz o áudio repetir continuamente até que você o pare. Isso é útil para música de fundo ou efeitos sonoros.

<audio src="path/to/audio/file.mp3" loop></audio>

O atributo muted define o estado inicial de mudo do player de áudio. Isso significa que o áudio estará mudo por padrão quando a página web carregar.

<audio src="path/to/audio/file.mp3" muted></audio>

O atributo preload controla como o navegador deve carregar o arquivo de áudio. Ele pode ter um dos três valores:

<audio src="path/to/audio/file.mp3" preload="auto"></audio>

Múltiplas Fontes

A tag HTML <audio> permite especificar várias fontes de áudio usando o elemento <source>. Isso ajuda a fornecer diferentes formatos de áudio para garantir que seu áudio funcione em muitos navegadores e dispositivos.

Para usar múltiplas fontes, adicione um ou mais elementos <source> dentro da tag <audio>. Cada elemento <source> deve ter um atributo src que aponta para o arquivo de áudio e um atributo type que especifica o tipo MIME do formato de áudio.

<audio>
  <source src="caminho/para/arquivo/audio.mp3" type="audio/mpeg">
  <source src="caminho/para/arquivo/audio.ogg" type="audio/ogg">
  <source src="caminho/para/arquivo/audio.wav" type="audio/wav">
  Seu navegador não suporta o elemento de áudio.
</audio>

Neste exemplo, o navegador tentará reproduzir a primeira fonte (MP3) e se não for suportada, passará para a próxima fonte (OGG) e assim por diante. Se nenhum dos formatos de áudio especificados for suportado, o navegador mostrará o texto alternativo "Seu navegador não suporta o elemento de áudio."

Diferentes navegadores suportam diferentes formatos de áudio, por isso é importante fornecer múltiplas fontes para cobrir uma ampla gama de navegadores e dispositivos. Os formatos de áudio mais comuns são:

Ao especificar múltiplas fontes, ordene-as com base no seu formato preferido. Os navegadores usarão o primeiro formato suportado que encontrarem, então liste seu formato preferido primeiro.

Também forneça conteúdo alternativo para navegadores que não suportam a tag <audio>. Adicione texto ou outros elementos HTML dentro da tag <audio>, após os elementos <source>. Este conteúdo alternativo só será mostrado se nenhuma das fontes de áudio especificadas puder ser reproduzida.

Usar vários elementos <source> e fornecer conteúdo alternativo ajuda a garantir que seu áudio funcione em muitos navegadores e dispositivos, proporcionando uma boa experiência do usuário para todos os seus visitantes.

Estilizando com CSS

Você pode mudar a aparência do elemento HTML <audio> e seus controles usando CSS. Isso permite que você faça o player de áudio combinar com o estilo da sua página web.

Para estilizar os controles de áudio, você pode usar o pseudo-elemento ::-webkit-media-controls. Este pseudo-elemento mira nos controles de áudio padrão mostrados pelo navegador.

audio::-webkit-media-controls {
  background-color: #f1f1f1;
  color: #333;
  border-radius: 5px;
  padding: 5px;
}

Os controles de áudio recebem uma cor de fundo cinza claro, cor de texto cinza escuro, cantos arredondados e um pouco de preenchimento.

Você também pode estilizar partes específicas dos controles de áudio, como o botão de reprodução, barra de progresso e controle deslizante de volume, usando outros pseudo-elementos como ::-webkit-media-controls-play-button, ::-webkit-media-controls-progress-bar e ::-webkit-media-controls-volume-slider.

Para estilizar o próprio elemento <audio>, você pode usar propriedades CSS como width, height, background, border e margin.

audio {
  width: 300px;
  height: 40px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px auto;
}

O elemento de áudio recebe uma largura e altura fixas, uma cor de fundo cinza claro, uma borda, cantos arredondados e é centralizado na página usando a propriedade margin.

Interação JavaScript

O elemento HTML <audio> pode ser controlado usando JavaScript, permitindo criar players de áudio personalizados e adicionar recursos interativos às suas páginas web.

Para reproduzir ou pausar um elemento de áudio com JavaScript, você pode usar os métodos play() e pause(). Primeiro, selecione o elemento de áudio usando um método como document.querySelector() e depois chame o método.

<audio id="meuAudio" src="caminho/para/arquivo/audio.mp3"></audio>

<button onclick="reproduzirAudio()">Reproduzir</button>
<button onclick="pausarAudio()">Pausar</button>

<script>
  var audio = document.querySelector('#meuAudio');

  function reproduzirAudio() {
    audio.play();
  }

  function pausarAudio() {
    audio.pause();
  }
</script>

Clicar no botão "Reproduzir" chamará a função reproduzirAudio(), que seleciona o elemento de áudio usando seu ID e chama o método play(). Da mesma forma, clicar no botão "Pausar" chamará a função pausarAudio() para pausar o áudio.

Você também pode ajustar o volume e buscar um tempo específico no áudio usando JavaScript. A propriedade volume controla o volume do áudio, com valores variando de 0 (mudo) a 1 (volume máximo). A propriedade currentTime define ou retorna a posição atual de reprodução em segundos.

<audio id="meuAudio" src="caminho/para/arquivo/audio.mp3"></audio>

<button onclick="definirMetadeVolume()">Definir Metade do Volume</button>
<button onclick="buscar30Segundos()">Buscar 30 Segundos</button>

<script>
  var audio = document.querySelector('#meuAudio');

  function definirMetadeVolume() {
    audio.volume = 0.5;
  }

  function buscar30Segundos() {
    audio.currentTime = 30;
  }
</script>

Clicar no botão "Definir Metade do Volume" chamará a função definirMetadeVolume(), que define a propriedade volume do elemento de áudio para 0.5 (metade do volume). Clicar no botão "Buscar 30 Segundos" chamará a função buscar30Segundos(), que define a propriedade currentTime para 30, saltando para a marca de 30 segundos no áudio.

O JavaScript também pode escutar eventos de áudio, como quando o áudio começa a tocar, pausa ou termina. Você pode usar esses eventos para acionar funções ou atualizar a interface do usuário.

<audio id="meuAudio" src="caminho/para/arquivo/audio.mp3"></audio>
<button onclick="reproduzirAudio()">Reproduzir</button>
<p id="statusAudio"></p>

<script>
  var audio = document.querySelector('#meuAudio');
  var status = document.querySelector('#statusAudio');

  function reproduzirAudio() {
    audio.play();
  }

  audio.onplay = function() {
    status.textContent = 'O áudio está tocando';
  };

  audio.onpause = function() {
    status.textContent = 'O áudio está pausado';
  };

  audio.onended = function() {
    status.textContent = 'O áudio terminou';
  };
</script>

Os ouvintes de eventos onplay, onpause e onended são usados para atualizar o conteúdo de texto do elemento <p> com o ID "statusAudio" com base no estado atual do áudio. Quando o áudio começa a tocar, o texto mudará para "O áudio está tocando". Quando pausado, mostrará "O áudio está pausado", e quando o áudio terminar, exibirá "O áudio terminou".

Ao combinar esses métodos e eventos JavaScript, você pode criar players de áudio personalizados com recursos como botões de reproduzir/pausar, controles deslizantes de volume, barras de progresso e muito mais. O JavaScript fornece controle sobre o elemento <audio>, permitindo criar experiências de áudio envolventes e interativas em suas páginas web.

Considerações de Acessibilidade

Ao adicionar conteúdo de áudio às suas páginas web, é importante pensar na acessibilidade para todos os usuários, incluindo aqueles com deficiências auditivas. Aqui estão algumas maneiras de tornar seu conteúdo de áudio mais acessível:

Fornecer transcrições para o seu conteúdo de áudio é uma forma de torná-lo acessível a usuários surdos ou com dificuldades auditivas. Uma transcrição é uma versão em texto do conteúdo falado no seu áudio. Você pode fornecer uma transcrição na mesma página do seu player de áudio ou criar um link para uma página separada com a transcrição completa.

<audio src="caminho/para/arquivo/audio.mp3" controls></audio>

<p>
  <a href="transcricao.html">Leia a transcrição</a>
</p>

O uso de atributos ARIA (Aplicações de Internet Ricas Acessíveis) também pode melhorar a acessibilidade do seu player de áudio. Atributos ARIA fornecem informações extras sobre os elementos da sua página para tecnologias assistivas, como leitores de tela.

<audio id="meuAudio" src="caminho/para/arquivo/audio.mp3" controls>
  <p>Seu navegador não suporta o elemento de áudio.</p>
</audio>

<button onclick="reproduzirAudio()" aria-controls="meuAudio">
  Reproduzir Áudio
</button>

O atributo aria-controls é adicionado ao botão de reprodução, indicando que ele controla o elemento de áudio com o ID "meuAudio". Isso ajuda os leitores de tela a entenderem a relação entre o botão e o player de áudio.

Aqui estão algumas práticas recomendadas para criar players de áudio acessíveis:

<div class="audio-player">
  <audio id="meuAudio" src="caminho/para/arquivo/audio.mp3">
    <p>Seu navegador não suporta o elemento de áudio.</p>
  </audio>

  <div class="controles">
    <button id="reproduzirPausar" onclick="alternarReproduzirPausar()" aria-controls="meuAudio">
      Reproduzir/Pausar
    </button>
    <input id="controleVolume" type="range" min="0" max="1" step="0.1" value="1" onchange="ajustarVolume()" aria-controls="meuAudio">
  </div>

  <div class="transcricao">
    <a href="transcricao.html">Leia a transcrição</a>
  </div>
</div>

Este exemplo mostra um player de áudio com recursos acessíveis:

• O elemento <audio> tem uma mensagem alternativa para navegadores que não o suportam.
• O botão de reproduzir/pausar e o controle deslizante de volume têm rótulos claros e atributos aria-controls para vinculá-los ao elemento de áudio.
• O controle deslizante de volume pode ser ajustado usando as teclas de seta do teclado.
• Um link para a transcrição é fornecido abaixo do player de áudio.

Suporte a Navegadores e Alternativas

O elemento HTML <audio> é compatível com a maioria dos navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. No entanto, navegadores mais antigos podem não ser compatíveis com a tag <audio> ou ter suporte limitado a certos formatos de áudio.

Para verificar se um navegador é compatível com o elemento <audio>, você pode usar JavaScript para testar a presença do objeto HTMLAudioElement:

if (typeof HTMLAudioElement !== 'undefined') {
  // O navegador é compatível com o elemento de áudio
} else {
  // O navegador não é compatível com o elemento de áudio
}

Se o navegador não for compatível com o elemento <audio>, você pode fornecer conteúdo alternativo dentro da tag <audio>. Esse conteúdo alternativo só será exibido se o navegador não puder reproduzir o áudio.

<audio src="caminho/para/arquivo/audio.mp3" controls>
  <p>Seu navegador não é compatível com o elemento de áudio.</p>
  <a href="caminho/para/arquivo/audio.mp3">Baixe o arquivo de áudio</a>
</audio>

Outra abordagem alternativa é usar os elementos <object> ou <embed> para incorporar um plugin de reprodutor de áudio, como Flash ou QuickTime. No entanto, esses plugins estão se tornando menos comuns e não são compatíveis com dispositivos móveis.

<audio src="caminho/para/arquivo/audio.mp3" controls>
  <object type="application/x-shockwave-flash" data="caminho/para/player.swf?audio=caminho/para/arquivo/audio.mp3">
    <param name="movie" value="caminho/para/player.swf?audio=caminho/para/arquivo/audio.mp3">
    <p>Seu navegador não é compatível com o elemento de áudio ou Flash.</p>
  </object>
</audio>

Para lidar com a compatibilidade entre navegadores de forma mais fácil, você pode usar bibliotecas de áudio HTML5 que fornecem uma interface de reprodutor de áudio consistente em diferentes navegadores. Algumas bibliotecas de áudio populares incluem:

Essas bibliotecas abstraem as diferenças entre navegadores e fornecem uma maneira unificada de trabalhar com áudio em suas páginas da web.

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js"></script>

<script>
  var som = new Howl({
    src: ['caminho/para/arquivo/audio.mp3', 'caminho/para/arquivo/audio.ogg'],
    html5: true,
    onplay: function() {
      console.log('A reprodução do áudio começou');
    },
    onend: function() {
      console.log('A reprodução do áudio terminou');
    }
  });

  som.play();
</script>

Neste exemplo, a biblioteca howler.js é incluída na página, e um novo objeto Howl é criado com as fontes de áudio e opções. A opção html5 é definida como true para priorizar a reprodução de áudio HTML5. Os callbacks onplay e onend são usados para registrar mensagens quando o áudio começa e termina de ser reproduzido. Por fim, o método play() é chamado para iniciar a reprodução do áudio.

Exemplos e Casos de Uso

O elemento HTML <audio> tem muitos usos para adicionar áudio às páginas da web. Aqui estão alguns exemplos:

<h2>Episódio mais recente do Podcast</h2>
<audio controls>
  <source src="caminho/para/podcast/episodio.mp3" type="audio/mpeg">
  <p>Seu navegador não suporta o elemento de áudio.</p>
</audio>
<p>Neste episódio, discutimos as últimas tendências em desenvolvimento web.</p>

<audio id="musicaDeFundo" loop>
  <source src="caminho/para/musica-de-fundo.mp3" type="audio/mpeg">
  <source src="caminho/para/musica-de-fundo.ogg" type="audio/ogg">
</audio>

<script>
  var musicaDeFundo = document.getElementById('musicaDeFundo');
  musicaDeFundo.volume = 0.5; // Define o volume para 50%
  musicaDeFundo.play(); // Começa a tocar a música de fundo
</script>

<div class="audio-player">
  <audio id="meuAudio">
    <source src="caminho/para/arquivo/audio.mp3" type="audio/mpeg">
    <source src="caminho/para/arquivo/audio.ogg" type="audio/ogg">
    <p>Seu navegador não suporta o elemento de áudio.</p>
  </audio>
  <div class="controles">
    <button id="botaoPlayPause" onclick="alternarPlayPause()">Play/Pause</button>
    <input id="controleVolume" type="range" min="0" max="1" step="0.1" value="1" onchange="ajustarVolume()">
    <span id="tempoAtual">0:00</span> / <span id="duracao">0:00</span>
  </div>
</div>

<script>
  var audio = document.getElementById('meuAudio');
  var botaoPlayPause = document.getElementById('botaoPlayPause');
  var controleVolume = document.getElementById('controleVolume');
  var exibicaoTempoAtual = document.getElementById('tempoAtual');
  var exibicaoDuracao = document.getElementById('duracao');

  function alternarPlayPause() {
    if (audio.paused) {
      audio.play();
      botaoPlayPause.textContent = 'Pause';
    } else {
      audio.pause();
      botaoPlayPause.textContent = 'Play';
    }
  }

  function ajustarVolume() {
    audio.volume = controleVolume.value;
  }

  audio.addEventListener('timeupdate', function() {
    exibicaoTempoAtual.textContent = formatarTempo(audio.currentTime);
  });

  audio.addEventListener('durationchange', function() {
    exibicaoDuracao.textContent = formatarTempo(audio.duration);
  });

  function formatarTempo(tempo) {
    var minutos = Math.floor(tempo / 60);
    var segundos = Math.floor(tempo % 60);
    return minutos + ':' + (segundos < 10 ? '0' : '') + segundos;
  }
</script>

Neste exemplo, o player de áudio personalizado tem um botão de play/pause, um controle deslizante de volume e mostra o tempo atual e a duração do áudio. O código JavaScript lida com a funcionalidade de play/pause, ajuste de volume e atualiza as exibições de tempo conforme o áudio é reproduzido.

Estes são apenas alguns exemplos de como você pode usar o elemento HTML <audio> para adicionar áudio às suas páginas da web. Seja incorporando podcasts, adicionando música de fundo ou criando players de áudio personalizados, o elemento <audio> oferece uma maneira simples de trabalhar com áudio no desenvolvimento web.