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（“播放”）时尝试过，无论如何都没有运气。

如果我删除每个行，只使用 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"
        }
    });
});

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

1 个答案: