Criando função diretamente no addEventListener para manipular som com HTML + JS

#HTML
#JavaScript

Vim compartilhar com vocês uma maneira de adicionar funções dentro de um addEventListener para reproduzir, pausar, repetir e silenciar um áudio ao clicar num botão ou arrastar uma barra de volume.

Estas funcionalidades foram adicionadas porque senti falta de algum efeito sonoro no Jogo da Memória ensinado no meu último Bootcamp, então procurei opções pra incluir esse detalhe que pra mim fez bastante diferença.

A primeira parte mostra o que foi importado no arquivo .html e na segunda, as funções do arquivo javascript.

Parte 1

Primeiro, aqui está a parte do arquivo html que mostra a instanciação de um áudio numa pasta à parte chamada “sounds” com seu id para ser encontrado e manipulado no arquivo .js:

Aqui está a parte da seção do botão em uma tag específica, pra que ele não faça parte da seção do resto da aplicação/jogo:

Obs.: como pode ser visto abaixo, foi usada uma imagem para ser o botão. De qualquer forma, o que vai ser capturado é a class dele, seja uma imagem ou não.

<div>

</div>

</botoes>

Na tag input, o range informa que o tipo do elemento vai ser uma barra com escala regulável. Na mesma linha, encontramos min e max que armazenam respectivamente o valor mínimo e máximo desse elemento, enquanto o step adiciona ou decrementa usando o valor informado.

Parte 2

No arquivo .js, adicionamos uma constante para armazenar a chamada do arquivo de áudio, uma segunda constante para capturar a identificação da imagem que representa o botão do áudio e outra para o input (barra de volume).

const referenciaDoAudio = document.getElementById(‘id-audio’);

const referenciaDaImagemDoBotao = document.querySelector('imagem’);

const referenciaDoInput = document.getElementById(‘volume’);

Com a captura do áudio feita pela constante, é possível adicionar agora a ação desejada. No meu projeto, as funções foram para reproduzir o som com o método .play() ; pausar com o método .pause() ; repetir o som sempre que chegasse ao fim com .loop ; e regular o volume usando o .volume, acompanhado do this.value.

A função abaixo serve para reproduzir e repetir ou pausar o áudio a partir do clique de um único botão, junto com uma variável (somLigado) para controle de estado do áudio:

let somLigado = true;

referenciaDaImagemDoBotao.addEventListener('click', function() {

if (somLigado === true) {

referenciaDoAudio.play();

referenciaDoAudio.loop = true;

somLigado = false;

} else {

referenciaDoAudio.pause();

somLigado = true;

}

})

Esta outra função manipula a barra de volume usando a constante que captura o arquivo de áudio:

referenciaDoInput.addEventListener('click', function() {

referenciaDoAudio.volume=this.value;

})

O evento de clique vai se movimentar de acordo com o valor do step para modular a altura do volume, definida ao soltar o mouse em determinada posição.

Link do repositório: https://github.com/Jumanjidev/jogo-da-memoria_MortalKombat

-----------

Espero que esse artigo tenha sido útil para futuras implementações e, quem sabe, incentivar àquelas pessoas no início da estrada de desenvolvimento, assim como eu, a melhorarem suas habilidades sempre com curiosidade e determinação.