javascript - 从 Angular Controller 控制 SoundCloud js sdk

Question

我正在尝试从 Angular Controller 内控制 SoundCloud js sdk，但我不确定如何操作。文档坚持认为它是从脚本标签加载的:

<script src="//connect.soundcloud.com/sdk.js"></script>

但是将它放在局部 View 中会导致脚本无法加载。我试过一些可以加载脚本并将其从 Controller 添加到 DOM 的方法，如下所示:

        function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

var Initialize = function() {

    SC.initialize({
        client_id: 'YOUR_CLIENT_ID'
    });

    SC.get('/tracks', { q: $scope.searchQuery, license: 'cc-by-sa' }, function(tracks) {
        $scope.searchResults = tracks;
        console.log(tracks);
    });
};

loadScript("http://connect.soundcloud.com/sdk.js", Initialize); 

但是我无法从 Controller 中的其他方法访问播放器。

我研究过使用 http api，但它看起来很困惑，最好使用 sdk。

我是 Angular 的新手，也是 SoundCloud sdk 的新手。最好将 Soundcloud 作为一项服务引入吗？模块？我该怎么做？

我的 Controller

angular.module('RoomCtrl', []).controller('RoomController', function($scope ,$http) {

$scope.tagline = 'the square root of 69 is 8 somethin';

$scope.play = function(id) {
    SC.stream("/tracks/" + id, function(sound){
        sound.play();
    });
}

$scope.searchQuery = "Trophies";

});

我的部分

<style>
html                    { overflow-y:scroll; }
body                    { padding-top:50px; }
#todo-list              { margin-bottom:30px; }
</style>
<div class="jumbotron text-center">
<h1>SoundCloud Player</h1>

<p>{{ tagline }}</p>

<div ng-click="play()">Play TUNES</div>
<div ng-click="pause()">PUASE</div>
</div>
<input type="text" ng-model="searchQuery"/>

<ul>
<li ng-repeat="songs in searchResults" ng-click="play(songs.id)">
    {{songs.title}}
</li>
</ul>

总体问题:

我怎样才能在我的 Controller 中的任何地方使用 SC？

如何在不使用脚本标签的情况下加载 sdk？

Answer 1

我建议您使用 Soundcloud 作为一项服务，这样您就可以从任何地方访问播放器。

当您调用 SC.stream 时，您必须将该对象的声音保存在某处，因为该对象具有停止、暂停、恢复、onfinish 等事件的方法。

This code is working:
$scope.play = function(id){
   SC.stream("/tracks/" + id ,function(sound){
      // Save sound, it holds all the data needed to stop, resume, etc.
      $scope.soundObj = sound;
      sound.play({
      onfinish: function() {              
          //Start a new song or something.
        }
      });
  });
}

$scope.pause = function(){
  $scope.soundObj.pause();
}

我知道这个答案已经晚了，但可以帮助寻找同样东西的人。