如何获得与API的SoundCloud播放列表的每个轨道？ [英] 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导入他的音乐的网站的SoundCloud的API。有迹象表明，应该重新presents所有专辑不同的标签 - 这是在SC数据库上传 - 你可以看到这个图片上。这个我有一个具有以下code完成的：
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）该专辑的所有曲目，包含启动和停止按钮来播放每首曲目，并在
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.
推荐答案
这是每个播放列表包含的曲目组成的数组（见的 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).
您应该能够遍历数组，并有效地连接在你的问题中code一起，虽然你会希望在标记或者使用类或生成每个单独的ID填充相关的值在HTML播放列表（可能像播放列表+ 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));
});
});
});
编辑：
很高兴它的工作适合你（我在香草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...)
要流式传输的声音，所有你需要做的是一个事件监听器分配给＆LT; A /＆GT; 元素，从<$ C抢道ID $ C>数据属性父节点，并调用 SC.stream 通过id变量 - 参见下面的例子（见的 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).
（注意：的变化都需要上述code - 使用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上三次：检查是否有声音对象已存储已经 - 如果是这样，只需拨打播放（）存储的对象无需重新实例来的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();
}
});
这篇关于如何获得与API的SoundCloud播放列表的每个轨道？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
