Now Playing JavaScript Widget

The Now Playing JavaScript Widget puts the most recent spins on your web page without needing an iframe or use of the SpinPapi API. A small script fetches markup for recent spins from Spinitron and puts it into a container element on your page.

Source code for this demo web site is on Bitbucket

The widget has three advantages over iframes.

It's easier to style because the markup is on your page rather than in a separate page that the client loads into the iframe. Add style rules for the widget's markup in your page or one of its stylesheets.
The widget container automatically assumes the height of its contents (unless you specify otherwise). It's hard to do that with an iframe so most often they have a specified static height.
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. Set the container element's ID attribute to spinitron-nowplaying, so the widget can find it, and add a data element to identify your station like this:

<div data-station="wzbc" id="spinitron-nowplaying"></div>
<script src="//spinitron.com/js/npwidget.js"></script>

Now you can style the now playing display by adding style rules to the page or one of its stylesheets. This page is an example – view this page's source or or below for the markup and styles

Other 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".
`tweets`	Set to "1" to request Twitter share links in the markup.
`time`	Set to "1" to request timestamps at the start of a line. Default is “… spun by …” clause
`nolinks`	Set to "1" to request no links in the response.

The example on this page shows how they are used in the container element.

The example on this page uses this markup:

<div class="widget-box">
    <h1>Recent spins on KZSC</h1>
    <div data-station="kzsc" data-num="8" data-time="1" data-nolinks="1" id="spinitron-nowplaying"></div>
    <script src="//spinitron.com/js/npwidget.js"></script>
</div>

and these style rules:

.widget-box {
    font-family: 'Roboto Condensed', sans-serif;
    padding: 1em;
    background: #FFFABC;
}

.widget-box h1 {
    font-weight: normal;
    font-size: 1.4em;
}

@media screen and (max-width: 760px) {
    .widget-box {
        width: auto;
        float: none;
        margin: 0;
    }
}

@media screen and (min-width: 761px) {
    .widget-box {
        width: 40%;
        float: right;
        margin: 0 0 1em 2em;
        box-shadow: 0 0 0.2em 0.2em #e7e7e7;
    }
}

.widget-box p.recentsong {
    margin: 0.5em 0 0;
    font-size: 90%;
}

.widget-box b {
    font-family: Roboto, sans-serif;
    font-weight: 500;
}

#spinitron-nowplaying .spunpart,
#spinitron-nowplaying .diskpart,
#spinitron-nowplaying .labelpart {
    display: none;
}

Note

The widget requires a <script> element on the page, which some CMS and blog services block – wordpress.com does, blogger.com does not. But that doesn't me you can't use it in WordPress – you probably can if you have your own instance but with the commercial wordpress.com service you're out of luck.

Now Playing JavaScript Widget

Recent spins on KSCU

Note