jplayer multiple instances one page - however the amount is variable

Question

I am currently working with jPlayer to give the user some audio playback, if they wish to hear an audio sample, there is a slight complication in that the user first all creates a search, that can return a variable amount of audio files on the results page.

I have looked at the docs for jPlayer and it looks like you need to create a jPlayer instance for each audio file you wish to play, their examples are hard coded, which is great if you know that you will get the same number of results everytime you search for a sample. However for me 1 search could return 1 clip while another search could return 60 clips.

I have tried to implement multiple instances of jplayer like this, but to no avail as I get no audio output.

$('.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>");
    });

How can I create a new jplayer instance for each of my audio clips? Below is the example from the Docs,

$("#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")});

taken from the source at,

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

Answer 1

use this: http://kolber.github.io/audiojs/ i have this on my portfolio website i'm working on and it's working very fine until now and i need this a lot on a soundtrack portfolio

hope it helps

Answer 2

in your case you only need one instance of jPlayer. If your Search Results HTML looked like this:

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

then you could add this javascript to play the track:

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