☰

Podbean - Allow Adjusting of Podcast Speed and add Rewind/Fast forward buttons (with hotkeys)

Allows you to adjust the playback speed of podcasts by adjusting a progress bar above the play button. Also lets you use left arrow to go back 5 seconds and right arrow to go forward 5 seconds. Space bar pauses and plays. Also added rewind and fast forward buttons incase the hotkeys don't work.

// ==UserScript==
// @name         Podbean - Allow Adjusting of Podcast Speed and add Rewind/Fast forward buttons (with hotkeys)
// @version      1.2
// @description  Allows you to adjust the playback speed of podcasts by adjusting a progress bar above the play button. Also lets you use left arrow to go back 5 seconds and right arrow to go forward 5 seconds. Space bar pauses and plays. Also added rewind and fast forward buttons incase the hotkeys don't work.
// @author       Threeskimo
// @match        *://*.podbean.com/*
// @match        *://*.acast.com/*
// @match        https://www.podbean.com/media/share/dir-sqmuj-15d03575?utm_campaign=w_share_ep&utm_medium=dlink&utm_source=w_share
// @icon         https://www.google.com/s2/favicons?sz=64&domain=podbean.com
// @grant        none
// @namespace https://greasyfork.org/users/695986
// ==/UserScript==

// Set speed var so we can continue setting audio speed after pauses
var speed = "1";

(function() {
    'use strict';

    // Create speed progress bar
    var progressBar = document.createElement('input');
    progressBar.setAttribute('type', 'range');
    progressBar.setAttribute('min', 1);
    progressBar.setAttribute('max', 2);
    progressBar.setAttribute('step', 0.25);
    progressBar.setAttribute('value', 1);
    progressBar.setAttribute('style', 'width: 100px; height: 2px');
    progressBar.style.borderRadius = '5px';

    // Create speed display div for showing the speed
    var speedDisplay = document.createElement('div');
    speedDisplay.innerHTML = "1x";
    speedDisplay.setAttribute('style', 'display: inline-block; font-size: 14px; margin-left:10px;');

    // Create rewind/fastforward div w/ buttons
    var rewindDisplay = document.createElement('div');
    rewindDisplay.innerHTML = "<button id='rewindButton'> << </button><button id='fastforwardButton'> >> </button>";
    rewindDisplay.setAttribute('style', 'display: inline-block; font-size: 10px; padding:3px;');

    // Add elements to page
    var body = document.getElementsByTagName('body')[0];
    body.insertBefore(speedDisplay, body.firstChild);
    body.insertBefore(progressBar, body.firstChild);
    body.insertBefore(rewindDisplay, body.firstChild);

    // Setup Rewind and Fast Forward buttons
    var rewindButton = document.getElementById("rewindButton");
    var fastforwardButton = document.getElementById("fastforwardButton");

    // Function to Rewind all audio on page by 5 seconds on [<<] button click
    rewindButton.addEventListener("click", function() {
        var audioElement = document.getElementsByTagName("audio");
        for (var i = 0; i < audioElement.length; i++) {
            audioElement[i].currentTime -= 5;
        }
    });

    // Function to Fast forward all audio on page by 5 seconds on [>>] button click
    fastforwardButton.addEventListener("click", function() {
        var audioElement = document.getElementsByTagName("audio");
        for (var i = 0; i < audioElement.length; i++) {
            audioElement[i].currentTime += 5;
        }
    });

    // Update audio speed and display on progress bar change
    progressBar.oninput = function() {
        var audioElements = document.getElementsByTagName('audio');
        for (var i = 0; i < audioElements.length; i++) {
            audioElements[i].playbackRate = this.value;
            speed = this.value;
        }
        speedDisplay.innerHTML = this.value + 'x';
    }

  // Add "scrolling=no" to the podcast iframe to avoid weird scrolling issues
  const iframes = document.querySelectorAll('iframe');
  iframes.forEach(iframe => {
    iframe.setAttribute('scrolling', 'no');
    iframe.style.height = "80px";
  });

})();

// Set audio speed every 1 second incase the audio pauses. (When the audio is paused, it weirdly removes the playbackRate on the audio tag, this just "resets" it to the correct speed)
var intervalId = window.setInterval(function(){
  var audioElements = document.getElementsByTagName('audio');
        for (var i = 0; i < audioElements.length; i++) {
            audioElements[i].playbackRate = speed;
        }
}, 1000);


// Allow arrow keys to rewind and fast forward audio by 5 seconds.  Also let Spacebar pause and play audio.
document.addEventListener('keydown', (event) => {
    var progressHolder = document.querySelector(".vjs-progress-holder");
    var startHolder = document.querySelector(".vjs-play-control");
    // Check for left/right arrow key and spacebar
    if (event.key === 'ArrowLeft') {
        // Rewind audio by 5 seconds
        const audio = document.querySelector('audio');
        progressHolder.classList.add("selected");
        audio.currentTime -= 5;
    } else if (event.key === 'ArrowRight') {
        // Fast forward audio by 5 seconds
        const audio = document.querySelector('audio');
        progressHolder.classList.add("selected");
        audio.currentTime += 5;
        // Space bar starts and stops podcast
    } else if (event.key === ' ') {
        // pause or play audio
        var playButton = document.querySelector('.vjs-play-control');
        playButton.click();
    }
});