Whatsapp Web Speedup audio

whatsapp_web_speedup_audio.js

// ==UserScript==
// @name         Whatsapp Audio Speedup
// @namespace    https://palhari.dev
// @version      0.1
// @description  try to take over the world!
// @author       Pedro Palhari
// @match        https://web.whatsapp.com/*
// @grant        none
// ==/UserScript==

(function () {
  function generateAudioSpeedButton(audio, times) {
    let aComponent = document.createElement("a");
    aComponent.innerText = `${times}x`;

    //<a> Styles
    aComponent.style.marginLeft = "3px";
    aComponent.style.marginRight = "3px";
    aComponent.style.fontSize = "12px";
    aComponent.style.cursor = "pointer";

    // When generated, audio is always at 1x
    if (times == 1) {
      aComponent.style.textDecoration = "underline";
    }

    aComponent.onclick = () => {
      if (audio.velocityComponents) {
        //Generated and added the components, let's do a toggle.
        audio.velocityComponents.forEach(
          (a) => (a.style.textDecoration = "none")
        );

        aComponent.style.textDecoration = "underline";
      }

      audio.playbackRate = times;
    };

    return aComponent;
  }

  /**
   * Injected two vars on the <audio>
   * alreadyInjected: boolean, if this audio is already processed
   * velocityComponents: HTMLAnchorElement[], the <a/>s for toggling the audio sped
   */

  setInterval(() => {
    let audioList = Array.from(document.querySelectorAll("audio"));

    audioList.forEach((audio) => {
      if (audio.alreadyInjected) return;

      console.log("Injected audio commands!");

      audio.alreadyInjected = true;

      let chatAudioParent =
        audio.parentElement.parentElement.parentElement.parentElement
          .parentElement.parentElement;

      let component_5x = generateAudioSpeedButton(audio, 0.5);
      let component1x = generateAudioSpeedButton(audio, 1);
      let component1_5x = generateAudioSpeedButton(audio, 1.5);
      let component2x = generateAudioSpeedButton(audio, 2);

      audio.velocityComponents = [
        component_5x,
        component1x,
        component1_5x,
        component2x,
      ];

      let audioContainer = document.createElement("div");
      audioContainer.style.marginBottom = "18px";
      //Append them all
      audio.velocityComponents.forEach((c) => audioContainer.appendChild(c));

      chatAudioParent.appendChild(audioContainer);
    });
  }, 1000);
})();