最近应公司要求需要一个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. [Unity3D]转让Android介面

    简单介绍 有一些手机功能.Unity没有提供对应的接口.比如震动,比如不锁屏,比如GPS.比如... 有太多的特殊功能Unity都没有提供接口.这时候,我们就须要通过使用Android原生的ADT编辑 ...

  2. 解决TabActivity中子页面不通过导航跳转到还有一个页面的问题

    问题:当你的导航在TabActivity中 而子页面的一个button须要切换到当中的某一个导航页面 转载请注明出处:http://blog.csdn.net/x605940745 demo下载地址: ...

  3. 阶乘因式分解(一)(南阳oj56)

    阶乘因式分解(一) 时间限制:3000 ms  |  内存限制:65535 KB 难度:2 描写叙述 给定两个数m,n,当中m是一个素数. 将n(0<=n<=10000)的阶乘分解质因数, ...

  4. codeforces #256 A. Rewards

    A. Rewards time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  5. WCF扩展之实现ZeroMQ绑定和protocolBuffer消息编码(二)实现IRequestChannel(2016-03-15 12:35)

    这是这个系列的第二篇,其他的文章请点击下列目录 WCF扩展之实现ZeroMQ绑定和protocolBuffer消息编码(一)概要设计 WCF扩展之实现ZeroMQ绑定和protocolBuffer消息 ...

  6. Ejb in action(两)——示例入门

    在前面的文章中,,我们推出Ejb相关概念.在此之前展开的阐述,我给大家Ejb示例.加深印象. 开发环境:eclipse 应用server:jboss 1.服务端程序 在Eclipse中创建一个Ejb项 ...

  7. C++ Primer 学习笔记_45_STL实践与分析(19)--建筑常规算法

    STL实践与分析 --泛型算法的结构 引言: 正如全部的容器都建立在一致的设计模式上一样,算法也具有共同的设计基础. 算法最主要的性质是须要使用的迭代器种类.全部算法都指定了它的每一个迭代器形參可使用 ...

  8. 浅谈http请求数据分析

    前段时间,我一个朋友给我打了个电话.说是现在在搞网络销售,问我能不能帮他整个自动发帖机.说实在的,以前没有弄过这块,我就跟他讲我试试看吧,能不能成不能保证.毕竟是搞程序的嘛,自学的能力还是有滴.经过一 ...

  9. hibernate的通配符比拼接sql到底好在哪?

    Hibernate对于刚接触的人来说,通配符只是提供了另一种组合sql的方式.接触的久了,熟悉之后,才能够真正理解通配符在Hibernate中起到的作用 主要作用有两点: 1,避免sql注入 hibe ...

  10. Axis2 -POJO

    POJO,Plain Old Java Object,简单Java物. 通告Webservice 1.书写Hello.java public class Hello { public String s ...