One of my favorite features in podcast apps is their ability to change the playback speed. However, this helpful feature rarely extends to audio players found in web browsers. Many podcasts I listen to average an hour in length and include a lot of dialog which I prefer to digest at a slightly faster rate (1.5x). Fortunately, there is a simple hack that allows you to change the playback speed of any HTML audio player.

TL;DR

If you don’t have any desire to work in your web browser’s JavaScript console, don’t worry. I’ve created a bookmarklet which will allow you to listen to any HTML audio player at 1.5x speed. It’s important to note that this hack only works with HTML audio and not iframes or flash-based players.

Drag the button below to your bookmarks bar. Go to your favorite podcast website and click the bookmarklet to change the playback rate for any audio player on the page.

How It Works

The HTML audio element has a number of controls that are available by default. These controls include play, seeking and volume. Unfortunately playback speed is not among this list of controls. Let’s look at a different way to change the playback speed.

We’ll need to use the browser’s JavaScript console to add a few lines of code. You can open the JavaScript console in Google Chrome by selecting View > Developer > JavaScript Console or in Mozilla Firefox by selecting Tools > Web Developer > Web Console.

This hack only requires a few lines of code and is very easy to understand. First we need to identify all the HTML audio players on the page and assign them to a JavaScript array. Then we can loop through that array and set the playback rate for each to a numeric value. Here is the complete code:

var audioPlayer = document.getElementsByTagName('audio');
for (i = 0; i < audioPlayer.length; i++) { 
    audioPlayer[i].addEventListener('playing', function(){
        this.playbackRate = 1.5;
    });
}

You may find that different playback rates work better for certain shows. So tinker with it until you find the right fit. If you want a good laugh, try setting the playbackRate to 0.5!

About The Author

Matt Litzinger headshot

Matt is a New Hampshire-based web developer focused on UX and digital accessibility.