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!
1 Answers
Answers 1
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.
0 comments:
Post a Comment