1、首先是3个包导入
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/jPlayer/js/jquery.jplayer.min.js"></script>
<link href="<%=request.getContextPath()%>/jPlayer/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
注：下面两个是在官网中下载demo中自带的http://www.jplayer.org/
2、在网页<body>中添加层
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1"
title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1"
title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1"
title="max volume">max volume</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-repeat" tabindex="1"
title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1"
title="repeat off">repeat off</a></li>
</ul>
</div>
</div>
</div>
</div>
3、然后是加载插件
$(function ()
{
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
//mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3"
});
},
swfPath: "js",
supplied: "mp3"
});
});
下面是一些属性介绍：
supplied: "mp3" 表示支持的文件类型,例如:"m4a, oga"等
swfPath: "js" 路径相关，可以不管
$(this).jPlayer("setMedia",{}) 设置播放文件地址
想自己点击莫个按钮，然后把语音文件地址传过来，然后播放指定的语音文件，可以这样
$("#jquery_jplayer_1").jPlayer("setMedia", {
mp3:url
}).jPlayer("play");
其中jquery_jplayer_1为<body>标签中用于显示该控件的层的ID，url为传过来的语音文件地址,.jPlayer("play");达到自动播放
分享到：
相关推荐
在深入学习jQuery.jPlayer时，可以通过解压并查看压缩包中的"jQuery.jPlayer.2.0.0.demos"目录，逐个研究每个示例的HTML、CSS和JavaScript代码，理解其工作原理，并根据自身项目需求进行定制。通过这种方式，开发者...
**jQuery.jPlayer.2.4.0：一个强大的JavaScript音频和视频播放器** jQuery.jPlayer是基于流行的JavaScript库jQuery开发的一款高效、灵活的多媒体播放器。这个版本2.4.0提供了一整套功能，使得在网页上实现高质量的...
<script src="path/to/jquery.jplayer.js"> <link href="path/to/jplayer.css" rel="stylesheet" type="text/css" /> <div id="jquery_jplayer_1" class="jp-jplayer"> <!-- 这里可以放置播放器控件和相关元素 --...
《jQuery.jPlayer.2.0.0.source：深入解析JavaScript音乐播放器的源码之美》 在Web开发中，提供良好的用户体验是至关重要的，而多媒体元素的集成是提升体验的关键一环。jQuery.jPlayer是一个流行的JavaScript库，它...
获取Audio音乐的总时长所需的js文件，引入HTML页面即可使用。
《jQuery.jPlayer.2.0.0.demos》是一个基于jQuery的开源项目，它提供了丰富的多媒体播放器功能，尤其适用于Web开发中的音频和视频播放需求。jPlayer是这个项目的主体，是一个JavaScript库，旨在简化多媒体内容在网页...
这是一个关于播放的项目，是相关于jQuery.jPlayer.2.2.0.source播放器使用方法的一个Demo。 实现批量加入播放器，下载（分布下载，测试单个2.5G文件可下载）、批量下载兼容IE8，FF，谷歌播放器，（360，搜狗等不兼容...
这是一个关于播放的项目，是相关于jQuery.jPlayer.2.2.0.source播放器使用方法的一个Demo。 实现批量加入播放器，下载（分布下载，测试单个2.5G文件可下载）、批量下载兼容IE8，FF，谷歌播放器，（360，搜狗等不兼容...
通过深入研究《jQuery.jPlayer.1.2.0.demos》这个压缩包，开发者不仅可以学会如何使用jPlayer，还能了解到多媒体播放器开发的一般原理和实践技巧，从而在自己的项目中实现高质量的多媒体播放功能。
快速学习jplayer的最好方法就是先套用他这个实例，都是拿来就可以使用的，不需要修改。
<script src="js/jquery.jplayer.min.js" type="text/javascript"> ``` 接下来，创建一个`div`元素作为jPlayer的容器，并设置相应的类名，如`jp-gui`和`jp-player`： ```html <div id="jquery_jplayer_1" class=...
1. **引入库文件**：在 HTML 文件中，引入 jPlayer 的 CSS 和 JavaScript 文件，通常包括 `jquery.jplayer.min.css` 和 `jquery.jplayer.min.js`。 2. **设置容器**：创建一个 div 元素作为 jPlayer 的容器，例如 `...
今天我们要来分享一款非常精巧的jQuery音乐播放器插件jPlayer，这款jQuery音乐播放器的外观非常迷人，可以自定义漂亮的播放器背景图片，而且播放器需要的功能它都齐全，更完美的是，这款jQuery音乐播放器还支持分享...
2. **下载jPlayer**：从官方网站获取最新版本的jQuery.jPlayer插件，例如此处的jQuery.jPlayer.2.2.0。 3. **引入jPlayer脚本**：在HTML中添加jPlayer的JavaScript和CSS链接。 4. **准备HTML结构**：创建一个包含...
<script src="http://jplayer.org/latest/js/jquery.jplayer.min.js"> ``` **2. jPlayer的基本结构** jPlayer使用HTML5的`<audio>`或`<video>`元素作为基础，通过jQuery选择器定位这些元素，并应用插件。创建一个...
$("#jquery_jplayer_1").on($.jPlayer.event.pause, function() { console.log("已暂停"); }); ``` **总结** JPlayer是一个强大而灵活的JavaScript音频和视频播放器，它通过简单的API和丰富的插件生态系统，为...
<link href="js/jquery.jplayer.min.css" rel="stylesheet" type="text/css"> <script src="js/jquery.min.js"> <script src="js/jquery.jplayer.min.js"> <div id="jquery_jplayer_1" class="jp-jplayer"> ...
对于那些仍然使用旧版浏览器的用户，Jplayer通过适配和优化，使得音乐播放功能得以正常运行，提高了用户体验。 2. **播放完成事件** Jplayer支持监听播放完成事件，这意味着开发者可以编写JavaScript代码来响应...