Automating BBC iPlayer and BBC Sounds

JavaScript code for automating these websites, for convenience and for accessibility: BBC iPlayer - Home BBC Sounds - Music. Radio. Podcasts Code tested with Chrome, March 2026.

Get/set playback rate


Code: Select all


//get playback rate (default: 1.0):
document.querySelector('smp-toucan-player').playbackRate;

//set playback rate:
document.querySelector('smp-toucan-player').playbackRate = 1.5;

Get/set elapsed time, get duration


Code: Select all


//get elapsed time (seconds and fractions of seconds):
document.querySelector('smp-toucan-player').currentTime;

//get duration (seconds and fractions of seconds, read-only):
document.querySelector('smp-toucan-player').duration;

//rewind by 5 seconds:
document.querySelector('smp-toucan-player').currentTime -= 5;

//fast-forward by 5 seconds:
document.querySelector('smp-toucan-player').currentTime += 5;

//set elapsed time:
document.querySelector('smp-toucan-player').currentTime = 0;

Get/set volume, get/set mute state

Note: volumes for integers 1 to 11 inclusive, on the volume control, correspond to: 0.09, 0.18, 0.27, 0.36, 0.45, 0.55, 0.64, 0.73, 0.82, 0.91, 1. I.e. if you want volume n, specify n/11 rounded to 2 decimal places. E.g. if you want volume 5, specify 5/11 rounded to 2 decimal places: 0.45.


Code: Select all


//get volume (minimum: 0.0, maximum: 1.0):
document.querySelector('smp-toucan-player').volume;

//set volume to max:
document.querySelector('smp-toucan-player').volume = 1;

//set volume to half:
document.querySelector('smp-toucan-player').volume = 0.5;

//get mute state (boolean value, true/false):
document.querySelector('smp-toucan-player').muted;

//set mute to on:
document.querySelector('smp-toucan-player').muted = true;

//set mute to off:
document.querySelector('smp-toucan-player').muted = false;

//toggle mute on/off:
if (document.querySelector('smp-toucan-player').muted)
	document.querySelector('smp-toucan-player').muted = false;
else
	document.querySelector('smp-toucan-player').muted = true;

//toggle mute on/off (one-liner):
document.querySelector('smp-toucan-player').muted = !document.querySelector('smp-toucan-player').muted;

//toggle mute on/off (one-liner) (uses XOR assignment operator):
//note: this sets the state to 1/0 rather than true/false:
document.querySelector('smp-toucan-player').muted ^= 1;

Get/set play/pause state


Code: Select all


//get play/pause state (boolean value, true/false, read-only):
document.querySelector('smp-toucan-player').paused;

//pause the video:
document.querySelector('smp-toucan-player').pause();

//play/resume the video:
document.querySelector('smp-toucan-player').play();

//toggle play/pause:
if (document.querySelector('smp-toucan-player').paused)
	document.querySelector('smp-toucan-player').play();
else
	document.querySelector('smp-toucan-player').pause();

//toggle play/pause (one-liner):
oPlayer = document.querySelector('smp-toucan-player'); oPlayer.paused ? oPlayer.play() : oPlayer.pause();

Get/set subtitles on/off state


Code: Select all


//get the subtitles on/off state (boolean value, true/false):
document.querySelector('smp-toucan-player').subtitles.isOn;

//set the subtitles to on:
document.querySelector('smp-toucan-player').subtitles.on();

//set the subtitles to off:
document.querySelector('smp-toucan-player').subtitles.off();

//toggle subtitles on/off:
if (document.querySelector('smp-toucan-player').subtitles.isOn)
	document.querySelector('smp-toucan-player').subtitles.off();
else
	document.querySelector('smp-toucan-player').subtitles.on();

//toggle subtitles on/off (one-liner):
oPlayer = document.querySelector('smp-toucan-player'); oPlayer.subtitles.isOn ? oPlayer.subtitles.off() : oPlayer.subtitles.on();

Get/set skip interval (e.g. 5/10/20 seconds)

There are many terms for skip interval: E.g. seek amount, seek interval. E.g. skip duration, skip interval. Note: in BBC iPlayer, toggling the subtitles on/off, via 's', will revert the intervals, back to the default values. The revert can be blocked as demonstrated in the code below. Note: in BBC Sounds, the intervals will almost immediately revert. The revert can be blocked as demonstrated in the code below.


Code: Select all


//note: all of these are for a video (e.g. BBC iPlayer):
//using 'smp-video-layout', not 'smp-audio-layout':

//one-liner to set both skip intervals to 5 seconds:
document.querySelector('smp-toucan-player').shadowRoot.querySelector('smp-video-layout').shadowRoot.querySelector('smp-core-controls').shadowRoot.querySelectorAll('smp-interval-button').forEach(o => o.interval = 5);

//get the skip intervals:
oBtns = document.querySelector('smp-toucan-player').shadowRoot.querySelector('smp-video-layout').shadowRoot.querySelector('smp-core-controls').shadowRoot.querySelectorAll('smp-interval-button');
vIvl1 = oBtns[0].interval;
vIvl2 = oBtns[1].interval;

//set the skip intervals:
oBtns = document.querySelector('smp-toucan-player').shadowRoot.querySelector('smp-video-layout').shadowRoot.querySelector('smp-core-controls').shadowRoot.querySelectorAll('smp-interval-button');
oBtns[0].interval = 5;
oBtns[1].interval = 5;
//use these lines to prevent the skip intervals reverting to the default values:
Object.defineProperty(oBtns[0], 'interval', {get:()=>'5', set:()=>{}});
Object.defineProperty(oBtns[1], 'interval', {get:()=>'5', set:()=>{}});


Code: Select all


//note: all of these are for audio (e.g. BBC Sounds):
//using 'smp-audio-layout', not 'smp-video-layout':

//one-liner to set both skip intervals to 5 seconds:
document.querySelector('smp-toucan-player').shadowRoot.querySelector('smp-audio-layout').shadowRoot.querySelector('smp-core-controls').shadowRoot.querySelectorAll('smp-interval-button').forEach(o => o.interval = 5);

//get the skip intervals:
oBtns = document.querySelector('smp-toucan-player').shadowRoot.querySelector('smp-audio-layout').shadowRoot.querySelector('smp-core-controls').shadowRoot.querySelectorAll('smp-interval-button');
vIvl1 = oBtns[0].interval;
vIvl2 = oBtns[1].interval;

//set the skip intervals:
oBtns = document.querySelector('smp-toucan-player').shadowRoot.querySelector('smp-audio-layout').shadowRoot.querySelector('smp-core-controls').shadowRoot.querySelectorAll('smp-interval-button');
oBtns[0].interval = 5;
oBtns[1].interval = 5;
//use these lines to prevent the skip intervals reverting to the default values:
Object.defineProperty(oBtns[0], "interval", {get:()=>"5", set:()=>{}});
Object.defineProperty(oBtns[1], "interval", {get:()=>"5", set:()=>{}});

Get/set autoplay state


Code: Select all


//note: all of these are for a video (e.g. BBC iPlayer):
//using 'smp-video-layout', not 'smp-audio-layout':

//get the autoplay on/off state (boolean value, true/false, setting the value doesn't update the autoplay state):
document.querySelector('smp-toucan-player').shadowRoot.querySelector('smp-video-layout').shadowRoot.querySelector('smp-secondary-controls').shadowRoot.querySelector('smp-playback-settings-panel').shadowRoot.querySelector('smp-autoplay-setting').shadowRoot.querySelector('smp-toggle')._on;

//get the autoplay on/off state (string value, 'true'/'false', setting the value doesn't update the autoplay state):
document.querySelector('smp-toucan-player').shadowRoot.querySelector('smp-video-layout').shadowRoot.querySelector('smp-secondary-controls').shadowRoot.querySelector('smp-playback-settings-panel').shadowRoot.querySelector('smp-autoplay-setting').shadowRoot.querySelector('smp-toggle').shadowRoot.querySelector('div').ariaChecked;

//set the autoplay state to off:
document.querySelector('smp-toucan-player').shadowRoot.querySelector('smp-video-layout').shadowRoot.querySelector('smp-secondary-controls').shadowRoot.querySelector('smp-playback-settings-panel').shadowRoot.querySelector('smp-autoplay-setting').shadowRoot.querySelector('smp-toggle').setOff();

//set the autoplay state to on:
document.querySelector('smp-toucan-player').shadowRoot.querySelector('smp-video-layout').shadowRoot.querySelector('smp-secondary-controls').shadowRoot.querySelector('smp-playback-settings-panel').shadowRoot.querySelector('smp-autoplay-setting').shadowRoot.querySelector('smp-toggle').setOn();

//toggle the autoplay state:
document.querySelector('smp-toucan-player').shadowRoot.querySelector('smp-video-layout').shadowRoot.querySelector('smp-secondary-controls').shadowRoot.querySelector('smp-playback-settings-panel').shadowRoot.querySelector('smp-autoplay-setting').shadowRoot.querySelector('smp-toggle').flip();


Code: Select all


//note: all of these are for audio (e.g. BBC Sounds):
//using 'smp-audio-layout', not 'smp-video-layout':

//get the autoplay on/off state (boolean value, true/false, setting the value doesn't update the autoplay state):
document.querySelector('smp-toucan-player').shadowRoot.querySelector('smp-audio-layout').shadowRoot.querySelector('smp-secondary-controls').shadowRoot.querySelector('smp-playback-settings-panel').shadowRoot.querySelector('smp-autoplay-setting').shadowRoot.querySelector('smp-toggle')._on;

//get the autoplay on/off state (string value, 'true'/'false', setting the value doesn't update the autoplay state):
document.querySelector('smp-toucan-player').shadowRoot.querySelector('smp-audio-layout').shadowRoot.querySelector('smp-secondary-controls').shadowRoot.querySelector('smp-playback-settings-panel').shadowRoot.querySelector('smp-autoplay-setting').shadowRoot.querySelector('smp-toggle').shadowRoot.querySelector('div').ariaChecked;

//set the autoplay state to off:
document.querySelector('smp-toucan-player').shadowRoot.querySelector('smp-audio-layout').shadowRoot.querySelector('smp-secondary-controls').shadowRoot.querySelector('smp-playback-settings-panel').shadowRoot.querySelector('smp-autoplay-setting').shadowRoot.querySelector('smp-toggle').setOff();

//set the autoplay state to on:
document.querySelector('smp-toucan-player').shadowRoot.querySelector('smp-audio-layout').shadowRoot.querySelector('smp-secondary-controls').shadowRoot.querySelector('smp-playback-settings-panel').shadowRoot.querySelector('smp-autoplay-setting').shadowRoot.querySelector('smp-toggle').setOn();

//toggle the autoplay state:
document.querySelector('smp-toucan-player').shadowRoot.querySelector('smp-audio-layout').shadowRoot.querySelector('smp-secondary-controls').shadowRoot.querySelector('smp-playback-settings-panel').shadowRoot.querySelector('smp-autoplay-setting').shadowRoot.querySelector('smp-toggle').flip();

Get/set full screen


Code: Select all


//get the fullscreen on/off state (document.fullscreenElement is a non-null object if fullscreen is on, else null):
!!document.fullscreenElement;

//make fullscreen:
document.querySelector('smp-toucan-player').requestFullscreen();

//undo fullscreen:
document.exitFullscreen();

//toggle fullscreen:
if (document.fullscreenElement)
	document.exitFullscreen();
else
	document.querySelector('smp-toucan-player').requestFullscreen();

//toggle fullscreen (one-liner):
document.fullscreenElement ? document.exitFullscreen() : document.querySelector('smp-toucan-player').requestFullscreen();

Notes

The JavaScript code examples give you more granular control over the playback rate, elapsed time and volume than you would get ordinarily. The JavaScript code examples also give you the ability to set the skip intervals, which you couldn't do otherwise. The smp-toucan-player object has available many of the standard media/video/audio element methods/properties. Links: HTMLMediaElement - Web APIs | MDN HTMLVideoElement - Web APIs | MDN HTMLAudioElement - Web APIs | MDN Use 'console.dir' in the console, to investigate the methods/properties for an object. E.g. console.dir(document.querySelector('smp-toucan-player').subtitles);

How to Run JavaScript in a Web Browser

Use a shortcut key to open the console, and paste the JavaScript there: Web Browser Shortcut Keys and Tips. Paste JavaScript into the web browser address bar: Web Browser Shortcut Keys and Tips. WARNING: be careful because people could give you malicious JavaScript code to run. Note: when experimenting with JavaScript, some actions can cause things to stop working temporarily. E.g. when I experimented with toggling autoplay, some actions caused the autoplay button to stop working. Refreshing the tab typically restores everything to normal.