Media player web component for playing Radio4000 channels and lists of media links
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Radio4000 Player

This is a web component that plays channels from Radio4000. It uses the public radio4000-api and Vue.js.

How to use

You can load the player with a CDN, like this:

<script async src=""></script>
<radio4000-player channel-slug="good-time-radio"></radio4000-player>

OR, you can use a package manager:

// npm install radio4000-player
import 'radio4000-player'
// now you can use <radio4000-player> in your templates

OR, you can use an iframe (source):

<iframe src="" width="320" height="500" frameborder="0"></iframe>



Here's a complete list of all the attributes you can set and change on the web component. These do not affect the iframe version.

Attribute Type Description
channel-slug string Radio4000 channel slug (ex: oskar)
channel-id string Radio4000 channel id (ex: -JYZvhj3vlGCjKXZ2cXO)
track-id string Radio4000 track id (ex: -JYEosmvT82Ju0vcSHVP)
volume integer from 0 to 100 (default: 100)
autoplay boolean if it should start playing automatically (default: false)
shuffle boolean if tracks should be shuffled (default: false)
r4-url boolean use relative, internal links. When the player is used on we want the links to not open a new window. (default: false)


The are three available attributes to start the player: channel-slug, channel-id and track-id.

In a HTML file, add the following to generate three players:

<script async src=""></script>

<radio4000-player channel-slug="good-time-radio"></radio4000-player>
<radio4000-player channel-id="-JYZvhj3vlGCjKXZ2cXO"></radio4000-player>
<radio4000-player track-id="-JYEosmvT82Ju0vcSHVP"></radio4000-player>

You can also set and update the player attributes using JavaScript. Remember that HTML attributes are dasherized channel-slug whereas JavaScript expects CamelCase channelSlug.

var player = document.querySelector('radio4000-player')

// Load radio channel either by slug or id.
player.channelSlug = 'sugar-hiccup'
player.channelId = '-JYZvhj3vlGCjKXZ2cXO'

// Load a specific track.
player.trackId = '-JYEosmvT82Ju0vcSHVP'

// Change the volume.
player.volume = 25

// Enable shuffle.
player.shuffle = true

To enable autoplay:

<radio4000-player channel-slug="200ok" autoplay="true"></radio4000-player>


You can listen for events directly on each <radio4000-player> element.

Event name Description Arguments
playerReady Fires when ready
trackChanged Fires whenever the current track is changed {previousTrack, track}
trackEnded Fires when the current track finishes playing {track}
mediaNotAvailable Fires when a track can not be played by its provider (YouTube etc.) {track}

Here's an example of how to listen for the trackChanged event. It is the same approach for all events. In the case of both trackChanged and trackEnded, the event.detail[0] argument will be a Radio4000 track object.

var player = document.querySelector('radio4000-player')
player.addEventListener('trackChanged', (event) => {'trackChanged event', event.detail[0])
  // { track: { [...] } }


!!! Danger zone. We are still finalizing the API for methods so expect this to change.

It is possible to load data to the <radio4000-player> without any relation to the Radio4000 database. To do that use the updatePlaylist method, on the JavaScript instance of the player. It accepts a playlist object.

The playlist object

Attribute Type Description
title string Displayed in the header
image string URL to an image (square ~60px)
tracks string An array of track objects

Here's an example an array of a playlist object. Note how the tracks' url key points to remote media in the ogg format (can be any format your browser supports).

// Create a playlist.
const playlist = {
  title: 'A title for this list',
  image: '',
  tracks = [
      id: '1',
      title: 'Randomfunk.ogg',
      url: ''
      id: '2',
      title: 'Rare and Cheese - Jazzpolice',
      url: ''

// Get access to the Vue component behind the web component to access methods.
var player = document.querySelector('radio4000-player')
var vue = player.__vue_custom_element__.$children[0]

// Update player with our new playlist.

The track object

The track object attributes are based on the track model of Radio4000 API. Available attributes can be found there:

This is an array of track, which have a property ytid, so the <radio4000-player> will read them with YouTube's iframe player.

const tracks = {
        "id": "-JYZtlEKiZY75Wt6QpA5",
        "title": "Kleeer - Tonight",
        "ytid": "cVXURwACwtk"
        "id": "-Jf2HYHsVl7iPDGZNbCa",
        "title":" Patrick Watson - Adventures In Your Own Backyard (Altered Route Video Edit)",
        "ytid": "cbSbbY5ibas"

If instead of a ytid (being a Youtube video id), you use the key url, the player will attempt to read the media to which this url points to. It will use an HTML <audio> element, to which the supported media type list can be found on Mozilla MDN documentation.


  • Feature branches are made from the master branch.
# 1. clone and install dependencies
git clone

# 2. starts a server on http://localhost:4002 that autobuilds when files change
yarn start


# run tests once
yarn test

# (re)run tests as files change
yarn start; yarn cypress open

How to release a new version

Do not use npm publish or yarn publish directly! (unless you can remember to yarn build before releasing)

Release a new patch e.g. 1.0.4 to 1.0.5.

yarn release

Release a minor, major, or specific version:

yarn release minor
yarn release major
yarn release 0.8.3

Running this command create a new, tagged "release" commit including a production build and pushes it to Git and NPM. See release-it for more.