javascript - SoundCloud SDK 播放函数 - trackId 未定义

Question

为什么在第一次播放时未定义 trackId？

跳过轨道后，播放功能将按预期工作。

我正在使用 SoundCloud Javascript SDK 构建一个播放器，但遇到了障碍。当按下播放按钮时，变量 trackId 未定义。不过，我可以跳过轨道以成功播放示例帐户中的每首歌曲。

*注意:我使用 HTML5 小部件和 api 进行了此操作，但其中包含一个 iframe，它不适用于 iPhone 音频播放，因此我需要使用 javascript SDK 来解决此问题。

提前致谢!

开发区:http://dev-mountvalor.legendarylion.com/

文档:https://developers.soundcloud.com/docs/api/sdks#stream

  var songs=[{}];

   // function getPlaylist(){

   //  // currentTrack = songs[1].soundcloud_id;
   //  //  console.log(songs[1].soundcloud_id);
   //  //  console.log(currentTrack);
   // }

 var setList = 'testing-mountain/tracks';


SC.initialize({
            client_id: "ae0b7cf303a1217a43a57c3658e673ff"
        });

         SC.get("/resolve/?url=https://soundcloud.com/" + setList, {limit: 52}, function(userReturn){
            // console.log(userReturn);

            // console.log(userReturn.tracks[1].title);

            // console.log(userReturn.length);

              // iterate through the json and snag the stuff we need, create an associative array out of it
              for (var i = 0; i < userReturn.length; i++) {

                  songs.push(
                    {"title" : userReturn[i].title,
                    "song_url" : "https://soundcloud.com/",
                    "soundcloud_id" : userReturn[i].id, 
                    "artwork" : userReturn[i].artwork_url}
                    );
              }

              // Remove the proto addition to the object
              songs.shift();

              console.log(songs);
              // currentTrack=songs[1].soundcloud_id;
              // console.log(currentTrack);

                 // console.log(songs);
                 // console.log(songs[1].soundcloud_id);

                 // trackID = (songs[1].soundcloud_id);
                 // console.log('trackID is equal to '+ trackID);



              // $( "#track-title" ).empty();
              // $( "#track-title" ).append( "<p> Now Playing: " + userReturn[0].title + "</p><img class='player-thumb' src='" + userReturn[0].artwork_url + "' alt=''>" );

              // getPlaylist();

           });

    Track = function (trackId){
    //Testing mountain sample track
    // var trackId = '240347155';
    //Mount Valor sample track
    // var trackId = '241728584';

    // var setList = 'mountvalor/tracks';



        SC.stream("/tracks/" + trackId, function(sound){
            player = sound;
        });


        this.play = function() {
            player.play();            
        };

        this.pause = function() {
            player.pause();
        };

        this.stop = function() {
            player.stop();
        };
        // console.log(trackId);
    };


    Rotation = function(tracks) {
        var currentTrack = tracks[0];


        this.currentTrack = function () {
            return currentTrack;
        };

        this.nextTrack = function () {
            var currentIndex = tracks.indexOf(currentTrack);
            var nextTrackIndex = currentIndex + 1;
            var nextTrackId = tracks[nextTrackIndex];
            currentTrack = nextTrackId;
            console.log(currentTrack);
            console.log(currentIndex);
            $( "#track-title" ).html( "<p> Now Playing: " + currentTrack.title + "</p><img class='player-thumb' src='" + currentTrack.artwork + "' alt=''>" );
            return currentTrack;
        };

        this.backTrack = function () {
            var currentIndex = tracks.indexOf(currentTrack);
            var nextTrackIndex = currentIndex - 1;
            var nextTrackId = tracks[nextTrackIndex];
            currentTrack = nextTrackId;
            console.log(currentTrack);
            console.log(currentIndex);
            $( "#track-title" ).html( "<p> Now Playing: " + currentTrack.title + "</p><img class='player-thumb' src='" + currentTrack.artwork + "' alt=''>" );
            return currentTrack;
        };

    };

    $(document).ready (function(){

        $('#volume').on('change', function(event){
            player.setVolume($(this).val());
            // console.log($(this).val());
        });
        // console.log(songs);

        var rotation = new Rotation(songs);
        var currentTrack = rotation.currentTrack();
        var currentPlayingTrack = new Track(currentTrack.soundcloud_id);

        $('#play').on('click', function(event){
            currentTrack = rotation.currentTrack();
            currentPlayingTrack.play();
            $('#pause').show();
            $('#play').hide();
        });

      $('.hero-play-button').on('click', function(event){
          // console.log($(this).attr('id'));
          // grab the id of the current element clicked
          var circlePlayButtonId = ($(this).attr('id'));
          //replace the string in that element of the id to get the index counter from the id
          circlePlayButtonId = circlePlayButtonId.replace('circle-play-', '');
          // console.log('The replaced index variable is ' + circlePlayButtonId);
          //play the song based on the index pulled from the id when clicked
          // player.skip(circlePlayButtonId);
          $('#pause').show();
          $('#play').hide();
      });

        $('#pause').on('click', function(event){
            currentPlayingTrack.pause();
            $('#pause').hide();
            $('#play').show();
        });


        $('#next').on('click', function(event){
            currentPlayingTrack.stop();
            currentTrack = rotation.nextTrack();
            currentPlayingTrack = new Track(currentTrack.soundcloud_id);
            currentPlayingTrack.play();
            $('#play').hide();
            $('#pause').show();
        });
         $('#prev').on('click', function(event){
            currentPlayingTrack.stop();
            currentTrack = rotation.backTrack();
            currentPlayingTrack = new Track(currentTrack.soundcloud_id);
            currentPlayingTrack.play();
            $('#play').hide();
            $('#pause').show();
            console.log('backtrack!');
        });


    }); // End Document Ready

Answer 1

当歌曲已经加载时，您应该及时移动轨道和旋转对象的创建，内部:

SC.get("/resolve/?url=https://soundcloud.com/" + setList, {limit: 52})
  .then(function(userReturn){

检查plunk