<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;
}
This Pen doesn't use any external CSS resources.