Javascript＆Soundcloud小工具：如何加載新的軌道到SC小工具iFrame（通過URL）

我見過不同的網絡應用程序，如Playmoss，Whyd和Songdrop等，我相信，要利用Soundcloud Embedded Widget爲了產生演奏多個音軌的功能，不是在一組/（播放列表）之外。目前，我有再現具有下列庫此功能的問題，所以我決定嘗試寫我自己：Javascript＆Soundcloud小工具：如何加載新的軌道到SC小工具iFrame（通過URL）

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

我是很新的編寫JavaScript，但我下面的代碼，將加載第一軌道，一旦擊中「準備好」的綁定就可以播放它。一旦擊中「完成」綁定，它將跳轉到loadNextTrack（）函數並將下一個軌道URL加載到小部件的iFrame的src中。之後，它不會擊中原來的「ready」綁定，然後開始播放。

因此，要清除的東西，回放不開始第二軌道。

<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是這樣我就可以使用一個斯威夫特爲Javascript橋在我的iOS應用，然後控制軌道裝載到嵌入式播放。出於某種原因，在連接速度較慢的情況下，下一首曲目並不總是使用「橋」加載到播放器中。我希望在currentTrack完成之前將nextTrackURL提供給javascript方面，這樣橋就不會傳遞任何信息，並且Javascript僅處理新的軌道加載。

來源

2016-03-05 David Smith

我想你想使用的負載功能，以指定的URL新的軌道

從的SoundCloud的Widget API文檔：

負載（網址，選項） - 重新裝入一個新的iframe元素由url指定的小部件。之前添加的所有事件監聽器都將繼續工作。 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 
}

來源

2016-03-05 18:18:31 SteveE

好的，謝謝你的加載功能，這工作！它加載下一個音軌，現在我唯一遇到的問題是之前添加的事件監聽器在下一個音軌加載後沒有被調用。我的loadNextTrack函數包含您在上面提供的代碼。 –

即使我被困在同一點....你能解決這個問題嗎？ – ghetal

Javascript＆Soundcloud小工具：如何加載新的軌道到SC小工具iFrame（通過URL）

回答

相關問題