从Soundcloud获取artwork_url，并在自定义SC/SM2播放器中显示专辑封面

Question

我一直在努力弄清楚如何从artwork_url中使用声云API，以便将每个封面输出到这个定制播放器中，并且在播放列表中，在自己的曲目旁边有每一个合适的拇指？

我知道我需要使用artwork_url属性，但是我不知道这是如何实现的，也不知道如何将它集成到这个特殊的自定义播放器插件中。

任何代码示例，特别是和/或帮助是非常感谢的！

注意:如果能够通过其他方式控制艺术品的“大小”也是很好的，那就是CSS。

最好的

编辑#1

我切换了Heroku上的Soundcloud自定义播放器，因为在我能够启动和运行之后，我发现它有一个更快的加载时间，这与我上面提到的最初的播放器(尽管那个仍然很棒).

然而，我现在仍然面临着同样的任务--如何将专辑艺术添加到脚本中并相应地输出？

粘贴在下面的是赫鲁库播放器：

// # SoundCloud Custom Player

// Make sure to require [SoundManager2](http://www.schillmania.com/projects/soundmanager2/) before this file on your page.
// And set the defaults for it first:

soundManager.url = 'http://localhost:8888/wp-content/themes/earpeacerecords/swf';
soundManager.flashVersion = 9;
soundManager.useFlashBlock = false;
soundManager.useHighPerformance = true;
soundManager.wmode = 'transparent';
soundManager.useFastPolling = true;

// Wait for jQuery to load properly

$(function(){

    // Wait for SoundManager2 to load properly

    soundManager.onready(function() {

        // ## SoundCloud
        // Pass a consumer key, which can be created [here](http://soundcloud.com/you/apps), and your playlist url.
        // If your playlist is private, make sure your url includes the secret token you were given.

        var consumer_key = "915908f3466530d0f70ca198eac4288f",
                url = "http://soundcloud.com/poe-epr/sets/eprtistmix1";     

        // Resolve the given url and get the full JSON-worth of data from SoundCloud regarding the playlist and the tracks within.

        $.getJSON('http://api.soundcloud.com/resolve?url=' + url + '&format=json&consumer_key=' + consumer_key + '&callback=?', function(playlist){

            // I like to fill out the player by passing some of the data from the first track.
            // In this case, you'll just want to pass the first track's title.

            $('.title').text(playlist.tracks[0].title);

            // Loop through each of the tracks

            $.each(playlist.tracks, function(index, track) {

                // Create a list item for each track and associate the track *data* with it.

                $('<li>' + track.title + '</li>').data('track', track).appendTo('.tracks');

                // * Get appropriate stream url depending on whether the playlist is private or public.
                // * If the track includes a *secret_token* add a '&' to the url, else add a '?'.
                // * Finally, append the consumer key and you'll have a working stream url.

                url = track.stream_url;

                (url.indexOf("secret_token") == -1) ? url = url + '?' : url = url + '&';

                url = url + 'consumer_key=' + consumer_key;

                // ## SoundManager2
                // **Create the sound using SoundManager2**

                soundManager.createSound({

                    // Give the sound an id and the SoundCloud stream url we created above.

                    id: 'track_' + track.id,
                    url: url,

                    // On play & resume add a *playing* class to the main player div.
                    // This will be used in the stylesheet to hide/show the play/pause buttons depending on state.

                    onplay: function() {

                        $('.player').addClass('playing');

                        $('.title').text(track.title);

                    },
                    onresume: function() {

                        $('.player').addClass('playing');

                    },

                    // On pause, remove the *playing* class from the main player div.

                    onpause: function() {
                        $('.player').removeClass('playing');
                    },

                    // When a track finished, call the Next Track function. (Declared at the bottom of this file).

                    onfinish: function() {
                        nextTrack();
                    }

                });

            });

        });

        // ## GUI Actions

        // Bind a click event to each list item we created above.

        $('.tracks li').live('click', function(){

            // Create a track variable, grab the data from it, and find out if it's already playing *(set to active)*

            var $track = $(this),
                    data = $track.data('track'),
                    playing = $track.is('.active');

            if (playing) {

                // If it is playing: pause it.

                soundManager.pause('track_' + data.id);             

            } else {

                // If it's not playing: stop all other sounds that might be playing and play the clicked sound.

                if ($track.siblings('li').hasClass('active')) { soundManager.stopAll(); }

                soundManager.play('track_' + data.id);

            }

            // Finally, toggle the *active* state of the clicked li and remove *active* from and other tracks.

            $track.toggleClass('active').siblings('li').removeClass('active');

        });

        // Bind a click event to the play / pause button.

        $('.play, .pause').live('click', function(){

            if ( $('li').hasClass('active') == true ) {

                // If a track is active, play or pause it depending on current state.

                soundManager.togglePause( 'track_' + $('li.active').data('track').id ); 

            } else {

                // If no tracks are active, just play the first one.

                $('li:first').click();

            }

        });

        // Bind a click event to the next button, calling the Next Track function.

        $('.next').live('click', function(){
            nextTrack();
        });

        // Bind a click event to the previous button, calling the Previous Track function.

        $('.prev').live('click', function(){
            prevTrack();
        });

        // ## Player Functions

        // **Next Track**

        var nextTrack = function(){

            // Stop all sounds

            soundManager.stopAll();

            // Click the next list item after the current active one. 
            // If it does not exist *(there is no next track)*, click the first list item.

            if ( $('li.active').next().click().length == 0 ) {
                $('.tracks li:first').click();
            }

        }

        // **Previous Track**

        var prevTrack = function(){

            // Stop all sounds

            soundManager.stopAll();

            // Click the previous list item after the current active one. 
            // If it does not exist *(there is no previous track)*, click the last list item.

            if ( $('li.active').prev().click().length == 0 ) {
                $('.tracks li:last').click();
            }

        }

    });

});

编辑#2

所以奇怪的是我能想出办法..。我不知道它的语义是否正确.

$.getJSON('http://api.soundcloud.com/resolve?url=' + url + '&format=json&consumer_key=' + consumer_key + '&callback=?', function(playlist){

            // I like to fill out the player by passing some of the data from the first track.
            // In this case, you'll just want to pass the first track's title.

            $('.title').text(playlist.tracks[0].title);
            $('.album_art').attr('src', playlist.artwork_url);

            // Loop through each of the tracks

            $.each(playlist.tracks, function(index, track) {

                // Create a list item for each track and associate the track *data* with it.

                $('<li>' + '<img src="' + playlist.artwork_url + '">' + track.title + '</li>').data('track', track).appendTo('.tracks');

                // * Get appropriate stream url depending on whether the playlist is private or public.
                // * If the track includes a *secret_token* add a '&' to the url, else add a '?'.
                // * Finally, append the consumer key and you'll have a working stream url.

                url = track.stream_url;

                (url.indexOf("secret_token") == -1) ? url = url + '?' : url = url + '&';

                url = url + 'consumer_key=' + consumer_key;

                // ## SoundManager2
                // **Create the sound using SoundManager2**

                soundManager.createSound({

                    // Give the sound an id and the SoundCloud stream url we created above.

                    id: 'track_' + track.id,
                    url: url,

                    // On play & resume add a *playing* class to the main player div.
                    // This will be used in the stylesheet to hide/show the play/pause buttons depending on state.

                    onplay: function() {

                        $('.player').addClass('playing');

                        $('.title').text(track.title);

                    },
                    onresume: function() {

                        $('.player').addClass('playing');

                    },

                    // On pause, remove the *playing* class from the main player div.

                    onpause: function() {
                        $('.player').removeClass('playing');
                    },

                    // When a track finished, call the Next Track function. (Declared at the bottom of this file).

                    onfinish: function() {
                        nextTrack();
                    }

                });

            });

编辑#3

下面是HTML和CSS标记，与播放器一起工作，以获得更好的澄清.

            <div class='title'></div>
            <a class='prev'>Previous</a>
            <a class='play'>Play</a>
            <a class='pause'>Pause</a>
            <a class='next'>Next</a>
        </div>

CSS

/* 
-------------------------------------------------------------------------
Soundcloud Player
-------------------------------------------------------------------------
*/

#sticky_header #sticky_content .player {
    height: 570px;
    overflow: hidden;
}

#sticky_header #sticky_content .tracks {

}

#sticky_header #sticky_content .tracks li {
    cursor: pointer;    
    height: 40px;
    text-align: left;
}

#sticky_header #sticky_content .tracks li img.album_art {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    margin-right: 15px; 
}

#sticky_header #sticky_content .title {

}

#sticky_header #sticky_content .prev {

}

#sticky_header #sticky_content .play {
    display: block; 
}

#sticky_header #sticky_content .playing .play {
    display: none; 
}

#sticky_header #sticky_content .pause {
    display: none; 
}

#sticky_header #sticky_content .playing .pause {
    display: block; 
}

#sticky_header #sticky_content .next {}

Answer 1

要获得图像，可以使用以下代码：

//get element by id from your iframe
var widget = SC.Widget(document.getElementById('soundcloud_widget'));
widget.getCurrentSound(function(music){
    artwork_url = music.artwork_url.replace('-large', '-t200x200');
    $('#song1').css('background', 'url(\"'+artwork_url+'\") ');
});

正常情况下，在末尾有一个带有"-large“的链接，大小为100x100。如果你想要其他尺寸的话，你必须像我一样用".replace“来改变结尾。有可用大小的列表可以在这里找到：

https://developers.soundcloud.com/docs/api/reference#tracks (我的尺寸200x200不是列出而是工作的)。也许还有更多的尺寸，比如每百px。)

目前，代码只适用于实际播放的歌曲。对我来说，这不是一个解决方案，因为我需要我的播放列表中的所有图片。

Answer 2

在这里迭代从API中检索到的轨道发生了：

// Loop through each of the tracks
$.each(playlist.tracks, function(index, track) {
  // Create a list item for each track and associate the track *data* with it.
  $('<li>' + track.title + '</li>').data('track', track).appendTo('.tracks');

在迭代器函数中，您现在可以访问track.artwork_url，并可能将其设置为某个元素的背景图像或背景，例如：

$('<li><img src=" + track.artwork_url + "></img>' + track.title + '</li>').data('track', track).appendTo('.tracks');

我希望这能帮到你。

UPD.在您更新的代码中，您应该参考track.artwork_url而不是playlist--然后您将得到每一首曲目的个别艺术品。