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

私が基本的に達成しようとしているのは、ユーザーがサイトのページを切り替えたときに、プレーヤーが自動的に同じ場所を探すようにすることです。クッキー、位置、トラックから読み取り、上記の方法を使用する予定です。どんな助けでも大歓迎です！

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

しかし、実際にはコードに任意のタイムアウトを設定したくないので、イベント ハンドラーを 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、( 経由で) サウンドから取得し、getCurrentSound0 から 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 がクライアントからサーバーへと行き来するため、Web サイトの速度が低下し、サーバー側の情報は必要ない可能性が高いためです。

于 2013-01-03T14:30:22.697 に答える