Spinitron listener app: Listen to radio streams while browsing playlists, schedules etc

1

CAVEAT
This forum post presents new features still in development and early user testing. Try it if you like but

  • expect bugs
  • it may change without warning (ofc we aim to minimize change could impact your use).

If you want to help test it, get in touch.

Quick start

The Spinitron listener app allows radio fans to listen to live and Ark streams while browsing Playlists, Schedule, Shows, DJs, and so on.

Try it out with these links:

Entroducing

What is it? - a single-page app to browse and listen to live and Ark streams

This app has all the content from the existing Spinitron public pages at spinitron.com (playlists, schedule and shows, DJs and their profiles) plus an audio player for both live and Ark streams. It uses a so-called single-page app so that audio streams keep playing when you navigate to another page.

This is not the old public site restyled. It is a new app. We continue to run everything you are familiar with. This new addition is to allow uninterrupted listening and browsing the Spinitron content at the same time.

Why use it?

Listening stays put. Start a live or Ark stream in the player, then open the schedule, then go to another playlist, even another Station’s pages. The audio keeps playing until you pause it, start a different stream or close the page. On a phone it keeps going when you leave the browser or lock the screen.

Now-playing display. The new app’s player includes artist, title and timestamp of the currently playing spin be it live stream or Ark as best we can guess it from available playlists. If there’s a discrepancy between the audio and the displayed metadata the situation should be clear to the listener as the difference between the spin’s timestamp and the play-head’s time is visible. This info also appears on phone lock screens.

Your Station can look like your Station. You can customize the entire appearance of this app to suit your needs, e.g. to match your station’s website. Each Station in the new app has a Look and Feel (LAF). We offer a stock of several LAFs that you can choose from or you can provide a custom LAF of your own design in the form of a CSS file.

Open it from your website. The app provides each station with a Station view. Link to that and there’s nothing in the page that hints at Spinitron or any other Spinitron station (except the obligatory link in the footer to legal stuff).

Live stream and Ark in one player. If your station uses Ark, listeners can start at a playlist or a show’s start (inside the two-week window). The Speaker button casts: it sends the stream to a TV or other devices on the network when the browser allows it (Chromecast or AirPlay).

Nothing in existing Spinitron features changes because of this. This new app is in addition to all that in order to finally offer a proper combined listening and browsing web experience that could only be done with a new single-page app.

All about it

Accessing the app

The app has two modes of operation that we call views:

  • Catalog view
  • Station view

Catalog view

Displays all the stations in Spinitron for listener to choose, a bit like the existing home page of spinitron.com, which also offers station selection.

https://spa.spinitron.com/

Search, open a Station, listen. That is the Catalog: Spinitron showing every Station.

A Station’s pages on this host are at:

https://spa.spinitron.com/WZBC

If the Station’s name has spaces, the address uses hyphens:

https://spa.spinitron.com/Humboldt-Hot-Air

Station view

A Station view is the same app with the Catalog put away. Visitors to a Station view are the Station’s audience – Spinitron and its other customers are hidden.

The simple address is the Station’s name in front of q.spinitron.com:

https://wzbc.q.spinitron.com/

https://humboldt-hot-air.q.spinitron.com/

Schedule, a playlist, a show, the DJ list:

https://wzbc.q.spinitron.com/schedule https://wzbc.q.spinitron.com/playlists/12345 https://wzbc.q.spinitron.com/shows/12345 https://wzbc.q.spinitron.com/djs

Use this form on your website, posters, social posts, etc.

You can also open a Station view on the Catalog host by adding return_url (see below). Without that, spa.spinitron.com/WZBC is still the Catalog view, with a SPINITRON logo and link to the station list.

Link from the Station website

Stations directing their audience to use this app should use the Station view. For example, put a link like this on your web site:

<a href="https://wzbc.q.spinitron.com/">Listen and playlists</a>

Deep links work the same way (/schedule, /playlists/…).

If you must use the Catalog host, add return_url or the visit is ordinary Catalog browsing.

Linking back to the Station website

In a Station view the name at the top is the way home.

If that link already goes to the right place, leave it. We use the Station website already on file for you.

If it is wrong or missing:

  1. Ask Spinitron to set the Station website in the app, or
  2. Put return_url on the links you publish.

return_url must be https. Write the address, then percent-encode it so :, /, and ? do not break the query. Example, website https://wzbc.org/:

https://spa.spinitron.com/WZBC?return_url=https%3A%2F%2Fwzbc.org%2F

Look and feel (LAF)

Color, type, and decoration — including the top bar and the player — come from a stylesheet that you control. You may select one of our app’s stock stylesheets or you can provide your own custom stylesheet for full control.

The selected stylesheet or the one you provide works on top of a minimal layout that is usable even without a stylesheet, although it looks really basic. (Try it with laf=null see below.)

Each Station has a LAF stored by Spinitron. Spinitron can assign one of its stock LAFs to your Station or address of a stylesheet you provide. Requests to the app can override that setting for trying things out. First match wins:

  1. query parameter laf_css — your stylesheet, must be a valid https URL
  2. query parameter laf — a stock name (see below), or null for the bare layout
  3. whatever is on the Catalog for that Station

Unknown laf or a laf_css that is not a valid URL is ignored but the page still opens.

Overrides stay on in-app links, so a try-out does not snap back on the first click.

If you don’t want either query parameter in your links to the app, ask Spinitron to save your settings in the app.

Try a stock: laf=

Add ?laf= and a name. Examples:

https://wzbc.q.spinitron.com/?laf=paper https://wzbc.q.spinitron.com/?laf=canvas https://spa.spinitron.com/?laf=null

Primer LAFs (same layout as the Catalog skin; you mostly change colors):

Name What you get
paper Light cream, bookish
night Dark blue
fern Dark green
tape Dark amber
signal Dark, red accent
ink Black and white, no serif

Design Garden LAFs (more complex, more personality; fonts and layout may change):

Name What you get
frumpy Dated civic — Times, navy, 3D buttons
spine Magazine, navigation on a left spine
dock The player is at the top
broadside Broadsheet, rules, masthead
flyer Xerox poster
canvas Handmade / gallery

spinitron is the Catalog’s own skin.

Setting laf=null removes all optional stylesheets and delivers only the minimal functional base — use it when you’re writing a custom stylesheet to see the grounds your design builds on.

Stock files (https, you may link or copy):

https://spa.spinitron.com/laf/paper.css …and the same path for each name above (night.css, canvas.css, …).

Your own stylesheet: laf_css=

Host a .css file on https (your site, or a public raw file). Use a link URL like this:

https://wzbc.q.spinitron.com/?laf_css=https%3A%2F%2Fwww.wzbc.org%2Flisten.css

Percent-encode the stylesheet URL the same way as return_url. Invalid URLs are ignored.

You can combine:

https://spa.spinitron.com/WZBC?return_url=https%3A%2F%2Fwzbc.org%2F&laf=fern

A guide to how to write CSS for the app is in the SPA Design Garden (stock files plus a guide), or start from the stock URLs above.

To make your custom stylesheet your Station’s default, give Spinitron the URL and they can store it on the server. You do not have to put laf_css on every public link after that.

It works quite well to ask a coding agent to make a CSS for you. That’s how I made the file wzbc.css in the Quick start section above. Instructions how you could do that are in the SPA Design Garden.

1 Like