On urbansunsets.com I am streaming online radio from radio.co. It does work, but after a period of continuous playing, there is a delay at the part that shows what is currently playing.
The HTML is:
<div class="col-lg-12 col-sm-12">
<div id="radio_player">
<div class="default-player">
<audio width="320" height="240" controls playsinline id="audio_player">
<source src="http://stream.radio.co/sedf8bacc9/listen" type="audio/mpeg">
</audio>
</div>
<div id="audioplayer">
<button id="pButton" class="pause"></button>
<div class="live">Live</div>
<div id="volume_control">
<label id="rngVolume_label" for="rngVolume">
<i class="fa fa-volume-up" aria-hidden="true"></i>
</label>
<input type="range" id="rngVolume" min="0" max="1" step="0.01" value="0.5">
</div>
<div class="current-piece">
// Current piece
<div class="now-playing">Now playing:</div>
<script src="https://public.radio.co/embed/sedf8bacc9/song.js"></script>
</div>
</div>
</div>
</div>
In jQuery, I have put together a small script to force reload the script that shoes the current track:
function showCurrSong() {
var currSongScript = document.createElement('script');
currSongScript.src= 'https://public.radio.co/embed/sedf8bacc9/song.js';
$('#song_name').html('');
$('#song_name').append(currSongScript);
console.log(currSongScript);
}
var refreshTime = 1000 * 60 * 3; // minutes
setInterval(function(){showCurrSong()}, refreshTime);
Bu that replaces the "frozen" old track name with "Loading...".
Why is that?
Thank you!
The "Loading..." message is part of the code you're getting via currSongScript.src= 'https://public.radio.co/embed/sedf8bacc9/song.js'; from radio.co.
If you just load that URL into your browser, you'll get something that starts like this (I've cleaned it up for legibility).
var radiocoEmbed = {
/** * Amount of seconds between each update * @type {number} */
updateInterval: 30,
loadingMessage: 'Loading...',
defaultMessage: 'No information',
radiocoWindow : window,
request : 'song', location : 'https://public.radio.co/stations/sedf8bacc9/status', stationId : 'sedf8bacc9', defaultArtwork : 'https://d3r27ctn3zc00o.cloudfront.net/station_logos/sedf8bacc9.20170214030534.png',
requestTimeout : 60 * 30, // seconds types: ["history","artwork","dj","status","song"],
...
};
The loadingMessage is clearly one of the parameters set for the script you're loading.
Later on in the code you'll see this section:
/** * Insert the div on the page */
insertDiv : function(){
var node = document.createElement("div");
/** * Loading message */
if(this.request != 'artwork'){
node.innerHTML = this.loadingMessage;
} else {
node.innerHTML = '';
}
...
}
This section is actually inserting the div into the page that will receive the player controls, and this is where the loading message is being inserted.
In short; the freshly created div element has its innerHTML set to "Loading..." immediately after the div is created by the code on public.radio.co. It is then updated with the playing song.