2012-09-28 3 views
0

soundcloud 또는 사용자 자신의 목록에서 재생 목록 정보를로드 할 수있는 플러그인을 만들고 있습니다. 이렇게하려면 '재생 목록'이라는 옵션에 배열이 있으면 해당 정보를로드합니다. 아래는 코드입니다 : 나는 내가 사운드 클라우드 JSON을 뽑아 방법과 유사한 방식으로 정보를로드하기 위해 노력 해왔다jQuery - 옵션에서 배열 정보로드

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.test').Tarabu({ 
     soundcloud_user: '', 
     soundcloud_clientId: "bcc776e7aa65dbc29c40ff21a1a94ecd", 
     playlist: [ 
      { 
       title:"Cro Magnon Man", 
       artist:"The Stark Palace", 
       mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3", 
       oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg", 
       poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png" 
      },{ 
       title:"Cro Magnon Man", 
       artist:"The Stark Palace", 
       mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3", 
       oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg", 
       poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png" 
      } 
     ] 
    }); 
}); 

(function($) { 

$.fn.Tarabu = function(options) { 
    $.fn.Tarabu.defaults = { 
     soundcloud_user: null, 
     soundcloud_clientId: null, 
     playlist: 'soundcloud' 
    }; 
    var o = $.extend({}, $.fn.Tarabu.defaults, options); 
    return this.each(function() {   
     //Determine playlist type. If soundcloud is set as the playlist it will load either the complete user set (soundcloud_user must be set) or selected sets. If local playlists have been set it will load them. 
     if (o.playlist == 'soundcloud') { 
      alert('soundcloud'); 
      //Determine if the soundcloud API client ID is set. This is required to access json data. 
      if(typeof(o.soundcloud_clientId) != "undefined" && o.soundcloud_clientId !== null) { 
       //Determine if the user is set and then load all sets. 
       if(typeof(o.soundcloud_user) != "undefined" && o.soundcloud_user !== null) { 
        alert('soundcloud user set'); 
        $.getJSON('http://api.soundcloud.com/users/'+ o.soundcloud_user +'/playlists.json?client_id=' + o.soundcloud_clientId, { get_param: 'value' }, 
        function(playlists_data) { 
         $.each(playlists_data, function(index, playlists) { 
         //Get playlists data 
         i = 1; 
         $.getJSON(playlists.uri + '.json?client_id=' + o.soundcloud_clientId, { get_param: 'value' }, function(playlist) { 
          $("<div class='player row' id='id" + i +"'><div class=' four columns'><div class='artwork'><img /></div></div><div class='playlist eight columns'><div class='description'></div><ol class='tracks'></ol></div></div>").appendTo('.soundcloud'); 
          //get track data 
          $.each(playlist.tracks, function(index, track) { 
           // Create a list item for track, associate it's data, and append it to the track list. 
           var $li = $('<li class="track_' + track.id + '">' + (index + 1) + '. ' + track.title + '</li>').data('track', track).appendTo('#id'+i+' .tracks'); 
          // Find the appropriate stream url depending on whether the track has a secret_token or is public. 
           url = track.stream_url; 
           (url.indexOf("secret_token") == -1) ? url = url + '?' : url = url + '&'; 
           url = url + 'client_id=' + o.client_id; 
          }); 
          i++   
         }); 
        }); 
        }); 
       } else { 
        alert('soundcloud not user set'); 
       } 

그러나 나는 약간의 성공을 만났다. 제 질문은 의미 론적으로 그렇게하는 가장 좋은 방법은 무엇입니까? 편의성을 위해서

, 나는 그러나 스크립트가 프록시

답변

0

이 도움이 당신을 발행 인해 제대로 실행되지 않습니다하는 jsfiddle here 만들었습니다?

// Soundcloud app ID 
var $appID = (your app ID), 
// Soundcloud playlist JSON object url 
,$listurl = 'http://api.soundcloud.com/playlists/5696199.json?client_id=' + $appID 
,$i = 0 
,tracks = new Array() 
,trackdata = new Array() 
,playlist = new Array(); 

// Get the JSON object (the playlist) 
$.ajax({ 
    url: $listurl, 
    async: false, 
    success: function(listdata) { 
     // Iterate through the object and create array of tracks in the playlist 
     $.each(listdata.tracks, function(key, val) { 
      tracks[$i] = val; 
      $i++; 
     }); 
     // Now, for each of the tracks, save the necessary track info formatted as options for jPlayerPlaylist, all in another array 
     for (var i=0; i < tracks.length; i++) { 
      trackdata[i] = {title: tracks[i].title, mp3: tracks[i].stream_url + '?client_id=' + $appID, url: tracks[i].permalink_url, sc:"true"} 
     } 
     // Next, stack all these arrays into one array for use in the jPlayer playlist 
      for(i=0;i<trackdata.length;i++){ 
       playlist.push(trackdata[i]); 
    } 
    } 
}); 

// Instantiate the jPlayer playlist object, using the Soundcloud playlist array 
new jPlayerPlaylist({ 
    jPlayer: "#jquery_jplayer_1", 
    cssSelectorAncestor: "#jp_container_1" 
}, 
playlist, 
{ 
    playlistOptions: { 
     autoPlay: false 
    }, 
    loop: true, // For restarting the playlist after the last track 
    swfPath: "../js", 
    supplied: "mp3, m4a, oga", 
    smoothPlayBar: true, 
    keyEnabled: true 
}); 
관련 문제