Javascript jPlayer-播放带有海报的mp3文件系列

Javascript jPlayer-播放带有海报的mp3文件系列,javascript,jquery,audio,jquery-plugins,jplayer,Javascript,Jquery,Audio,Jquery Plugins,Jplayer,我正在尝试修改jPlayer QuickStart项目,以便按顺序播放一系列mp3文件,每个文件都有自己的海报图像。这基本上只是使用html、JavaScript、jQuery和CSS 此处提供了快速入门,以供参考: 下面是我当前的代码,它不工作,甚至不播放第一个mp3或音频文件 $(document).ready(function() { var m = [{ mp: "data/audio1.mp3", p: "data/Slide1.PNG"

我正在尝试修改jPlayer QuickStart项目,以便按顺序播放一系列mp3文件,每个文件都有自己的海报图像。这基本上只是使用html、JavaScript、jQuery和CSS

此处提供了快速入门,以供参考:

下面是我当前的代码,它不工作,甚至不播放第一个mp3或音频文件

$(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"
        }
    });
});
alertvalue.mp;告诉我文件名没问题

我已经尝试过使用和不使用jPlayerplay,两种方式都没有运气

如果我删除每一行,只使用像m[0].mp和m[0].p这样的东西,我就可以播放任何给定的mp3并显示任何给定的PNG。但是,每种方法都无法按顺序播放每个mp3文件及其相关图像


我知道jPlayer有一个listplayer插件,但它有很多我不需要的功能,所以如果我能用几行代码来实现这一点,我宁愿不使用它。

以下是我为播放MP3和按顺序显示相关海报所做的工作。它基于jPlayer END事件

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