Source code for this demo web site is on Github

Recent spins using JavaScript

Old Now Playing JS widget documentation

This page shows how you can put recent spins on the page using the JavaScript widget.

About the Spinitron JavaScript Widget

The Spinitron JavaScript Widget puts content from spinitron.com on your web page without needing an iframe or the API. A small script fetches markup from Spinitron and puts it into a container element on your page.

The JavaScript widget has advantages over iframes

1. It's easier to style because the markup is on your page rather than in a separate page that the browser loads into the iframe. Just add widget styles to your stylesheet.

2. The widget container automatically assumes the height of its contents. It's hard to do that with an iframe, which usually has a specified static height.

3. It loads faster and with less flicker.

To use the widget, put a container element, a <div> for example, on your page in which the recent spins should appear, followed by the widget <script> element like this.

<div class="spinitron-js-widget" data-action="now-playing-v2" data-station="wzbc"></div>
<script src="//spinitron.com/static/js/widget.js"></script>

The container element must have

• The spinitron-js-widget CSS class, e.g. class="spinitron-js-widget"
• A data-action attribute to say what goes in the container, e.g. data-action="now-playing-v2"
• A data-station attribute to identify your station, e.g. data-station="wzbc"

Depending on the action there may be more optional parameters you can set with data attributes.

If you have more than one widget on a page, you need the <script> element only once.

About the widget's now-playing-v2 action

Parameters that control the widget are described in the table.

Parameter	Use
station	Station id, e.g. "wzbc". Mandatory
num	Number of spins. Default is "1". Use negative number to reverse the order, e.g. "1", "-5".
sharing	Set to "1" to request Twitter and Facebook share links in the markup. If not set, station setting 'Display: "Enable Share to ... links"' is used to determine whether links should be displayed. Enabled by default.
cover	Set to "1" to request cover art images in the markup. If not set, station setting 'Display: "Enable cover art on public pages"' is used to determine whether cover art should be displayed. Enabled by default.
player	Set to "1" to request an ability to play songs preview from Apple Music. Enabled by default.
merch	Set to "1" to request "Buy it!" links in the markup. If not set, station setting 'Display: "Enable Buy it! links"' is used to determine whether links should be displayed. Enabled by default.
meta	Set to "1" to request additional playlist and DJ metadata with each spin. Disabled by default.
non-music	Set to "1" to include non-music items. Disabled by default. When disabled, the widget lists only spins. When enabled, spins and non-music items are combined in the widget display and ordered by timestamp.

The example on this page uses this markup which you can also see in the source code.

<div class="spinitron-js-widget" data-action="now-playing-v2" data-station="wzbc" data-num="5" data-sharing="1" data-player="1" data-merch="1" data-cover="1"></div>
<script async src="//spinitron.com/static/js/widget.js"></script>