Question

我正在创建一个插件，可以从soundcloud或用户自己的列表中加载播放列表信息。为此，我设置了如果在名为“播放列表”的选项中有一个数组，它将加载该信息。以下是代码：

<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');   
                }

我一直试图以类似于我拉动soundcloud json的方式加载信息，但是我收到的成功不大。我的问题是，在语义上这样做的最佳方式是什么？

为了方便起见，我创建了jsfiddle here，但由于代理问题，脚本无法正常运行

Answer 1

这有助于你吗？

// 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
});

jQuery - 从选项中加载数组信息

1 个答案: