Create a HTML-only Song Finder for your Radio Station Website

No Database or Coding Required

One of the most popular features I built for the Hope 103.2 website way back in 2013 is the Song Finder – a web page which shows you every song played on a radio station, and a way to switch between days/hours. Listeners love it, and it saves the reception team countless calls asking ‘what song was this?’ Even now – six years later – I’m surprised at how many radio stations still don’t have this cool feature.

This track history functionality was already available in the MetaRadio WordPress plugin, but now it’s also available as a HTML Template for stations without WordPress. This means you can upload a Song Finder from MetaRadio to any site with only a FTP server – you don’t need a database, or any custom coding.

We provide everything you need to get this up and running, including easy integration for fifteen different radio automation systems.

Of course, if you have a WordPress site than I totally recommend using the provided WordPress plugin. But this new option is great for any station not running WordPress.

Song Finder Setup Guide

  1. Download and Install MetaRadio. You can get a 30-day free trial, which will allow you to test this on your website before purchasing it.
  2. Open ‘MetaRadio Config’ (in your Start Menu)
  3. Connect to your Radio Automation System
  4. Create a new output with type ‘FileTrackHistory
  5. Create an empty folder on your hard drive. This will contain a local copy of your song history files. Copy the full path of this folder to the field ‘Output Folder Path’.
  6. Enter the number of days you wish to be available on your website, your FTP server details, and two-character country code (this is used to lookup the iTunes artwork)
  7. Save all your changes, and launch MetaRadio

At this point, every time a song is played on-air, MetaRadio creates or updates a JSON file in your song history folder, and also uploads it to your FTP server. There is one file per day, plus an index file.

Now, all we need to do is copy the Song Finder HTML Template into that folder on your FTP server. Our Song Finder HTML Template can be found here: C:\Program Files (x86)\Media Realm\MetaRadio\templates\songfinder.html

Upload this HTML file to the same folder as your song history files.

When you open the HTML file on your web server, it will query the JSON files created by MetaRadio, and display a nice song finder in your web browser. It will look a bit like this:

Customising the Song Finder HTML Template

You might like to embed this Song Finder as an iFrame on your website, or even integrate it into your website’s existing template.

Of course, the Song Finder template is fully customisable! You can see all the CSS up the top of the table, and the Javascript down the bottom. Our template is just a starting point, so feel free to make it your own!

With a bit of extra Javascript, you could even use these JSON data files to show the currently playing track, or recently played songs.

Get the Broadcast Technology Newsletter

Sign up for the email newsletter about media and technology. Sent irregularly. No spam.

I'm Anthony Eden, and I'm a IT Professional, Broadcast Technician, Software Developer, and Solutions Engineer. I've been working in broadcast media since 2008, and developing software and websites for just as long. Right now, I provide freelance services through Media Realm - in particular, to the media and not-for-profit industries.

Follow Anthony on Twitter: @anthony_eden