最近应公司要求需要一个MP3播放的插件，网上找了很多插件，看来看去还是jPlayer用着最舒服也最容易扩展。所以就找了个资料研究了下，简单做了个小DEMO。支持实时控制列表，常见的播放器功能。

jPlayer中可扩展的强大功能很多，暂时也用不上，等着后来人去发掘了。

废话说完了。进入正题。

插件里就这么多东西。大概分出来之后：

add-on文件夹里是播放列表控制的js文件，里面预设了很多播放和列表控制的方法。

jplayer不用说了，插件的主题。

examples……（这个没人有疑问的我相信这个世界不会是满满的恶意）

lib里是插件本身用到的一些js对象调用，可以不用太过关心，因为如果要改动这个代码才能符合需求的话，建议还是换个插件吧。

skin是皮肤选项，这个很常规了。

以上，其实我们需要关注的地方是add-on里面的东西，开发中需要改，要最多使用的也是这个。

下面是DEMO的核心代码：

HTML头：

<head>

<meta http-equiv="Content-Type" charset="utf-8" />

<link href="../../skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="../../lib/jquery.min.js"></script>

<script type="text/javascript" src="../../dist/jplayer/jquery.jplayer.min.js"></script>

<script type="text/javascript" src="../../dist/add-on/jplayer.playlist.js"></script>

</head>

需要引用的东西就这几个，所有东西都可以在插件内部文件夹中找到

HTML部分：

<div id="jquery_jplayer_1" class="jp-jplayer"></div>

<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">

    <div class="jp-type-playlist">

        <div class="jp-gui jp-interface">

            <div class="jp-controls">

                <button class="jp-previous" role="button" tabindex="0">previous</button>

                <button class="jp-play" role="button" tabindex="0">play</button>

                <button class="jp-next" role="button" tabindex="0">next</button>

                <button class="jp-stop" role="button" tabindex="0">stop</button>

            </div>

            <div class="jp-progress">

                <div class="jp-seek-bar">

                    <div class="jp-play-bar"></div>

                </div>

            </div>

            <div class="jp-volume-controls">

                <button class="jp-mute" role="button" tabindex="0">mute</button>

                <button class="jp-volume-max" role="button" tabindex="0">max volume</button>

                <div class="jp-volume-bar">

                    <div class="jp-volume-bar-value"></div>

                </div>

            </div>

            <div class="jp-time-holder">

                <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>

                <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>

            </div>

            <div class="jp-toggles">

                <button class="jp-repeat" role="button" tabindex="0">repeat</button>

                <button class="jp-shuffle" role="button" tabindex="0">shuffle</button>

            </div>

        </div>

        <div class="jp-playlist">

            <ul>

                <li>&nbsp;</li>

            </ul>

        </div>

    </div>

</div>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>：这个层是用来装填播放器对象的，播放器本身是需要flash支持的。
<div id="jp_container_1"……：这个层不多说了，就是拼出的控制按钮的样子，播放，暂停等
<div class="jp-playlist">……：这个是用来加载初始化的播放列表的，播放列表的格式写法，稍后会说到。
*以上的代码跟官方的DEMO基本一样的，大家也可以从jPlayer官方网站上找到。

JS调用部分：
var JP=new jPlayerPlaylist({

    jPlayer: "#jquery_jplayer_1",

    cssSelectorAncestor: "#jp_container_1"

}, [

{

    title:"remix",

    mp3:"http://yxz.pengkaikj.com/fjmp/resources/remix.mp3",

    oga:"http://yxz.pengkaikj.com/fjmp/resources/remix.ogg"

}

], {

    swfPath: "../../dist/jplayer",

    supplied: "mp3, oga",

    wmode: "window",

    useStateClassSkin: true,

    autoBlur: false,

    smoothPlayBar: true,

    keyEnabled: true

});

JS调用时实际上就是初始化一个Jplay的对象。里面的jPlayer是指存放播放器falsh的容器，然后cssSelectorAncestor是控制那些按钮的容器，中括号内是一个json数组，数组内是初始化的播放列表，至于里面存在MP3和oga两个节点的问题，这里是因为jPlayer里在默认检测资源的时候检测这两种的，你可以根据需要修改，修改方式稍后会提到。

到这里你已经可以实现一个最基本的播放器了，不妨试试吧。

最后要说的是jplayer.playlist.js这个文件，他在插件的dist/add-on文件夹内。

        _createListItem: function(media) {

            var self = this;

            var listItem = "<li><div>";

            listItem += "<a href='javascript:;' class='remove " + this.options.playlistOptions.removeItemClass + "'>&times;</a>";

            if(media.free) {

                var first = true;

                listItem += "<span class='" + this.options.playlistOptions.freeGroupClass + "'>(";

                $.each(media, function(property,value) {

                    if($.jPlayer.prototype.format[property]) {

                        if(first) {

                            first = false;

                        } else {

                            listItem += " | ";

                        }

                        listItem += "<a class='" + self.options.playlistOptions.freeItemClass + "' href='" + value + "' tabindex='-1'>" + property + "</a>";

                    }

                });

                listItem += ")</span>";

            }

            listItem += "<a href='javascript:;' class='" + this.options.playlistOptions.itemClass + "' tabindex='0'>" + media.title + (media.artist ? " <span class='jp-artist'>by " + media.artist + "</span>" : "") + "</a>";

            listItem += "</div></li>";

            return listItem;

        },

这个是插件中初始化播放列表的代码，代码里是遍历我们刚才说到的json数组，拼接成预设好的html字符串，输出到html中的，所以看官们可以根据需要自行修改。

add: function(media, playNow) {

            $(this.cssSelector.playlist + " ul").append(this._createListItem(media)).find("li:last-child").hide().slideDown(this.options.playlistOptions.addTime);

            this._updateControls();

            this.original.push(media);

            this.playlist.push(media);

            if(playNow) {

                this.play(this.playlist.length - 1);

            } else {

                if(this.original.length === 1) {

                    this.select(0);

                }

            }

        },

这个是已经实现的添加音乐的方法，类似的方法有很多，这里不再一一列举，需要的可以自行阅读代码，代码本身很漂亮的哟

这里我实现了一个在html中直接添加音乐的方式，以供参考：

function addMusic(){

    var media=new Object();

    media={title:"nawm",mp3:"http://yxz.pengkaikj.com/fjmp/resources/nawm.mp3",oga:"http://yxz.pengkaikj.com/fjmp/resources/nawm.ogg"};

    JP.add(media,false);

}

JP对象是上文中我们提到的初始化的播放器对象，这里可以直接用播放器对象调用各种方法，里面的参数，第一个media参数要等同于json数组里的一个元素的格式，第二个是用来控制是否马上播放新添加的音乐。

以上就是JP的基础DEMO，与官网的DEMO大同小异。

演示地址：http://yxz.pengkaikj.com/Jplayer/examples/blue.monday/demo-02.htm

官方网站：http://www.jplayer.org/（英文版）    http://www.jplayer.cn/（中文版）

Jplayer小样的更多相关文章

  1. 一个MP3播放的插件jPlayer

    Jplayer小样   最近应公司要求需要一个MP3播放的插件,网上找了很多插件,看来看去还是jPlayer用着最舒服也最容易扩展.所以就找了个资料研究了下,简单做了个小DEMO.支持实时控制列表,常 ...

  2. HTML5使用jplayer播放音频、视频

    首先推上神器 jPlayer:基于HTML5/Flash的音频.视频播放器 jPlayer是一个JavaScript写的完全免费和开源 (MIT) 的jQuery多媒体库插件 (现在也是一个Zepto ...

  3. 兼容IE7音乐播放器之jplayer的使用

    首先列出为何要写这篇随笔的原因: 1:兼容IE7 2:音乐播放器 3:任意控制播放器 1: 最近做的网站需要兼容IE7,在此之前已经写好了关于音乐播放的插件,火狐,IE8以上,以及谷歌浏览器等都可以随 ...

  4. jquery+jplayer实现歌词同步的mp3音乐播放器效果

    实例预览 下载地址 实例代码 <div class="container"> <div class="demo"> <textar ...

  5. 基于jPlayer的三分屏制作

    三分屏,这里的三分屏只是在一个播放器里同时播放三个视频,但是要求只有一个控制面板同时控制它们,要求它们共享一个时间轨道.这次只是简单的模拟了一下功能,并没有深入的研究. 首先,需要下载jPlayer, ...

  6. 利用开源jPlayer播放.flv视频文件

    最近工作中用到视频播放,在网上搜索对比了好几款开源播放插件后,觉得 jPlayer 是比较不错的,故作此记录! 接下来先快速的展示一下 利用jPlayer播放.flv视频的效果: <!DOCTY ...

  7. Jplayer歌词同步显示插件

    http://blog.csdn.net/wk313753744/article/details/38758317 1.该插件是一个jquery的编写的跟jplayer实现歌词同步的插件,最终效果如图 ...

  8. jplayer中动态添加列表曲目（js提取request中的list数据作为js参数使用）

    jplayer 的播放列表使用如下: $(document).ready(function(){ new jPlayerPlaylist({ jPlayer: "#jquery_jplaye ...

  9. [jPlayer] HTML5 Audio & Video for jQuery

    ---------------------------------------------------------------------------------------------------- ...

随机推荐

  1. friend keyword 对于模板 并不只不过友元！！！

    friend是C++中封装的漏网之鱼. C++中的friend同意其它的类或者是函数訪问本类的不论什么成员.甚至是private成员,仅仅要该类声明其为友元. 但是,在有些情况下,并非同意外界訪问类的 ...

  2. 蚁群算法和简要matlab来源

    1 蚁群算法原理 从1991由意大利学者 M. Dorigo,V. Maniezzo 和 A. Colorni 通过模拟蚁群觅食行为提出了一种基于群体的模拟进化算法--蚁群优化.极大关注,蚁群算法的特 ...

  3. java 对map排序

    public static Map<String, String> sortMapByKey(Map<String, String> map) { if (map == nul ...

  4. 【hadoop之翊】——基于CentOS的hadoop2.4.0伪分布安装配置

    今天总算是把hadoop2.4的整个开发环境弄好了,包括 windows7上eclipse连接hadoop,eclipse的配置和測试弄得烦躁的一逗比了~ 先上一张成功的图片,hadoop的伪分布式安 ...

  5. Asp.net 视频摘要

    Asp.net一遍又一遍视频最近,例如中,大多数的实现.由于原因的版本号,.当然学过是学过.总结不可缺少. 先宏观后微观.刚学完,感觉知识特别乱,所以先画了张图: watermark/2/text/a ...

  6. 微渠道发展 BAE交通运输平台和java呼声，微信mysql数据库开发实例 --图文开发教程

    持续更新 BAE java开展mysql数据库 图文教程 BAE java语言发展mysql源码下载: 目前微信的发展.BAE开展.java开展.mysql教程开发非常,的介绍基于BAE平台.java ...

  7. Android的第二次增加SurfaceView基本使用

    本文来源于http://blog.csdn.net/hellogv/ ,引用必须注明出处. 上次介绍MediaPlayer的时候略微介绍了SurfaceView,SurfaceView因为能够直接从内 ...

  8. Android - 数据存储 －存储文件

    Android使用的文件系统和其他平台的基本磁盘的文件系统很相似.这里将要介绍如何使用File API在Android文件系统中读写文件. File对象适合按顺序读写大量的数据.例如,适合图片文件或者 ...

  9. C# WinForm dataGridView 技巧小结

    1.不显示第一个空白列RowHeaderVisible属性设置为false 2.点击cell选取整行SelectinModel属性FullRowSelectRowSelectinModel属性设置或用 ...

  10. Xcode 6 AutoLayout Size Classes

    1.基本概念 在iPad和iPhone 5出现之前,iOS设备就唯独一种尺寸. 我们在做屏幕适配时须要考虑的唯独设备方向而已. 而非常多应用并不支持转向,这种话就全然没有屏幕适配的工作了. 随着iPa ...