javascript - 如何拥有一个 jQuery 插件的多个实例

Question

我正在尝试创建一个 SoundCloud 音乐播放器。它可以播放来自 SoundCloud 的任何轨道，但此插件仅在页面中只有一个实例时才有效。因此，如果页面中有两个相同的插件，它将无法工作。

这是一个页面中有两个播放器的示例:JSFiddle

var trackURL = $(".player").text();
$(".player").empty();
$(".player").append("<div class='playBTN'>Play</div>");
$(".player").append("<div class='title'></div>");

var trackId;
SC.get('/resolve', { url: trackURL }, function (track) {
    var trackId = track.id;
    //var trackTitle = track.title;
    $(".title").text(track.title);

    $(".playBTN").on('click tap', function () {
        //trackId = $(".DSPlayer").attr('id');
        stream(trackId);
    });

    // first do async action
    SC.stream("/tracks/" + trackId, {
        useHTML5Audio: true,
        preferFlash: false
    }, function (goz) {
        soundToPlay = goz;
        sound = soundToPlay;
        scTrack = sound;
        //updater = setInterval( updatePosition, 100);
    });
});
var is_playing = false,
    sound;

function stream(trackId) {
    scTrack = sound;
    if (sound) {
        if (is_playing) {
            sound.pause();
            is_playing = false;
            $(".playBTN").text("Play");
        } else {
            sound.play();
            is_playing = true;
            $(".playBTN").text("Pause");
        }
    } else {
        is_playing = true;
    }
}

如果您删除任何包含 .player 类的 div 元素，另一个元素将起作用。所以它只是不起作用，因为同一个插件有两个实例。

我该如何解决？在一个页面中有多个播放器实例？

Answer 1

我已经确定了问题所在。这与您尝试同时加载多个轨道但没有分离代码来执行此操作有关。

正如@Greener 提到的，您需要分别遍历 .player 实例并为每个实例执行 SC.get()。

这是我看到的导致问题的原因:

var trackURL = $(".player").text();

^上面的代码返回一个字符串，其中包含您要连续使用的两个不带空格的 URL。由于这段代码，这会在以后造成问题:

SC.get('/resolve', { url: trackURL }, function (track) {...

这是一个尝试从 SoundCloud 加载相关歌曲的函数。您正在向它传递一个变量“trackURL”，以便它尝试加载特定的 URL。该函数获取一个看起来像“URLURL”的字符串，它所需要的只是“URL”。

您可以做的是遍历所有存在的不同“.player”元素，然后以这种方式调用声音。我稍微修改了您的脚本以使其使用 for 循环工作。我不得不将“empty()”函数移动到 for 循环中以使其正常工作。引用 JQuery 元素数组时必须使用 .eq(index)。

像这样:

var trackURL
var trackId;

for(index = 0; index < $(".player").length; index++){
    trackURL = $(".player").eq(index).text();
    //alert(trackURL);
    $(".player").eq(index).empty();
    $(".player").eq(index).append("<div class='playBTN'>Play</div>");
    $(".player").eq(index).append("<div class='title'></div>");
    SC.get('/resolve', { url: trackURL }, function (track) {
    var trackId = track.id;
    alert(track.id);
    //var trackTitle = track.title;
    $(".title").eq(index).text(track.title);

    $(".playBTN").eq(index).on('click tap', function () {
        //trackId = $(".DSPlayer").attr('id');
        stream(trackId);
    });

    // first do async action
    SC.stream("/tracks/" + trackId, {
        useHTML5Audio: true,
        preferFlash: false
    }, function (goz) {
        soundToPlay = goz;
        sound = soundToPlay;
        scTrack = sound;
        //updater = setInterval( updatePosition, 100);
    });
});
}

这不是一个完全完成的代码，但它会启动两首单独的歌曲“准备好”进行流式传输。我使用注释掉的警报检查了 SoundCloud 给我们的 ID(这表明它现在已加载)。您正在使用流媒体功能以及播放和暂停做一些有趣的事情。这应该让您对发生的事情有一个很好的了解，并且您可以通过这种方式实现您的自定义代码。