1

Estou criando uma extensão bem simples no Chrome para o Whatsapp Web de acelerar o áudio em 1.5x, mas até agora só consegui fazer a função executar, e ela fica executando até que a página seja recarregada. Estou tentando fazer com que, ao clicar novamente, o evento parasse e o áudio voltasse à velocidade normal. Mas não sei como encerrar esse evento. Deveria usar async/await? Promises?

const interval = setInterval(() => {
   const header = document.querySelector('._1QUKR')
   if (header) {
      console.log(header)
      clearInterval(interval)

      const button = document.createElement("button")
      button.innerHTML = '1.5'
      button.classList.add('twoTimesButton')

      button.addEventListener('click', () => {
         const audios = document.querySelectorAll('audio')
         console.log(audios)
         audios.forEach((audio) => {
            console.log(audio)
            audio.playbackRate = 1.5
         })

      button.addEventListener('click', function() {
         audios.pause()
      })   
      })

      header.appendChild(button)
   }
}, 1000)

Estou iniciando meus estudos em Javascript e eu já dei uma boa olhada no que já existe de pergunta por aqui e vi um tópico que realmente parece ser algo bem parecido com o que estou precisando, mas simplesmente não consegui implementar a mesma lógica.

1 Resposta 1

1

Vendo seu código, vi que você criou um botão novo chamado de button, onde ao ser clicado, os áudios ficam com a velocidade de 1.5x

Você poderia criar dois botões, onde um botão poderia pegar o playbackRate atual do áudio e reduzir em 0.1, por exemplo, e o outro botão faria exatamente o oposto, aumentando o playbackRate em 0.1, isso já seria o suficiente para resolver seu problema.

Para isso, é só você criar os botões da mesma maneira, adicionar um eventListener de clique e fazer a ação.

document.querySelectorAll("audio").forEach(audio => audio.playbackRate += 0.1)

Caso queira "resetar" o playbackRate para a velocidade normal utilizando o mesmo botão, ao realizar a ação de clique, você pode fazer uma validação, e se o playbackRate estiver diferente de 1, o que significa que ele foi alterado, você volta ele para o valor desejado.

audio.forEach(() => {
 if (audio.playbackRate != 1)
    audio.playbackRate = 1
});
1
  • Implementei as mudanças e ficou realmente mais legal. Valeu! Commented 5/09/2020 às 0:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .