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');
    });
});  }());

我基本上要完成的是当用户在网站上的页面之间切换时，播放器会自动寻找相同的位置。我打算从饼干，位置和轨道上阅读，然后使用上面的方法。任何帮助将不胜感激！

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);
});
// …

但是因为你真的不想在你的代码中有任意超时，所以最好将事件处理程序附加到progress事件：

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

Sidenote ：我建议使用localStorage代替Cookie来存储以前的播放位置，因为Cookie会在客户端之间来回传播，从而减慢您的网站速度不需要服务器端的信息。

Soundcloud HTML5小部件连续播放

1 个答案: