BBC Sounds Radio Player

Open bbc-sounds in Script Kit

Play the main BBC Radio stations, with a nice little visual as to what the current show is. Easy to add new station just by changing the choices passed to station. Forgive me for putting 6music first, although, I'm not really sorry about that 😛

I'm assuming this won't work well for anybody outside of the UK unfortunately.

// Name: BBC Sounds Player
// Description: Stream a radio station from BBC Sounds
// Author: Josh Davenport-Smith
// Twitter: @jdprts

import "@johnlindquist/kit";
import { WidgetAPI } from "@johnlindquist/kit/types/pro";

const PLAYER_WIDTH = 180;
const PLAYER_HEIGHT = 195;

const getStyles = () => `
:root {
    --player-width: ${PLAYER_WIDTH}px;
    --player-height: ${PLAYER_HEIGHT}px;
    --header-offset: 25px;
    --footer-offset: 25px;
    --scale: 2.2;
}
 
#player {
    width: var(--player-width);
    height: var(--player-height);
    overflow: hidden;
    position: relative;
}
 
iframe {
    position: absolute;
    left: 0;
    width: calc(var(--player-width) * var(--scale));
    height: calc((var(--player-height) * var(--scale)) + (var(--header-offset) * var(--scale)) + (var(--footer-offset) * var(--scale)));
    top: calc(var(--header-offset) * -1);
    transform: scale(calc(1 / var(--scale)));
    transform-origin: 0 0;
}
`;

const getScripts = (station: string) => `
(() => {
    const playerContainer = document.getElementById('player');
    const url = 'https://www.bbc.co.uk/sounds/player/bbc_${station}';
    const iframe = document.createElement('iframe');
    iframe.setAttribute('src', url);
    iframe.setAttribute('enablejsapi', true);
    playerContainer.appendChild(iframe);
})();
`;

const station = await arg('Select station', [
    {
        name: '6 Music',
        value: '6music',
        img: 'https://sounds.files.bbci.co.uk/3.1.5/networks/bbc_6music/colour_default.svg',
    },
    {
        name: 'Radio 1',
        value: 'radio_one',
        img: 'https://sounds.files.bbci.co.uk/3.1.5/networks/bbc_radio_one/colour_default.svg',
    },
    {
        name: 'Radio 2',
        value: 'radio_two',
        img: 'https://sounds.files.bbci.co.uk/3.1.5/networks/bbc_radio_two/colour_default.svg',
    },
    {
        name: 'Radio 3',
        value: 'radio_three',
        img: 'https://sounds.files.bbci.co.uk/3.1.5/networks/bbc_radio_three/colour_default.svg',
    },
    {
        name: 'Radio 4',
        value: 'radio_fourfm',
        img: 'https://sounds.files.bbci.co.uk/3.1.5/networks/bbc_radio_four/colour_default.svg',
    },
    {
        name: 'Radio Five Live',
        value: 'radio_five_live',
        img: 'https://sounds.files.bbci.co.uk/3.1.5/networks/bbc_radio_five_live/colour_default.svg',
    },
    {
        name: 'World Service',
        value: 'world_service',
        img: 'https://sounds.files.bbci.co.uk/3.1.5/networks/bbc_world_service/colour_default.svg',
    },
])

const w: WidgetAPI = await widget(
    `
<div id="player"></div>
<style type="text/css">${getStyles()}</style>
<script type="text/javascript">${getScripts(station)}</script>
    `,
    { alwaysOnTop: true }
);


w.setSize(PLAYER_WIDTH, PLAYER_HEIGHT);

w.onClick(event => event.targetId === "x" && w.close());

w.onResized(() => w.setSize(PLAYER_WIDTH, PLAYER_HEIGHT));