Javascript & Soundcloud Widget：如何将新曲目加载到 SC Widget iFrame（通过 URL）

Question

我见过不同的网络应用程序，如 Playmoss、Whyd 和 Songdrop 等。我认为，它们必须利用 Soundcloud Embedded Widget 才能产生连续播放多个曲目的功能，而不是分开播放一组/（播放列表）。目前我在使用以下库重现此功能时遇到问题，因此我决定尝试编写自己的库：

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

我对编写 javascript 很陌生，但我的下面代码将加载第一首曲目，并在点击“就绪”绑定后播放。一旦点击“完成”绑定，它将跳转到 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 的桥接来控制加载曲目进入嵌入式播放器。由于某种原因，由于连接速度较慢，下一首曲目并不总是加载到播放器中，使用 "bridge"。我希望在 currentTrack 完成之前将 nextTrackURL 提供给事物的 javascript 端，这样桥就不会传送任何东西并且 Javascript 可以单独处理新的轨道加载。

Answer 1

我想你想使用加载功能为新曲目指定url

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

已编辑以显示绑定...

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

ready 事件只调用一次，当小部件最初加载时，不会在每次使用 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 & Soundcloud Widget：如何将新曲目加载到 SC Widget iFrame（通过 URL）

Javascript & Soundcloud Widget: How to load new track into SC Widget iFrame (via URL)

javascript

widget

soundcloud