Jplayer学习

Jplayer介绍：

JPlayer是一个用于控制和播放mp3文件的jQuery插件，官方宣称The jQuery HTML5 Audio /Video Library。它在后台使用Flash来播放mp3文件，前台播放器外观完全可以使用 XHML/CSS自定义，并有充分的api可供调用，网上很多大神基于Jplayer开发了很多播放器。Janus最初是从城落电台看到专辑列表播放模式 好奇开始搜寻，在这里提供的是在官方基础上稍微修改的Jpalyer，主要特点有：完美支持中文现实；Blue/Red双色供选；五种播放模式。

官网：http://www.jplayer.org/

文档：http://www.jplayer.org/latest/developer-guide/

下载：http://www.jplayer.org/download/

例子：http://www.jplayer.org/latest/demos/

jplayer的使用上官网看看文档或者上网找找资料也就OK了。

注意：好像播放mp3要有服务器环境。

 

Jplay播放Mp3一个自定义播放器外观例子，该例子没有经过验证

效果http://dj520.92game.net/

 

<script language="javascript" type="text/javascript">
    var play_mode = "rand";
    var loop_mode = "list";
    $(document.body).ready(function() {
        $.jPlayer.timeFormat.showHour = true;
        $("#player").jPlayer({
            ready: function(event) {
                $("#list").get(0).selectedIndex = 0;
                $("#list").trigger("change")
            },
            play: function(event) {
                $(".song-name").html(event.jPlayer.status.media.title);
                varid = event.jPlayer.status.media.id;
                varsrc = event.jPlayer.status.src;
                if (id != "undefined") {
                    $("#download").attr("target", "_blank");
                    $("#download").attr("href", src)
                } else {
                    $("#download").attr("target", "");
                    $("#download").attr("href", "#");
                    returnfalse
                }
            },
            ended: function(event) {
                $(".song-name").html("播放完毕");
                if (play_mode == "single" && loop_mode == "single") {
                    varindex = $("#list").get(0).selectedIndex;
                    $("#list").get(0).selectedIndex = index;
                    $("#list").trigger("change")
                }
                elseif(play_mode == "rand") {
                    varmax = document.getElementById("list").options.length;
                    vartargetIndex = GetRandomNum(0, max);
                    $("#list").get(0).selectedIndex = targetIndex;
                    $("#list").trigger("change")
                }
                $(".song-name").html("欢迎使用DJ前卫音乐网播放器!")
            },
            timeupdate: function(event) {
                varpercent = (event.jPlayer.status.currentTime / event.jPlayer.status.duration) * 100;
                $(".seek-bar").css("width", percent + "%");
                $("#duration").html($.jPlayer.convertTime(event.jPlayer.status.duration))
            },
            supplied: "m4a",
            swfPath: "js",
            wmode: "window",
            loop: false,
            volume: 1,
            cssSelectorAncestor: "",
            cssSelector: {
                currentTime: "#playtime",
                duration: "#totaltime",
                seekBar: ".download-bar",
                playBar: ".seek-bar",
                play: ".play",
                pause: ".pause",
                mute: ".mute",
                unmute: ".unmute",
                volumeBar: "#volumn",
                volumeBarValue: ".volumn-bar"
            }
        });
        $(".btn-stop").click(function() {
            $("#playing-state").html("播放停止");
            $("#playing-songname").html("欢迎使用DJ前卫音乐网播放器!");
            $("#player").jPlayer("stop");
            return false
        });
        $("#list").change(function() {
            varurl = $("#list").find("option:selected").val();
            varsongname = $("#list").find("option:selected").text();
            varid = $("#list").find("option:selected").attr("downloadid");
            $("#player").jPlayer("setMedia", {
                title: songname,
                m4a: url,
                id: id
            }).jPlayer("play")
        });
        $(".pre,.next").click(function() {
            vartargetIndex = -1;
            varindex = $("#list").get(0).selectedIndex;
            varmode = null;
            varstate = $("#playing-state").html();
            mode = play_mode;
            switch (mode) {
            case "rand":
                {
                    varmax = document.getElementById("list").options.length;
                    if (loop_mode == "single") {
                        targetIndex = index
                    } else {
                        if (this.className == "premode-bg") {
                            if (index == 0) {
                                targetIndex == document.getElementById("list").options.length - 1
                            } else {
                                targetIndex = index - 1
                            }
                        }
                        elseif(this.className == "next mode-bg") {
                            if (index == document.getElementById("list").options.length - 1) {
                                targetIndex = 0
                            } else {
                                targetIndex = index + 1
                            }
                        }
                    }
                    break
                }
            case "single":
                {
                    if (this.className == "premode-bg") {
                        if (index == 0) {
                            targetIndex = document.getElementById("list").options.length - 1
                        } else {
                            targetIndex = index - 1
                        }
                    }
                    elseif(this.className == "next mode-bg") {
                        if (index == document.getElementById("list").options.length - 1) {
                            targetIndex = 0
                        } else {
                            targetIndex = index + 1
                        }
                    }
                    break
                }
            case "order":
                {
                    if (loop_mode == "single") {
                        targetIndex = index
                    } else {
                        if (this.className == "premode-bg") {
                            if (index == 0) {
                                if (loop_mode == "list") {
                                    targetIndex = document.getElementById("list").options.length - 1
                                }
                                elseif(loop_mode == "none") {
                                    $(".btn-stop").trigger("click")
                                }
                            } else {
                                targetIndex = index - 1
                            }
                        }
                        elseif(this.className == "next mode-bg") {
                            if (index == document.getElementById("list").options.length - 1) {
                                if (loop_mode == "list") {
                                    targetIndex = 0
                                }
                                elseif(loop_mode == "none") {
                                    $(".btn-stop").trigger("click")
                                }
                            } else {
                                targetIndex = index + 1
                            }
                        } else {
                            returnfalse
                        }
                    }
                    break
                }
            }
            if (targetIndex != -1) {
                $("#list").get(0).selectedIndex = targetIndex;
                $("#list").trigger("change")
            }
            returnfalse
        });
        $(".controlsspan a").click(function() {
            $(".controlsspan a.order-mode").removeClass("order-mode-select");
            $(".controlsspan a.random-mode").removeClass("random-mode-select");
            $(".controlsspan a.single-mode").removeClass("single-mode-select");
            varcurrent_classname = $(this).attr("class").split(" ")[0];
            $(this).addClass(current_classname + "-select");
            switch (current_classname) {
            case "order-mode":
                {
                    play_mode = "order";
                    loop_mode = "list";
                    break
                }
            case "single-mode":
                {
                    play_mode = "single";
                    loop_mode = "single";
                    break
                }
            case "random-mode":
                {
                    play_mode = "rand";
                    loop_mode = "list";
                    break
                }
            }
            returnfalse
        })
    });
</script>

 

该代码没有经过验证，只是提供一种自定义播放器外观的方法

效果http://dj520.92game.net/