在线广播流延迟

时间:2017-03-14 15:45:09

标签: javascript jquery ajax

urbansunsets.com我正在从radio.co发送在线广播。它确实有效,但经过一段时间的连续播放后,显示当前播放的部分有一个延迟

HTML是:

<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>

在jQuery中,我已经整理了一个小脚本来强制重新加载当前轨道的脚本:

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取代&#34;冷冻&#34;旧的曲目名称&#34;正在加载...&#34;。

为什么?

谢谢!

1 个答案:

答案 0 :(得分:1)

&#34;正在加载......&#34;消息是您通过radio.co从currSongScript.src= 'https://public.radio.co/embed/sedf8bacc9/song.js';获得的代码的一部分。

如果您只是将该网址加载到浏览器中,那么您将获得以这样的方式开始的内容(我已将其清理为易读性)。

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"], 
   ...
 }; 

loadingMessage显然是您正在加载的脚本设置的参数之一。

稍后在代码中您将看到此部分:

/** * 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 = ''; 
   }
   ...
}

此部分实际上是将div插入将接收播放器控件的页面,这是插入加载消息的位置。

总之;新创建的div元素将其innerHTML设置为&#34;在public.radio上的代码创建div之后立即加载...&#34; .CO。然后用播放的歌曲进行更新。