1

我正在尝试让 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 中读取位置和轨迹，然后使用上述方法。任何帮助将不胜感激！

4

1 回答 1

2

问题很可能与您尝试呼叫时声音未完全加载有关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

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

于 2013-01-03T14:30:22.697 回答