獲取artwork_url，並顯示專輯中的自定義SC/SM2播放器涵蓋

Question

我一直試圖弄清楚如何artwork_url可以從soundclouds API爲了用於輸出每個蓋成this custom player，並有下一個合適的每一個拇指到播放列表中的自己曲目？

我知道我需要使用artwork_url屬性，但我不明白這是如何實現的，也不知道如何將它集成到this particular custom player plugin中。
特別感謝任何代碼示例和/或幫助！
注意：也可以通過其他方式控制圖片的「大小」，然後只是CSS。

最佳

---

編輯＃1

我切換了Soundcloud Custom Player on Heroku，因爲我是能夠得到它運行起來，我發現它有對比度更快的加載時間後我以上引用的原始播放器（即使那個仍然非常棒）...

我仍然擺在現在與以前相同的任務 - 如何添加專輯a rt到腳本並相應輸出？

粘貼下面是Heroku球員：

// # 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標記與玩家更好的澄清工作...

HTML

  <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

這裏就是迭代在從API happeninng檢索到的軌道：

// 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 - 然後您將獲得每個曲目的各個作品。

Answer 2

獲得的圖像，你可以使用此代碼：

//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+'\") '); 
}); 

normaly你在最後得到以「 - 高」的鏈接，大小爲100×100。如果你想要其他尺寸，你必須像我一樣用「.replace」來改變結尾。可用大小的列表，你可以在這裏找到：

https://developers.soundcloud.com/docs/api/reference#tracks （。我的尺寸200×200未列出，但工作也許有更多的大小不一樣每一百個像素）

此刻的代碼的工作只爲實際播放的歌曲。對我而言，這不是一個解決方案，因爲我需要播放列表中的所有圖像。