& JPlayer-MP3播放器（带播放列表） – Jason Long
这是第一次在博客园写自己的东西，写的不好的地方，各位不要见笑。其他的也不多说了，下面是我在工作中用的一个基于JQuery开源的插件，官方地址：http://www.jplayer.org/。先看下要实现的效果图：
首先引用需要的css和js文件：
1 &link href=”Styles/jplayer.blue.monday.css” rel=”stylesheet” type=”text/css” /&2 &script src=”Scripts/jquery-1.8.2.js” type=”text/javascript”&&/script&3 &script src=”Scripts/jquery.jplayer.min.js” type=”text/javascript”&&/script&4 &script src=”Scripts/jplayer.playlist.min.js” type=”text/javascript”&&/script&5 &script src=”Scripts/jquery.blockUI.js” type=”text/javascript”&&/script&&!–只是模拟加载等待的一个插件–&
接下来就是播放器的布局了，原本是英文的，在这里我只翻译了常用的：
&!–播放器设计开始–& 2
&div style=”width: 482 margin: 0px auto 0”& 3
&div id=”jp_container_N” class=”jp-video jp-video-270p”& 4
&div class=”jp-type-playlist”& 5
&div id=”jquery_jplayer_N” class=”jp-jplayer”& 6
&div class=”jp-gui”& 8
&div class=”jp-interface”& 9
&div class=”jp-progress”&10
&div class=”jp-seek-bar”&11
&div class=”jp-play-bar”&12
&div class=”jp-current-time”&16
&div class=”jp-duration”&18
&div class=”jp-controls-holder”&20
&ul class=”jp-controls”&21
&li&&a href=”javascript:;” class=”jp-previous” tabindex=+ title=”上一首”&上一首&/a&&/li&22
&li&&a href=”javascript:;” class=”jp-play” tabindex=+ title=”播放”&播放&/a&&/li&23
&li&&a href=”javascript:;” class=”jp-pause” tabindex=+ title=”暂停”&暂停&/a&&/li&24
&li&&a href=”javascript:;” class=”jp-next” tabindex=+ title=”下一首”&下一首&/a&&/li&25
&li&&a href=”javascript:;” class=”jp-stop” tabindex=+ title=”停止”&停止&/a&&/li&26
&li&&a href=”javascript:;” class=”jp-mute” tabindex=+ title=”静音”&静音&/a&&/li&27
&li&&a href=”javascript:;” class=”jp-unmute” tabindex=+ title=”调节音量”&调节音量&/a&&/li&28
&li&&a href=”javascript:;” class=”jp-volume-max” tabindex=+ title=”最大声音”&最大声音&/a&&/li&29
&div class=”jp-volume-bar”&31
&div class=”jp-volume-bar-value”&32
&ul class=”jp-toggles”&35
&li&&a href=”javascript:;” class=”jp-shuffle” tabindex=+ title=”shuffle”&shuffle&/a&&/li&36
&li&&a href=”javascript:;” class=”jp-shuffle-off” tabindex=+ title=”shuffle off”&shuffle37
off&/a&&/li&38
&li&&a href=”javascript:;” class=”jp-repeat” tabindex=+ title=”单曲循环”&单曲循环&/a&&/li&39
&li&&a href=”javascript:;” class=”jp-repeat-off” tabindex=+ title=”关闭单曲循环”&关闭单曲循环&/a&&/li&40
&div class=”jp-title”&43
&li&&/li&45
&div class=”jp-playlist” style=”height: 500 overflow-y:”&50
&!– The method Playlist.displayPlaylist() uses this unordered list –&52
&li&&/li&53
&div id=’divButton’ style=’width: 103 height: 30 margin: 230px auto 20055
display:’&56
&div class=”jp-no-solution”&59
&span&Update Required&/span& To play the media you will need to either update your60
browser to a recent version or update your &a href=”/flashplayer/”61
target=”_blank”&Flash plugin&/a&.62
&!–播放器设计结束–&
再来看一下运行的效果图：
然后就是将磁盘的歌曲添加到列表中，我是通过ajax请求将本地歌曲库的所有歌曲重新复制一遍到项目的一个存取歌曲的文件夹中。那先看下js代码：
&script type=”text/javascript”& 2
var mTitle, mArtist, path = “”; 3
var myPlaylist = new jPlayerPlaylist(); 4
$(function () { 5
myPlaylist = new jPlayerPlaylist({ 6
jPlayer: “#jquery_jplayer_N”, 7
cssSelectorAncestor: “#jp_container_N” 8
playlistOptions: {11
enableRemoveControls: true12
swfPath: “Scripts”,14
supplied: “mp3″,15
wmode: “window”16
$(“#divButton”).html(“&input type=’button’ id=’btnSearchMusic’ value=’单击获取歌曲’ style=’border:1px solid #48C9EF; background:#48C9EF; cursor: color:# height:30’ /&”).show();18
$(“#btnSearchMusic”).click(function () {19
$.blockUI({ message: ‘&h2&正在加载歌曲，请稍候。。。&/h2&’ });20
$(“#divButton”).hide();21
myPlaylist.remove();22
$.ajax({23
url: “play.ashx?action=GetResourceLists”,24
cache: false,25
success: function (data) {26
var json = eval(“(” + data + “)”);27
if (json.length & 0) {28
for (var i = 0; i & json. i++) {29
var fileName = json[i].OriginalP30
path = json[i].FullP31
var singer = fileName.substring(9, fileName.length);32
mArtist = singer.substring(0, singer.indexOf(“-”));33
var song = singer.substring(0, singer.lastIndexOf(“.”));34
mTitle = song.substring(song.lastIndexOf(“-”) + 1);35
//console.log(mArtist);36
myPlaylist.add({37
title: mTitle,38
artist: mArtist,39
free: true,40
mp3: “http://localhost:3881/MiniPlay/Resources/” + encodeURI(singer)41
$.unblockUI();47
下面是ashx(一般处理程序)的关键代码：
//转换json格式 2
public string FormatJson(int count, List&FileInfo& list) 3
string str = “”; 5
DataContractJsonSerializer json = new DataContractJsonSerializer(list.GetType()); 6
using (MemoryStream ms = new MemoryStream()) 7
json.WriteObject(ms, list); 9
str = Encoding.UTF8.GetString(ms.ToArray());10
//获取所有文件15
public void GetResourceLists(HttpContext context)16
List&FileInfo& files = new List&FileInfo&();18
if (File.Exists(context.Server.MapPath(@”~/config.ini“)))19
StreamReader strReader = new StreamReader(context.Server.MapPath(@”~/config.ini“));21
var path = strReader.ReadToEnd().Substring(5);22
strReader.Close();23
var localFileLists = Directory.GetFiles(path);24
var targetPath = context.Server.MapPath(@”~/Resources“);25
if (!Directory.Exists(targetPath))26
Directory.CreateDirectory(targetPath);28
if (localFileLists.Count() & 0)30
foreach (var counts in localFileLists)32
if (counts.Substring(counts.LastIndexOf(“.“)) == “.mp3“)34
if (!File.bine(targetPath, Path.GetFileName(counts))))
//如果目标存在该文件，不复制36
File.Copy(counts, bine(targetPath, Path.GetFileName(counts)));38
files.Add(new FileInfo(counts));40
context.Response.Write(FormatJson(files.Count(), files));43
context.Response.Write(“no exist“);48
到这里，要实现上面的功能基本已经完成了！
原文地址：
本文链接：，转载请注明。
最新发表文章一款非常强悍的HTML5视频和音频播放器jPlayer
今天要介绍的jPlayer也是基于HTML5的，不过与VideoJS不同是，jPlayer不仅支持播放视频，而且还能播放音频，并且提供了2套默认的皮肤，都非常漂亮，同时...
   
今天要介绍的jPlayer也是基于HTML5的，不过与VideoJS不同是，jPlayer不仅支持播放视频，而且还能播放音频，并且提供了2套默认的皮肤，都非常漂亮，同时它也是基于jQuery的。
由于官方下载回来的文件只有几个核心JS，具体的例子还需要根据上面的教程自己搭建。所以为了方便大家欣赏和学习，我已经将几个demo整理好了，放到了青藤园网站上。下面就一起来看看每个demo的简要实现代码和在线示例：
1、jPlayer作为视频播放器
初始化的js代码：
$(document).ready(function(){
&&&&$(&#jquery_jplayer_1&).jPlayer({
&&&&&&&&ready: function () {
&&&&&&&&&&&&$(this).jPlayer(&setMedia&, {
&&&&&&&&&&&&&&&&m4v: &&,
&&&&&&&&&&&&&&&&ogv: &&,
&&&&&&&&&&&&&&&&webmv: &&,
&&&&&&&&&&&&&&&&poster: &&
&&&&&&&&&&&&});
&&&&&&&&},
&&&&&&&&swfPath: &../js&,
&&&&&&&&supplied: &webmv, ogv, m4v&,
&&&&&&&&size: {
&&&&&&&&&&&&width: &640px&,
&&&&&&&&&&&&height: &360px&,
&&&&&&&&&&&&cssClass: &jp-video-360p&
2、jPlayer作为音频播放器
初始化的js代码：
$(document).ready(function(){
&&&&$(&#jquery_jplayer_1&).jPlayer({
&&&&&&&&ready: function (event) {
&&&&&&&&&&&&$(this).jPlayer(&setMedia&, {
&&&&&&&&&&&&&&&&m4a:&&,
&&&&&&&&&&&&&&&&oga:&&
&&&&&&&&&&&&});
&&&&&&&&},
&&&&&&&&swfPath: &../js&,
&&&&&&&&supplied: &m4a, oga&,
&&&&&&&&wmode: &window&
3、jPlayer作为个性化的环形音频播放器
初始化的js代码：
$(document).ready(function(){
&&&&var myCirclePlayer = new CirclePlayer(&#jquery_jplayer_1&,
&&&&&&&&m4a: &&,
&&&&&&&&oga: &&
&&&&&&&&cssSelectorAncestor: &#cp_container_1&,
&&&&&&&&swfPath: &../js&,
&&&&&&&&wmode: &window&
4、jPlayer作为带播放列表的视频播放器
初始化的js代码：
$(document).ready(function(){
&&&&new jPlayerPlaylist({
&&&&&&&&jPlayer: &#jquery_jplayer_1&,
&&&&&&&&cssSelectorAncestor: &#jp_container_1&
&&&&&&&&&&&&title:&Big Buck Bunny Trailer&,
&&&&&&&&&&&&artist:&Blender Foundation&,
&&&&&&&&&&&&free:true,
&&&&&&&&&&&&m4v: &&,
&&&&&&&&&&&&ogv: &&,
&&&&&&&&&&&&webmv: &&,
&&&&&&&&&&&&poster:&&
&&&&&&&&},
&&&&&&&&&&&&title:&Finding Nemo Teaser&,
&&&&&&&&&&&&artist:&Pixar&,
&&&&&&&&&&&&m4v: &&,
&&&&&&&&&&&&ogv: &&,
&&&&&&&&&&&&webmv: &&,
&&&&&&&&&&&&poster: &&
&&&&&&&&},
&&&&&&&&&&&&title:&Incredibles Teaser&,
&&&&&&&&&&&&artist:&Pixar&,
&&&&&&&&&&&&m4v: &&,
&&&&&&&&&&&&ogv: &&,
&&&&&&&&&&&&webmv: &&,
&&&&&&&&&&&&poster: &&
&&&&&&&&swfPath: &../js&,
&&&&&&&&supplied: &webmv, ogv, m4v&
（责任编辑：php1001）
本文关键字：
广告赞助商
最新视频推荐
Copyright (C) 2007-, All Rights Reserved 版权所有 . 沪ICP备号
地址:上海徐汇区零陵路585号 爱邦大厦26H座
传真(FAX):021-
电话(Tel):021-
PHP100 Website Powered by PHPCMS. For PHP100. 服务器维护：阿里巴巴-阿里云<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&我用jplayer做的播放器不兼容ie
[问题点数：40分]
我用jplayer做的播放器不兼容ie
[问题点数：40分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2013年8月 Web 开发大版内专家分月排行榜第一2010年2月 Web 开发大版内专家分月排行榜第一
2013年7月 Web 开发大版内专家分月排行榜第二2013年6月 Web 开发大版内专家分月排行榜第二
2013年8月 Web 开发大版内专家分月排行榜第一2010年2月 Web 开发大版内专家分月排行榜第一
2013年7月 Web 开发大版内专家分月排行榜第二2013年6月 Web 开发大版内专家分月排行榜第二
本帖子已过去太久远了，不再提供回复功能。懂JPlayer的进，我用的2.4版本，加载本地歌曲时候IE和FF无法播放_jquery吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：20,744贴子：
懂JPlayer的进，我用的2.4版本，加载本地歌曲时候IE和FF无法播放收藏
JPlayer：代码片段：我用的2.4版本，加载本地歌曲时候IE和FF无法播放在Chrome下测试正常是不是对歌曲有要求？还是对系统是否拥有某些flash或者其他的支持有要求才导致？有大神解一下吗万分感谢啊
20年前的ps游戏全新复刻驾临pc端
来人也回答下我的问题呗~
没人用过这个插件吗
注意我的代码,下边那个Partir那首歌是外链jplayer的可以在任何浏览器正常播放,上边的燕尾蝶是我本机的,只在Chrome能正常播放
我记得音频格式会造成某些浏览器播放不了。
楼主，江湖救急啊，我也遇到了同样的问题，外链可以播放，本地播放不了
有个参数可以定义，本地与否。
必须在服务器环境下 这个是浏览器跨域问题 没办法解决
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或}