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

debugcn 发表于 Dev

用户名

我正在尝试修改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”）和不使用jPlayer（“ play”）了，两种方法都不运气。

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

我知道jPlayer有一个listplayer附加组件，但是它有很多我不需要的功能，所以如果我能用几行代码来做到这一点，我宁愿不使用它。

用户名

这就是我努力播放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"
        }
    });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。