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（显示它现在已加载）。您正在使用流功能以及播放和暂停来做一些有趣的事情。这应该可以让您了解正在发生的事情，并且可以通过这种方式实现自定义代码。

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

1 个答案: