Como tocar áudio com JavaScript

Neste artigo você vai aprender a como tocar áudio com JavaScript, ou seja, dar play em arquivos de áudio via JS

Fala programador(a), beleza? Bora aprender mais sobre áudio e JavaScript!

Para dar play em um arquivo de áudio, você vai precisar disponibilizar ele na pasta do seu projeto ou acessá-lo de algum servidor

O importante é ter acesso fácil a este arquivo

Então instanciamos uma nova classe chamada Audio, nativa do próprio JS, passando áudio como parâmetro

E para executá-lo basta utilizar o método play

Veja um exemplo na prática:

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 15min

Conhecer formação

const audio = new Audio('meu_audio.mp3');

audio.play();

Com este código você consegue executar um áudio na página

Pode até colocar um evento que vai disparar ele também, como em um click

Aí vai depender da necessidade do seu projeto 🙂

Conclusão

Neste artigo você aprendeu a tocar áudio com JavaScript, ou seja, dar play em um áudio

Utilizamos a classe nativa Audio, colocando como argumento o nosso arquivo

Por fim foi necessário utilizar o método play, para executar o áudio

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!

Como pausar e parar um áudio com JavaScript:

Dar play é só metade da história, né?

Para pausar, usamos o método pause, bem no esquema do play

audio.pause();

Mas repara: pausar não é a mesma coisa que parar do zero

O pause só congela onde tá, se você der play de novo ele continua de onde parou

Para realmente PARAR e voltar pro começo, você pausa e zera a posição do áudio com a propriedade currentTime

audio.pause(); audio.currentTime = 0;

Agora sim, no próximo play ele toca desde o início =)

Como controlar o volume e repetir o áudio:

Duas coisas que todo mundo acaba precisando: volume e loop

O volume é controlado pela propriedade volume, que vai de 0 (mudo) até 1 (volume cheio)

audio.volume = 0.5;

Esse 0.5 aí deixa na metade, ajusta pro que fizer sentido no seu projeto

Já pra fazer o áudio repetir sozinho, é só ligar a propriedade loop

audio.loop = true;

Assim que ele termina, começa de novo automático, massa pra som de fundo por exemplo

Tocando o áudio em um clique:

Lá em cima falei que dá pra disparar o áudio num evento, bora ver na prática?

A ideia é simples: você pega um botão e liga o play dele no clique

const botao = document.querySelector(‘#tocar’);

botao.addEventListener(‘click’, () => { const audio = new Audio(‘meu_audio.mp3’); audio.play(); });

Agora o som só toca quando o usuário clica, que é o comportamento que a maioria dos navegadores espera

Dá pra trocar o click por qualquer outro evento, vai da necessidade do seu projeto 🙂

E se o áudio não tocar? A política de autoplay:

Se liga nisso porque já me pegou também

Os navegadores hoje bloqueiam áudio que tenta tocar sozinho, sem o usuário ter interagido com a página

Então se você chamar o play no carregamento, sem clique nenhum, é bem provável que o navegador barre e o som não saia

O método play retorna uma Promise, dá pra tratar isso e saber quando foi bloqueado

const audio = new Audio(‘meu_audio.mp3’);

audio.play().catch((erro) => { console.log(‘O navegador bloqueou o autoplay:’, erro); });

A saída na prática é o que já vimos ali em cima: dispare o áudio a partir de um clique ou de outra interação do usuário, aí ele toca numa boa