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

Posted 2023-02-25

【中文标题】jplayer 多个实例一页 - 但是数量是可变的

【英文标题】：jplayer multiple instances one page - however the amount is variable

【发布时间】：2011-11-24 10:25:22

【问题描述】：

我目前正在使用 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/

【问题讨论】：

是的，我们对页面进行了重新建模，因此我们不需要多个实例。

【参考方案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")); 
);

【参考方案2】：

使用这个：http://kolber.github.io/audiojs/ 我在我正在开发的投资组合网站上有这个，到目前为止它工作得很好 我在配乐组合中非常需要这个

希望对你有帮助