javascript - jPlayer-用海报播放一系列mp3文件

Question

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

(快速入门在这里，供引用:http://jplayer.org/latest/quick-start-guide/)

下面是我当前的代码，该代码无法正常工作(甚至无法播放第一个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"
        }
    });
});

警报(value.mp); 告诉我文件名正确。

我尝试过使用 和不使用 jPlayer(“play”)的情况，但无论如何都没有运气。

如果我删除每条行的 ，并仅使用 m [0] .mp 和 m [0] .p 之类的东西，我可以播放任何给定的mp3并显示任何给定的PNG。但是，“每种”方法无法按顺序播放每个mp3文件及其关联的图像。

我知道jPlayer有一个listplayer附加组件，但是它有很多我不需要的功能，所以如果我可以用几行代码来完成操作，我就不希望使用它。

Answer 1

这就是我努力播放mp3并按顺序显示关联的海报的方法。它基于jPlayer的结束的事件。

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