Online radio streaming delay

Online radio streaming delay

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.

  1. <div class="col-lg-12 col-sm-12">
  2. <div id="radio_player">
  3. <div class="default-player">
  4. <audio width="320" height="240" controls playsinline id="audio_player">
  5. <source src="http://stream.radio.co/sedf8bacc9/listen" type="audio/mpeg">
  6. </audio>
  7. </div>

  8. <div id="audioplayer">
  9. <button id="pButton" class="pause"></button>
  10. <div class="live">Live</div>
  11. <div id="volume_control">
  12. <label id="rngVolume_label" for="rngVolume">
  13. <i class="fa fa-volume-up" aria-hidden="true"></i>
  14. </label>
  15. <input type="range" id="rngVolume" min="0" max="1" step="0.01" value="0.5">
  16. </div>
  17. <div class="current-piece">
  18. // Current piece
  19. <div class="now-playing">Now playing:</div>
  20. <script src="https://public.radio.co/embed/sedf8bacc9/song.js"></script>
  21. </div>
  22. </div>
  23. </div>
  24. </div>
In jQuery, I have put together a small script to force reload the script that shoes the current track:

  1. function showCurrSong() {
  2.       var currSongScript = document.createElement('script');
  3.       currSongScript.src= 'https://public.radio.co/embed/sedf8bacc9/song.js';
  4.       $('#song_name').html('');
  5.       $('#song_name').append(currSongScript);
  6.       console.log(currSongScript);
  7.    }
  8.    var refreshTime = 1000 * 60 * 3; // minutes
  9. setInterval(function(){showCurrSong()}, refreshTime);

But that replaces the "frozen" old track name with "Loading...".

Why is that?

Thank you!