Changing the Playback Speed on Spotify's Web Player

2021-04-24

The Spotify mobile app allows one to change the playback speed for podcasts only. However, Spotify's web player (https://open.spotify.com/) and Spotify's desktop apps (which appear to be built using Electron, i.e., the desktop apps bundle a version of Chrome that interacts with a Spotify web API) don't provide a variable playback speed setting, which would be useful for speeding up podcasts or slowing down songs in order to practice instruments or dance choreography.

To allow users to change the playback speed for both podcasts and music within Spotify's web player, GitHub user intOrfloat created a Chrome extension named spotifySpeedExtension. This Chrome extension injects a script into the web player's DOM that captures any audio or video element on creation by the Spotify web player code. These elements represent the media player for the song or video being played. As these elements are HTMLMediaElements, they have a property named "playbackRate", which allows for setting the playback speed. So users can control the playback speed, spotitySpeedExtension appends an input field right next to the volume bar where users can enter the desired playback speed as a percentage relative to the original speed (entering "50" halves the original speed, while entering "200" doubles it). Audio is muted when the entered speed is outside the browser's supported range. An interesting benefit of this extension is that the playback speed can be controlled in a granular fashion, whereas the Spotify mobile app only offers a few fixed options.

In March 2021, spotifySpeedExtension stopped working when Spotify updated the code of their web player. Specifically, the extension attempts to attach the speed input field to an element in the DOM with the class name "now-playing-bar__right". Since that element was removed from the DOM, the extension can't add the input field. To fix this issue, I created a pull request to update the extension so that the input field is appended to an element that is still present in Spotify's updated DOM. Since the extension doesn't appear to be actively maintained anymore, I provided instructions on how to install the extension with my fix manually.