Ark Player widget

This page is a demo of and instructions for the Spinitron Ark Player widget.

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

--/--/--
-:--:-- --

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

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

Your web site needs to be explicitly authorized to play Ark recordings from servers that Spinitron manages. Ask Spinitron to do that for you.

Access to audio files

If you run the Ark Player on a server of your own and listeners will access audio archives managed by Spinitron, ask Spinitron to authorize your origin (CORS) to access the audio files.

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.

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

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 exammple

<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.

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.

View the source of this page to see an example.