如何使用 Soundcloud API 获取播放列表的每个曲目? [英] How to get each track of a playlist with the Soundcloud API?

问题描述

我正在使用 Soundcloud API 创建自定义播放列表(不同于原始 Soundcloud 播放器的外观).见下图.我正在为一位艺术家开发一个网站.

I am working with the Soundcloud API to create a custom playlist (another look than the original Soundcloud player). See image below. I am develop a website for an artist.

使用 Soundcloud 的 API，我想将他的音乐从 Soundcloud 导入网站.有不同的选项卡应该代表所有专辑——你可以在图片上看到这一点——它们被上传到 SC 数据库中.这是我用以下代码完成的:

With the API of Soundcloud I want to import his music from Soundcloud to the website. There are different tabs that should represents all albums - you can see this on the picture - that are uploaded in the SC database. This I have done with the following code:

SC.get('/users/' + USER + '/playlists', function(playlists) {
    $(playlists).each(function(index, playlist) {
    $('h2').html(playlist.title);

    $('.list-of-links').append($('<li></li>').html('<a href="#">' + playlist.title + '</a>'));
//$('#cover').append($('<li></li>').css('background-image', "url('" + track.artwork_url + "')");
    $("#cover").append('<div><img src="' + playlist.artwork_url.replace('-large', '-t500x500') + '"></div>');

    });
    });

其中 USER 是一个全局变量，其中存储了名称mo-rooneh".

Where USER is a global variable where the name "mo-rooneh" is stored in.

所以这是正确的.现在我想从每张专辑中获取，(1) 专辑标题和 (2) 该专辑的所有曲目，其中包含一个开始和停止按钮来播放每首曲目以及 UL<中列出的喜欢数量/code> 列表.我不知道如何实现这一目标.我现在拥有的是代码返回专辑标题和用户的所有曲目.知道它会为每个专辑发布用户的所有曲目，其他专辑中的曲目也是如此.我想要的是它会向我显示该特定专辑的曲目:

So that's working correct. Now I want to get from each album, (1) the album title and (2) all the tracks of that album, that contains a start and stop button to play each track and the amount of likes listed in a UL list. I don't know how to achieve this. What I have now is that the code returns the album title and all tracks of the user. Know it posts for each album all tracks of the user, so also tracks from other albums. What I want is that it will show me the tracks of that specific album:

SC.connect(function() {

        SC.get('/users/' + USER + '/playlists', function(playlists) {

            $(playlists).each(function(index, playlist) {

                SC.get('/users/' + USER + '/tracks', function(tracks) {

                    $('.test').append($('<h2></h2>').html('<a href="#">' + playlist.title + '</a>'));

                    $(tracks).each(function(index, track) {
                        $('.test').append($('<p></p>').html('<a href="#">' + track.title + '</a>'));

                    });

                });


            });

        });
    });

我期待你的回答.提前致谢.

I look out for your answer. Thanks in advance.

推荐答案

Soundcloud 的开发人员文档指出，每个播放列表都包含一系列曲目(请参阅 https://developers.soundcloud.com/docs/api/reference#playlists).

Soundcloud's developer docs state that each playlist contains an array of tracks (see https://developers.soundcloud.com/docs/api/reference#playlists).

您应该能够通过将问题中的代码有效地连接在一起来遍历数组并使用相关值填充 html，但您可能希望在标记中使用类或为每个播放列表生成单独的 ID(也许类似于 "playlist"+playlist.id).

You should be able to loop through the array and populate the html with the relevant values by effectively joining the code in your question together, though you will want to either use classes in the markup or generate individual IDs for each playlist (maybe something like "playlist"+playlist.id).

进一步编辑:更新为包含一个包含对象，以通过 ID 引用访问每个轨道的方法.

FURTHER EDIT: Updated to include a containing object to access methods for each track by ID reference.

var track_objects = {};

SC.get('/users/' + USER + '/playlists', function(playlists) {

  $(playlists).each(function(index, playlist) {

    // Let's say you have divs with class 'playlist', adhering to the structure of the markup you imply in your question.
    // Store reference to the current playlist
    var $playlist = $('.playlist').eq(index);
    // Populate with values
    $playlist.find('h2').html(playlist.title);
    $playlist.find('.list-of-links').append($('<li></li>').html('<a href="#">' + playlist.title + '</a>'));
    $playlist.find('.cover').append('<div><img src="' + playlist.artwork_url.replace('-large', '-t500x500') + '"></div>');

    // Maybe you would have a ul in each of your playlist divs with a class of tracks...
    // Store reference to the track ul
    var $tracks = $playlist.find('ul.tracks');

    $(playlist.tracks).each(function(i, track) { // Use 'i' so there's no conflict with 'index' of parent loop

      // Your count var is unnecessary, i is 0-indexed so just add 1 to get the track number
      // Note use of track.id here, and different classes for start / stop
      $tracks.append($('<li data-id="' + track.id + '"></li>').html('<a href="#" class="start">Start</a> / <a href="#" class="stop">Stop</a>' + (i + 1) + ' / ' + track.title + ' - ' + track.playback_count));

    });

  });

});

很高兴它对你有用(我已经在 vanilla JS 工作了一段时间，所以我的 jQuery 有点生疏......)

Glad it's working for you (I've been working in vanilla JS for a while so my jQuery is a little rusty...)

要流式传输声音，您需要做的就是为 <a/> 元素分配一个事件侦听器，从 data-attribute 中获取轨道 ID> 的父节点，并使用 id 变量调用 SC.stream - 请参见下面的示例(另请参见 https://developers.soundcloud.com/docs/api/guide#streaming).

To stream a sound, all you need to do is assign an event listener to the <a/> element, grab the track id from the data-attribute of the parent node, and call SC.stream with the id variable - see example below (also see https://developers.soundcloud.com/docs/api/guide#streaming).

(注意:需要对上面的代码进行更改 - 在数据属性中使用 track.id 因为 Soundcloud 的 API 使用 id 而不是标题，并且您需要适当的类开始/停止按钮).

(Note: changes are required to the code above - use track.id in the data-attribute as Soundcloud's API works with the id rather than the title, and you'll want appropriate classes for start/stop buttons).

EDITED THRICE:检查声音对象是否已存储 - 如果已存储，只需在存储的对象上调用 play() 而无需重新实例化 Soundcloud流式对象.

EDITED THRICE: Check to see if the sound object has been stored already - if so, simply call play() on the stored object without needing to reinstantiate the Soundcloud streaming object.

// Depending on jQuery version, you may need 'live()' here
$('a.start').on('click', function(){

  var track_id = $(this).parent().attr('data-id');

  if( typeof track_objects[track_id] !== 'undefined' ){
    // We already have this one, no need to make another call to SC.stream
    var sound = track_objects[track_id];
    sound.play();
  }else{
    // First play requested - we need to load this one
    SC.stream('/tracks/' + track_id, function(sound){
      sound.play();
      // Store sound object
      track_objects[track_id] = sound;
    });
  }

});
// Depending on jQuery version, you may need 'live()' here
$('a.stop').on('click', function(){

  var track_id = $(this).parent().attr('data-id');

  // In case a user clicks stop accidentally on a track that hasn't been played yet, check for undefined here too
  if( typeof track_objects[track_id] !== 'undefined' ){
    var sound = track_objects[track_id];
    sound.stop();
  }

});

这篇关于如何使用 Soundcloud API 获取播放列表的每个曲目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！