jplayer несколько экземпляров одной страницы - однако сумма является переменной - PullRequest
Новая
       12

jplayer несколько экземпляров одной страницы - однако сумма является переменной

1 голос
/ 24 ноября 2011

В настоящее время я работаю с 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/

Ответы [ 2 ]

3 голосов
/ 28 ноября 2011

в вашем случае вам нужен только один экземпляр 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")}); 
});
0 голосов
/ 05 мая 2013

используйте это: http://kolber.github.io/audiojs/ У меня есть это на моем сайте портфолио, я работаю, и до сих пор работает очень хорошо и мне это очень нужно в портфолио саундтреков

надеюсь, это поможет

...