Ark Player widget

Demo page for Spinitron Ark Player widget, with instructions.

Github repo with the widget and this page: spinitron/ark-player

Choose a station

--/--/--

-:--:-- --

The Ark Player widget has these parts that you should integrate into your web pages separately.

Links to the Ark Player's JavaScript and CSS assets
The Ark Player markup
Optional start links/buttons
JavaScript that initializes the player

1. Asset links

The Ark Player requires a JavaScript file and a CSS file. You can put links to the files in the spinitron/ark-player Github repo. This page uses the following asset links that you can also use.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/spinitron/ark-player@latest/dist/arkPlayer.css">
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://cdn.jsdelivr.net/gh/spinitron/ark-player@latest/dist/arkPlayer.js"></script>

Alternatively you can copy the files from the dist directory of this repo into your web site and link your copies. If you are using NPM in your work then you can install the ark-player NPM package. Or you can fork this repo and make your own version.

2. Ark Player markup

The markup is a chunk of HTML for the Ark Player's user interface. Copy it from the source of this page. The part to copy is indicated in HTML comments.

The opening <div> has an optional data-ark-start attribute with a value that controls the player's start date-time on page load. For example, if the opening tag is like this

<div class="ark-player" id="ark-player" data-ark-start="20201020T100000Z">

then the player initializes itself so the play button starts from 20201020T100000Z, i.e. 10:00 UTC on Oct 20th 2020. Set a suitable value or remove the attribute.

3. Start links/buttons

You can put links, buttons, icons, or other elements on a page so that when the user clicks or touches them, the Ark Player starts playing at a specific date and time. Any visible element with a data-ark-start attribute with valid date-timestamp value becomes click/touchable. The date-time must be in UTC and formatted as yyyymmddThhmmssZ. For example

<div data-ark-start="20201020T180000Z">Click me!</div>

This makes a block on the page and if the user clicks or touches it then the Ark Player starts playing that archive beginning at 18:00:00 UTC on Oct 20th 2020. (It doesn't need to be a <div>. Most visible elements should do.) Here are three examples with source code here.

Start the archive at such-and-such date and time
Start at some other date and time
Start at yet another date and time

NOTE These examples don't work because they already expired. Archives are available only for programing date-times between two weeks ago and about an hour ago relative when a listener visits your web page. Static values for data-ark-start attributes will therefore stop working after at most two weeks. It's more practical to use dynamic values, that is, to automate generation of date-time values for data-ark-start using a script.

4. Initialization JavaScript

Somewhere on the page you need to put initialization JavaScript. It's a small bit of code in <script> tags. The exact code you need must be configured for your station. Contact Spinitron to get the specific code for your station.