MetaRadio: Now Playing JS Example

readme.txt

This is an example HTML page, showing how you can use the 'FileJSONFTP' output along with a simple HTML page to show the current title/artist.

Simply setup the output 'FileJSONFTP' in MetaRadio Standalone, name the output file 'nowplaying.json', uncheck 'Output Raw Data?', and upload it to the same folder on your web server as this file.

example.html

<span id="metaradio-now-title"></span>
<span id="metaradio-now-artist"></span>
<span id="metaradio-now-artwork"></span>
<script>
// Setup our HTTP request
var xhr_metaradio_now = new XMLHttpRequest();

// Setup our listener to process completed requests
xhr_metaradio_now.onload = function () {

	// Process our return data
	if (xhr_metaradio_now.status >= 200 && xhr_metaradio_now.status < 300) {
		// Runs when the request is successful
		data = JSON.parse(xhr_metaradio_now.responseText);
    document.getElementById("metaradio-now-title").innerHTML = data['Title'];
    document.getElementById("metaradio-now-artist").innerHTML = data['Artist'];
    
    // Add iTunes image
    if(data['iTunesArtwork_100'] != null) {
      var img = document.createElement('img');
      img.src = data['iTunesArtwork_100'];
      document.getElementById("metaradio-now-artwork").innerHTML = '';
      document.getElementById("metaradio-now-artwork").appendChild(img);
    }
	}
};

function metaradio_now_fetch() {
  // Fetch new now-playing data every 5 seconds
  xhr_metaradio_now.open('GET', 'nowplaying.json');
  xhr_metaradio_now.send();
}

metaradio_now_fetch();
setInterval(metaradio_now_fetch, 5000);

</script>