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.
Your web site needs to be explicitly authorized to play Ark recordings from servers that Spinitron manages. Ask Spinitron to do that for you.
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.
<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.
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.
<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.
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.
<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.