Question

我已经看过不同的网络应用程序，如Playmoss，Whyd和Songdrop等，我相信，我们必须利用Soundcloud嵌入式小工具来制作播放多个音轨的功能，而不是套装的一部分。 /（播放列表）。目前我遇到了使用以下库重现此功能的问题，因此我决定尝试自己编写：

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

我对编写javascript非常陌生，但我的下面代码将加载第一首曲目，并在点击“ready”绑定后播放它。一旦点击“完成”绑定，它将跳转到loadNextTrack（）函数并将下一个轨道URL加载到小部件的iFrame的src中。之后，它永远不会达到原来的“就绪”绑定，然后开始播放。

所以要清理一下，第二首曲目的播放不会开始。

    <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>

我写这个Javascript的全部意义在于，我可以在我的iOS应用程序中使用Swift到Javascript桥接，然后控制将轨道加载到嵌入式播放器中。由于某种原因，通过较慢的连接，下一首曲目并不总是使用“桥”加载到播放器中。我希望在currentTrack完成之前向javascript方面提供nextTrackURL，这样桥就可以传达任何内容，而Javascript只能自己处理新的轨道加载。

Answer 1

我认为你想使用load函数来指定新曲目的网址

来自soundcloud Widget API文档：

load（url，options） - 使用url指定的新窗口小部件重新加载iframe元素。以前添加的所有事件侦听器都将继续工作。 options是一个对象，它允许您定义所有可能的窗口小部件参数以及一个回调函数，该函数将在新窗口小部件准备就绪时立即执行。请参阅下面的窗口小部件参数的详细列表。

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);

编辑显示绑定...

最初加载小部件后，绑定代码会被调用一次。

就绪事件仅被调用一次，当最初加载窗口小部件时，不会使用load（）为每个后续调用调用它。

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＆amp; Soundcloud小部件：如何将新轨道加载到SC Widget iFrame（通过URL）

1 个答案: