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

【问题标题】：jPlayer - play series of mp3 files with posterjPlayer - 用海报播放一系列 mp3 文件
【发布时间】：2014-10-09 22:47:59
【问题描述】：

我正在尝试修改 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"
        }
    });
});

alert(value.mp); 告诉我文件名正常。

我在有和没有 jPlayer("play") 的情况下都试过了，不管怎样都没有运气。

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

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

【问题讨论】：

标签： javascript jquery audio jquery-plugins jplayer

【解决方案1】：

这是我为播放 mp3 和按顺序显示相关海报所做的工作。它基于 jPlayer ended 事件。

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

【讨论】：