javascript - jplayer 多个实例一页 - 但是数量是可变的

Question

我目前正在使用 jPlayer 为用户提供一些音频播放，如果他们希望听到音频样本，有一点复杂，因为用户首先创建一个搜索，可以返回可变数量的音频文件在结果页面上。

我查看了 jPlayer 的文档，看起来您需要为每个要播放的音频文件创建一个 jPlayer 实例，它们的示例是硬编码的，如果您知道您将获得相同的数字，那就太好了每次搜索样本时的结果。但是对我来说，1 次搜索可能会返回 1 个剪辑，而另一个搜索可能会返回 60 个剪辑。

我试过像这样实现多个 jplayer 实例，但没有成功，因为我没有音频输出。

$('.jp-audio').each(function(index) {
        var count = index+1;
        $(this).attr("id", "jp_container_"+count)
        $(".jp-stop").hide();
        $("#jquery_jplayer_"+index+1).jPlayer({
                ready: function () {
                    $(this).jPlayer("setMedia", {
                        mp3:$(this).find('a.jp-play').attr('rel'),
                        wav:$(this).find('a.jp-play').attr('rel')
                    });
                },
                play: function() { // To avoid both jPlayers playing together.
                    $(this).jPlayer("pauseOthers");
                },
                swfPath: "/media/js/jPlayer",
                solution: "flash, html",
                supplied: "mp3, wav",
                wmode: "window",
                preload: "auto"
            });
        $('body').append("<div id='jquery_jplayer_"+count+"' class='jp-jplayer'></div>");
    });

如何为我的每个音频剪辑创建一个新的 jplayer 实例？以下是文档中的示例，

$("#jquery_jplayer_1").jPlayer({
    ready: function () {
        $(this).jPlayer("setMedia", {
            m4a: "http://www.jplayer.org/audio/m4a/Miaow-08-Stirring-of-a-fool.m4a",
            oga: "http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg"
        });
    },
    play: function() { // To avoid both jPlayers playing together.
        $(this).jPlayer("pauseOthers");
    },
    repeat: function(event) { // Override the default jPlayer repeat event handler
        if(event.jPlayer.options.loop) {
            $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
            $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
                $(this).jPlayer("play");
            });
        } else {
            $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
            $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function() {
                $("#jquery_jplayer_2").jPlayer("play", 0);
            });
        }
    },
    swfPath: "../js",
    supplied: "m4a, oga",
    wmode: "window"
});

$("#jquery_jplayer_2").jPlayer({
    ready: function () {
        $(this).jPlayer("setMedia", {
            m4a: "http://www.jplayer.org/audio/m4a/Miaow-02-Hidden.m4a",
            oga: "http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
        });
    },
    play: function() { // To avoid both jPlayers playing together.
        $(this).jPlayer("pauseOthers");
    },
    repeat: function(event) { // Override the default jPlayer repeat event handler
        if(event.jPlayer.options.loop) {
            $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
            $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
                $(this).jPlayer("play");
            });
        } else {
            $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
            $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function() {
                $("#jquery_jplayer_1").jPlayer("play", 0);
            });
        }
    },
    swfPath: "../js",
    supplied: "m4a, oga",
    cssSelectorAncestor: "#jp_container_2",
    wmode: "window"
});

$("#jquery_jplayer_3").jPlayer({
    ready: function () {
        $(this).jPlayer("setMedia", {
            m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
            oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
        });
    },
    play: function() { // To avoid both jPlayers playing together.
        $(this).jPlayer("pauseOthers");
    },
    swfPath: "../js",
    supplied: "m4a, oga",
    cssSelectorAncestor: "#jp_container_3",
    wmode: "window"
});

$("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
$("#jplayer_inspector_2").jPlayerInspector({jPlayer:$("#jquery_jplayer_2")});
$("#jplayer_inspector_3").jPlayerInspector({jPlayer:$("#jquery_jplayer_3")});

取自来源，

http://jplayer.org/latest/demo-03/

Answer 1

在您的情况下，您只需要一个 jPlayer 实例。如果您的搜索结果 HTML 如下所示:

<ul> 
    <li data-m4a-path="http://www.example.com/track.m4a">Artist - Track</li>
    < ... >
</ul>

然后你可以添加这个javascript来播放轨道:

$("li[data-m4a-path]").click(function () {
   $("#jquery_jplayer_1").jPlayer("setMedia", {m4a: $(this).attr("data-m4a-path")}); 
});