jPlayer - play series of mp3 files with poster

Question

I'm trying to modify the jPlayer QuickStart project to play a series of mp3 files sequentially, each one with its own poster image. This is basically just using html, JavaScript, jQuery and CSS.

(QuickStart is here, for reference: http://jplayer.org/latest/quick-start-guide/)

Below is my current code, which is not working (not playing even the first mp3 or audio file).

$(document).ready(function() {
    var m = [{
        mp: "data/audio1.mp3",
        p: "data/Slide1.PNG"
    }, {
        mp: "data/audio2.mp3",
        p: "data/Slide2.PNG"
    }, {
        mp: "data/audio3.mp3",
        p: "data/Slide3.PNG"
    }];
    $("#jquery_jplayer_1").jPlayer({
        ready: function() {
            $.each(m, function(index, value) {
                alert(value.mp);
                $(this).jPlayer("setMedia", {
                    mp3: value.mp,
                    poster: value.p
                }).jPlayer("play");
            });
        },
        swfPath: "/js",
        supplied: "mp3",
        size: {
            width: "960px",
            height: "720px"
        }
    });
});

The alert(value.mp); is telling me I am getting the file names ok.

I have tried it with and without the jPlayer("play"), no luck either way.

If I remove the each line, and just use something like m[0].mp and m[0].p, I can play any given mp3 and display any given PNG. But the "each" approach is not working to play each of the mp3 files sequentially along with its associated image.

I know that jPlayer has a listplayer add-on, but it has a lot of functionality I don't need, so I'd rather not use it if I can do this with a few lines of code.

Answer 1

Here's what I've worked out to play the mp3s and display the associated posters sequentially. It's based on the jPlayer ended event.

$(document).ready(function() {
    var m = [{
        mp: "data/a24x2x1.mp3",
        p: "data/Slide1.PNG"
    }, {
        mp: "data/a24x3x1.mp3",
        p: "data/Slide2.PNG"
    }, {
        mp: "data/a24x4x1.mp3",
        p: "data/Slide3.PNG"
    }];
    var n = 0;
    $("#jquery_jplayer_1").jPlayer({
        ready: function() {
            $("#jquery_jplayer_1").bind($.jPlayer.event.ended, function(event) {
                if (n < m.length - 1) {
                    n++;
                } else {
                    alert("do something after the last slide");
                    return;
                }
                $(this).jPlayer("setMedia", {
                    mp3: m[n].mp,
                    poster: m[n].p
                }).jPlayer("play");
            });
            $(this).jPlayer("setMedia", {
                mp3: m[n].mp,
                poster: m[n].p
            }).jPlayer("play");
        },
        swfPath: "/js",
        supplied: "mp3",
        size: {
            width: "960px",
            height: "720px"
        }
    });
});