15.04.2025

Problemas ao Reproduzir Arquivos de Áudio ao Clicar em Botão com jQuery

Resposta Rápida

Para reproduzir áudio ao clicar em um botão usando jQuery, você pode usar o seguinte código:

// HTML: Seu arquivo de áudio
<audio id="audio" src="seu-audio.mp3"></audio>
// HTML: Botão "Reproduzir"
<button id="play">Reproduzir</button>

// jQuery: Iniciar a reprodução
$('#play').click(function() { $('#audio')[0].play(); });

Basta conectar seu arquivo de áudio "seu-audio.mp3" e clicar no botão #play para reproduzi-lo.

Garantindo Que o Áudio Está Pronto para Reproduzir

Para verificar se a faixa de áudio está pronta para reprodução, use o código abaixo:

// Verifica se o áudio está pronto para ser reproduzido
$('#audio').on('canplay', function() {
  console.log("Áudio está pronto para reproduzir!");
});

Garantimos que o áudio esteja pronto para reprodução usando o evento canplay.

Gerenciando Múltiplos Arquivos de Áudio

Se você precisar gerenciar vários arquivos de áudio, o seguinte código pode ajudar:

// Cria um novo elemento de áudio
var audio = new Audio();
audio.src = 'seu-audio.mp3';
audio.id = 'audioClone';
$('body').append(audio);

$('#play').click(function() { $('#audioClone')[0].play(); });

Criar elementos <audio> dinâmicos oferece um controle mais flexível.

Controlando o Processo de Reprodução de Áudio

Você pode controlar o processo de reprodução de áudio: parar o áudio, redefinir o tempo de reprodução e iniciar a reprodução novamente:

// Para a reprodução e redefine o tempo da faixa
$('#stop').click(function() {
  var audio = $('#audio')[0];
  audio.pause();             // Para a reprodução
  audio.currentTime = 0;     // Redefine o tempo de reprodução
});

// Reinicia automaticamente a faixa após ela terminar
$('#audio').on('ended', function() {
  this.currentTime = 0;     // Redefine o tempo de reprodução
  this.play();              // Inicia a reprodução novamente
});

Visualização

Clicar no botão "Reproduzir" é como colocar a agulha em um disco de vinil:

$('#playButton').click(function() {
  $('audio#myTune')[0].play();  // A melodia começa a tocar
});

Comparação antes e depois de clicar:

Antes: [🔳🔇]
Depois: [▶️🎶]

Garantindo Compatibilidade com Diferentes Navegadores

Para garantir que os arquivos de áudio sejam reproduzidos corretamente em vários navegadores, use múltiplos formatos:

<audio id="audio">
  <source src="seu-audio.mp3" type="audio/mpeg">
  <source src="seu-audio.ogg" type="audio/ogg">
</audio>
<button id="play">Reproduzir</button>

E verifique o formato suportado usando canPlayType():

if ($('#audio')[0].canPlayType('audio/mpeg')) {
  // Reproduzir a faixa
} else {
  // Atualize seu navegador
}

Dessa forma, seu áudio será reproduzido suavemente em qualquer navegador.

Pré-carregando Arquivos de Áudio

Para reprodução instantânea de arquivos de áudio, é melhor pré-carregá-los:

// Pré-carrega o áudio
$('#audio').attr('preload', 'auto');
// Começa o pré-carregamento
$('#audio')[0].load();

Assim, seus arquivos de áudio estarão prontos para reprodução instantânea.

Informando os Usuários Sobre o Tempo Atual de Reprodução

Mantenha os usuários informados sobre o tempo atual de reprodução do áudio:

// Notifica sobre o tempo atual de reprodução
$('#audio').on('timeupdate', function() {
  $('#currentTime').text(this.currentTime);    // Tempo de reprodução: 2:00/4:00
});

Dessa forma, os usuários estarão sempre cientes do estado atual da reprodução.

Recursos Úteis

1. evento click | Documentação da API do jQuery — Documentação sobre o método .click() em jQuery.
2. JavaScript Audio Play on click - Stack Overflow — Discussão sobre como tocar áudio ao clicar no Stack Overflow.
3. HTMLAudioElement - Web APIs | MDN — Documentação sobre o elemento <audio> do MDN.
4. Conteúdo de vídeo e áudio - Aprenda desenvolvimento web | MDN — Gerenciando conteúdo de vídeo e áudio usando o MDN.
5. Introdução à Web Audio API | Artigos | web.dev — Introdução à Web Audio API.
6. GitHub - jplayer/jPlayer: jPlayer : Áudio HTML5 e Vídeo para jQuery — jPlayer, um plugin para reprodução de áudio e vídeo em jQuery.

Video

Navigation