Custom Widget to Simplify Display


I was wondering if there is a way to build a custom widget that looks like a player. It will simply display a few things:

  • Current show art or song art
  • Current show title, date, hours, and DJ
  • A button to listen live

I am aware that most of those can be retrieved from the current JS widgets, and I did something like that on kspc[dot]org. However, to achieve that, I used a lot of CSS to hide and move things around. I wish there was a simpler widget that would do that more efficiently.

It’s very tricky to handle that when there is a show with no playlist, or there is a gap in the schedule, or a song without art. The current widget has different HTML structures for each thing, which makes it harder to deal with and I keep finding things that don’t work with what I am truing to do, for example:

The main goal of the new simpler widget would be to:

  • If there is no show playing at the moment, display the upcoming show, instead of being stuck on the last show that aired.
  • Display the details of the current show only; there’s no need to have a separate div for the current playlist. We don’t need any details about the playlist, just the show details.
  • The button to listen live would play what is on-air live, not only the current song track.
  • Get the show art when there is no song art or no playlist playing.

Do you think something like that would be possible? We work with three different radios that could use that simplified widget. I am happy to help however I can!


Yes, this is certainly possible if you use the Spinitron API (reference and demo/tutorial). I think it would be hard to do what you described using Spinitron’s available pages/widgets modified by client-side JS and CSS.

You’ve been thinking about the specs for the algorithm that chooses what to display. I would to add some things you might consider, speaking as keeper of the database itself.

There are a surprising number of scenarios to work through to decide how such a widget should behave.

  • There can be zero one or more playlists that are “current”, i.e. already started but not yet finished.
  • Same for current occurrences of shows in the schedule.
  • The time since the last spin began can vary a lot.
  • So can the time since the most recently ended playlist and show occurrence.
  • There might be only short time to the next scheduled show occurrence or playlist.

The algorithm for what to prioritize and display depending on the current state of the database is ideally up to the individual station (i.e. should preferably be customized by the station) because their approach to scheduling and how staff are trained/expected to create playlists would factor in.

Every station in Spinitron has a landing page e.g. We had to design a general algorithm that would be just about good enough for all stations to choose what to put there. But having a whole page makes the problem easier.

You asked about a widget, a word that suggests something much smaller.

If you don’t feel able to write an API client, I may be able to help with that if we can get one or two other stations interested and a clear technical spec. Potentially if the widget looks good on paper and in a mock-up then maybe we can add it as a new Spinitron feature.

Hi Tom, thanks for all the details! I’ll look into the API and see what I can do. I’ll let you know once I have something done, and we can discuss the possibility of adding it as a new Spinitron feature depending on what I am able to do.

1 Like

This kind of can go in a few different directions.

  1. The simplest is if you do something just for Tech support for web integration projects is included in the service for all Spinitron clients so you’re not on your own with that.

  2. Alternatively you could try to make something that multiple stations might be able to use and publish the work on GitHub. A lot of Spinitron stations run WordPress so maybe it’s feasible to write a simple caching PHP API client that runs on the same server. It can implement the algorithm to select what to display at any given time. Then there’s an HTML/CSS widget, maybe with some JS or maybe not. Our API demo is an example using zero server dependencies other than PHP itself.

  3. Finally, if stations aren’t really able to put that sort of thing on their WP server then it’s really a matter of developing a new feature for Spinitron. You persuade us that your elegant functional design should be hosted on our servers. In this case we would code the server-side logic and it would remain proprietary but the client side HTML/CSS/JS could be yours (in which “you” might not be just you personally, of course). The client side parts could potentially be on GitHub and be something Spinitron depends on.

And I have a question. Since you mentioned wanting to have a stream player as part of the widget, do you have any ideas how to make it continue to play as the user navigates to other pages?