SoundCloud SDK 播放功能 - trackId 未定义

Posted 2023-02-25

【中文标题】SoundCloud SDK 播放功能 - trackId 未定义

【英文标题】：SoundCloud SDK Play Function - trackId Undefined

【发布时间】：2016-01-26 18:56:45

【问题描述】：

为什么第一次播放时 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

【参考方案1】：

你应该在歌曲已经加载的时候及时移动轨道和旋转对象的创建，里面：

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

查看plunk

【讨论】：

非常感谢您。这确实解决了播放问题，但是现在已经导致向前和向后的函数抛出（未捕获的类型错误：player.stop 不是函数）。对此有什么想法吗？那段代码是不是错位了？

实际上，看起来 stop 不是 javascript api 的功能 - 而是可以重置搜索。更重要的是，play 函数也会抛出一个错误：（Uncaught TypeError: Cannot read property 'play' of undefined）。

通过移动var播放器；在文档的顶部，我避免了未定义的问题。停止声音对象并在曲目跳过时重新启动它似乎存在一些问题。

请检查更新的重构 plunk，可能会给出一个想法。

Artem - 太棒了。这就是我一直在寻找的。你摇滚。