Soundcloud HTML5 小部件连续播放

Question

我正在尝试让 SoundCloud HTML5 播放器小部件自动启动并寻找特定的曲目和位置，但无论我尝试什么都不起作用。

我正在使用下面的 API 代码：

<iframe width="100%" height="450" scrolling="no" id="soundcloud-player" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3058825&amp;color=00be53&amp;auto_play=false&amp;show_artwork=true"></iframe>
<script type="text/javascript" src="http://w.soundcloud.com/player/api.js"></script>

 <script type="text/javascript">

 (function(){
    var widgetIframe = document.getElementById('soundcloud-player'),
    widget       = SC.Widget(widgetIframe);

    widget.bind(SC.Widget.Events.READY, function() {

       widget.play();
       widget.seekTo('5000');

    });


  widget.bind(SC.Widget.Events.PLAY, function() {        

    // get information about currently playing sound
    widget.getCurrentSound(function(currentSound) {
      console.log('sound ' + currentSound.title + 'began to play');
    });
});  }());

我基本上想要完成的是，当用户在网站上的页面之间切换时，让播放器自动寻找相同的位置。我计划从 cookie 中读取位置和轨迹，然后使用上述方法。任何帮助将不胜感激！

Answer 1

问题很可能与您尝试呼叫seekTo 时声音未完全加载有关。您可以通过在代码中添加以下位来轻松验证这一点：

// …
widget.bind(SC.Widget.Events.READY, function() {
  widget.play();
  // Note setTimeout here!
  // This will now work since the needed part of the sound 
  // will have loaded after the timeout
  setTimeout(function () { 
    widget.seekTo('5000'); 
  }, 1000);
});
// …

但由于您真的不想在代码中出现任意超时，因此最好将事件处理程序附加到进度事件：

widget.bind(SC.Widget.Events.LOAD_PROGRESS, function onLoadProgress (e) {
  if (e.loadedProgress && e.loadedProgress === 1) {
    widget.seekTo(15000); // seek to previous location
    widget.unbind(SC.Widget.Events.LOAD_PROGRESS);
  }
});

这是此代码的工作版本http://jsbin.com/ebeboj/2/edit

此外，如果您的曲目很长，您还可以从声音中检索duration（通过getCurrentSound），检查曲目在0到1范围内的哪个点停止播放，然后等待值（因为 loadedProgress === 1 可能需要一段时间），类似于：

widget.getCurrentSound(function(currentSound) {
  // currrentSound.duration is 269896 for the first track of your playlist
  relativePreviousPlay = previousPlay / currentSound.duration; // ~0.204
});

widget.bind(SC.Widget.Events.LOAD_PROGRESS, function onLoadProgress (e) {
  if (e.loadedProgress && e.loadedProgress > relativePreviousPlay) {
    widget.seekTo(previousPlay); // seek to previous location
    widget.unbind(SC.Widget.Events.LOAD_PROGRESS);
  }
});    

在此处查看最后一段代码的工作示例http://jsbin.com/ebeboj/4/edit

旁注：我建议在 cookie 上使用 localStorage 来存储以前的播放位置，因为 cookie 会在客户端和服务器之间来回传输，从而减慢您的网站速度，而您可能不会不需要服务器端的信息。