Javascript和Soundcloud小部件：如何将新曲目加载到SC小部件iFrame（通过URL）

Question

I've seen different web apps like Playmoss, Whyd, and Songdrop etc. that, I believe, HAVE to utilize the Soundcloud Embedded Widget in order to produce the functionality of playing multiple tracks, in sucession, not apart of a set/(playlist). 我见过不同的Web应用程序，例如Playmoss，Whyd和Songdrop等。我相信，它们必须利用Soundcloud Embedded Widget才能产生连续播放多个音轨的功能，而不是在一组/（播放列表）中播放）。 Currently I am having issues reproducing this functionality with the following library, so I decided to attempt to write my own: 目前，我在使用以下库重现此功能时遇到问题，因此我决定尝试编写自己的库：

https://github.com/eric-robinson/SCLPlayer https://github.com/eric-robinson/SCLPlayer

I am very new to writing javascript, but my below code, will load a first track, and play it once hitting the “ready” bind. 我对编写JavaScript非常陌生，但是下面的代码将加载第一首曲目，并在达到“就绪”绑定后立即播放。 Once hitting the “finish” bind, It will then jump to the loadNextTrack() function and load the next tracks URL, into the src of the widget's iFrame. 按下“完成”绑定后，它将跳至loadNextTrack（）函数并将下一个曲目URL加载到小部件iFrame的src中。 After that, it doesn't ever hit the original “ready” bind, which would then begin playback. 在那之后，它再也不会碰到原始的“就绪”绑定，然后它将开始播放。

So to clear things up, playback doesn't begin for the second track. 因此，为了使事情变得清晰，第二轨不会开始播放。

    <script type = "text/javascript">

         var SCLPlayer = {
            isPlayerLoaded : false,
            isPlayerFullLoaded : false,
            needsFirstTrackSkip : true,
            isPaused: true,

            scPlayer : function() {
                widgetContainer = document.getElementById('sc');
                widget = SC.Widget(widgetContainer);
                return widget;
            },

            loadNextTrack : function() {
                var ifr = document.getElementById('sc');
                ifr.src = 'http://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/231758952';

                console.log ('Loading Next Track');

                SCLPlayer.scPlayer().bind(SC.Widget.Events.READY, function() {

                    console.log ('Player is Ready, next Track');

                    SCLPlayer.scPlayer().play();
                });
            }
        };

        $( '#sc' ).ready(function() {
            SCLPlayer.scPlayer().bind(SC.Widget.Events.READY, function() {
                SCLPlayer.isPlayerLoaded = true;
                //window.location = 'sclplayer://didLoad';

                console.log ('Player is Ready');
                SCLPlayer.scPlayer().play();
            });

            SCLPlayer.scPlayer().bind(SC.Widget.Events.PLAY, function() {
                SCLPlayer.isPaused = false;
                //window.location = 'sclplayer://didPlay';

                console.log ('Player did Play');
            });

            SCLPlayer.scPlayer().bind(SC.Widget.Events.PAUSE, function() {
                SCLPlayer.isPaused = true;
                //window.location = 'sclplayer://didPause';

                console.log ('Player did Pause');
            });

            SCLPlayer.scPlayer().bind(SC.Widget.Events.FINISH, function() {
                SCLPlayer.isPaused = true;
                //window.location = 'sclplayer://didFinish';

                console.log ('Player did Finish');

                SCLPlayer.loadNextTrack();
            });
        });

    </script>

</head>

<body>
    <iframe id = "sc" width="100%" height="100%" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/226183306"></iframe>
</body>

The whole point of me writing this Javascript is so that I can then use a Swift to Javascript bridge in my iOS app to then control the loading of tracks into the embedded players. 我编写此Javascript的全部目的是，以便可以在iOS应用程序中使用Swift to Javascript桥来控制将曲目加载到嵌入式播放器中。 For some reason over a slower connection, the next track doesn't always load into the player, using the "bridge". 出于某种原因，由于连接速度较慢，下一条音轨并不总是使用“桥”加载到播放器中。 I hope to provide the nextTrackURL to the javascript side of things before the currentTrack finishes, so that the bridge conveys nothing and the Javascript handles new track loading, solely on its own. 我希望在currentTrack完成之前将nextTrackURL提供给javascript方面，以便该桥不传递任何内容，而Javascript仅自行处理新的轨道加载。

Answer 1

I think you want to use the load function to specify the url for the new track 我想您想使用加载功能为新曲目指定网址

From the soundcloud Widget API docs: 从soundcloud Widget API文档中：

load(url, options) — reloads the iframe element with a new widget specified by the url. load（url，options）-使用url指定的新窗口小部件重新加载iframe元素。 All previously added event listeners will continue working. 以前添加的所有事件侦听器将继续工作。 options is an object which allows you to define all possible widget parameters as well as a callback function which will be executed as soon as new widget is ready. options是一个对象，它使您可以定义所有可能的窗口小部件参数以及将在新窗口小部件准备好后立即执行的回调函数。 See below for detailed list of widget parameters. 有关小部件参数的详细列表，请参见下文。

var url = "https://api.soundcloud.com/";
var options = [];
// if a track 
url += "tracks/";
// if a playlist
url += "playlists/"
// append the id of the track / playlist to the url
url += id;
// set any options you want for the player
options.show_artwork = false;
options.liking = false;
options.auto_play = true;

widget.load(url, options, OPTIONAL_CALLBACK_FUNCTION);

Edited to show binding... 编辑以显示绑定...

The bind code is called once, after the widget is initially loaded. 最初加载窗口小部件后，绑定代码将被调用一次。

The ready event is only called once, when the widget is initially loaded, it is not called for each subsequent call using load(). 就绪事件仅被调用一次，最初加载窗口小部件时，随后的每个使用load（）的调用都不会调用ready事件。

try {
  widget.bind(SC.Widget.Events.FINISH, 
  function finishedPlaying() { 
     // your code / function call 
    }
  );
  widget.bind(SC.Widget.Events.PAUSE, 
  function paused() { 
     // your code / function call 
    }
  );
  widget.bind(SC.Widget.Events.PLAY, 
  function playing() { 
     // your code / function call 
     widget.getCurrentSound(function scCurrentSound(sound) {
        // this also binds getCurrent sound which is called
        // each time a new sound is loaded
      });
    }
  );
  widget.bind(SC.Widget.Events.PLAY_PROGRESS, 
  function position(pos) { 
     // your code / function call 
    }
  );
  widget.bind(SC.Widget.Events.SEEK, 
  function seek(pos) { 
     // your code / function call 
    }
  );
  widget.bind(SC.Widget.Events.READY, 
  function ready() { 
     // your code / function call 
    }
  );
} catch(e) {
 // exception handler code
}

Javascript和Soundcloud小部件：如何将新曲目加载到SC小部件iFrame（通过URL）

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-03-05 18:18:31

Javascript和Soundcloud小部件：如何将新曲目加载到SC小部件iFrame（通过URL）

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-03-05 18:18:31

解决方案1
1 已采纳 2016-03-05 18:18:31