1

私は現在 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/

4

2 に答える 2

3

あなたの場合、必要な jPlayer のインスタンスは 1 つだけです。検索結果の 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")}); 
});
于 2011-11-27T21:52:02.927 に答える