<div>

				<!-- Header -->
					<header>
						<center>
						    <img src="https://listen.ds106rad.io/bg.gif" />
						<br />
						<iframe src="https://www.ds106rad.io/public/ds106radio/embed" frameborder="0" allowtransparency="true" style="width: 25%; min-height: 150px; border: 0;"></iframe>
                <h2 id="song"></h2>
<h3 id="listen-count"></h3>
<div id="history"></div>
						</center>
					</header>
    

				<!-- Footer -->
					<footer><center><a href="https://twitter.com/ds106radio">#4life</a></center></footer>
		</div>
const api = 'https://ds106rad.io/api/nowplaying';
//https://ds106rad.io/api/live/nowplaying/station_shortcode
var nowPlayingTimeout;
var nowPlaying;

function loadNowPlaying() {
    $.ajax({
        cache: false,
        dataType: "json",
        url: 'https://ds106rad.io/api/nowplaying',
        success: function(np) {
            // Do something with the Now Playing data.
            nowPlaying = np;
            console.log(np[0].song_history)
            nowPlayingTimeout = setTimeout(loadNowPlaying, 15000);
            document.querySelector('#listen-count').innerHTML = np[0].listeners.current + ' people listening';//listener count
            document.querySelector('#song').innerHTML = np[0].now_playing.song.text;//song title
            //document.querySelector('history').innerHTML
           document.querySelector('#history').innerHTML = makeHistory(np[0].song_history);
        }
    }).fail(function() {
        nowPlayingTimeout = setTimeout(loadNowPlaying, 30000);
    });
}

$(function() {
    loadNowPlaying();
});

function makeHistory(songs){
  let html = '';
  songs.forEach(function(song) {
    html += `<div class="hist-song">${song.song.text}</div>`
  })
  return html;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js