- 浏览: 13642508 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (1994)
- Php / Pear / Mysql / Node.js (378)
- Javascript /Jquery / Bootstrap / Web (435)
- Phone / IOS / Objective-C / Swift (137)
- Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux (335)
- Perl / Koha / Ruby / Markdown (8)
- Java / Jsp (12)
- Python 2 / Wxpython (25)
- Codeigniter / CakePHP (32)
- Div / Css / XML / HTML5 (179)
- WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra (275)
- Apache / VPN / Software (31)
- AS3.0/2.0 / Flex / Flash (45)
- Smarty (6)
- SEO (24)
- Google / Facebook / Pinterest / SNS (80)
- Tools (22)
最新评论
-
1455975567:
xuezhongyu01 写道wocan23 写道我想问下那个 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
xuezhongyu01:
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
18335864773:
试试 pageoffice 在线打开 PDF 文件吧. pag ...
jquery在线预览PDF文件,打开PDF文件 -
青春依旧:
opacity: 0.5; 个人喜欢这种方式!关于其他css特 ...
css透明度的设置 (兼容所有浏览器) -
July01:
推荐用StratoIO打印控件,浏览器和系统的兼容性都很好,而 ...
搞定网页打印自动分页问题
Wordpress 音频播放器 Wordpress audio player with jQuery
Wordpress audio player with jQuery
How to use Wordpress audio player (standalone version) with jQuery and jQuery SWFObject (progressive enhancement).
<!-- SECTION "Wordpress audio player with jQuery" [1-272] -->
Example 1: basic
HTML
<a class="audio" href="audio/reason.mp3"> Audio: An Electronic Reason </a>
Javascript
<!-- SECTION "Example 1: basic" [273-705] -->
$('.audio').each(function(){ audio_file = $(this).attr('href'); $(this).flash( { swf: 'flash/audioplayer.swf', flashvars: { soundFile: audio_file } } ); });
Example 2: several synchronized players
Javascript
<!-- SECTION "Example 2: several synchronized players" [706-1488] -->
// close other audio players // called by audio player when click on play button function ap_stopAll(player_id) { $('.audio').each(function(){ if($(this).attr('href') != player_id) { $(this).find('object')[0].SetVariable("closePlayer", 1); } else { $(this).find('object')[0].SetVariable("closePlayer", 0); } }); } $(document).ready(function() { $('.audio').each(function(){ audio_file = $(this).attr('href'); $(this).flash( { swf: 'flash/audioplayer.swf', flashvars: { playerID: "'" + audio_file + "'", soundFile: audio_file } } ); }); });
Notes
How it works:
-
players are given an id upon initialization
-
when click on play button, player calls
ap_stopAll()
with its id as parameter -
ap_stopAll(): stops all players but the one with this id
-
the id here is the audio file path, but anything else is possible.
<!-- SECTION "Notes" [1489-1786] -->
Example 3: real world
HTML
<p> <a class="audio" href="audio/reason.mp3" id="reason"> Audio: An Electronic Reason </a> </p> <p> <a class="audio" href="audio/sunday.mp3" id="sunday"> Audio: By Sunday Afternoon </a> </p>
Javascript
// close other audio players // called by audio player when click on play button function ap_stopAll(player_id) { $('.audio_flash').each(function(){ if($(this).attr('id') != player_id) { $(this).find('object')[0].SetVariable("closePlayer", 1); } else { $(this).find('object')[0].SetVariable("closePlayer", 0); } }); } $(document).ready(function() { $('.audio').each(function() { audio_file = $(this).attr('href'); audio_title = $(this).text(); audio_id = $(this).attr('id'); div = $('<div class="audio_flash" id="' + audio_id + '"></div>'); $(this).after(div); $(this).after(audio_title); $(this).remove(); div.flash( { swf: 'flash/audioplayer.swf', flashvars: { soundFile: audio_file, playerID: "'" + audio_id + "'", quality: 'high', lefticon: '0xFFFFFF', righticon: '0xFFFFFF', leftbg: '0x357CCE', rightbg: '0x32BD63', rightbghover: '0x2C9D54', wmode: 'transparent' }, height: 50 } ); }); });
<!-- SECTION "Example 3: real world" [1787-3238] -->
Notes
-
meaningful HTML: visitors without Javascript get a download link, otherwise it's replaced by plain text and the player
-
the appearance can be customized with many options (bottom of the page).
-
the default white space before and after the player is reduced by the “height” Flash parameter.
-
use of a custom id (set on the HTML link)
<!-- SECTION "Notes" [3239-3682] -->
Download
<!-- SECTION "Download" [3683-] -->
- jquery_audio_player.zip (1.4 MB)
- 下载次数: 55
发表评论
-
使用jQuery和Pure.CSS创建一个可编辑的表格
2016-08-26 02:24 1185使用开源组件真的可以 ... -
2016十大优秀jQuery插件推荐
2016-08-26 02:24 2266当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时 ... -
jQuery .tmpl() 用法
2016-08-26 02:22 1177参考效果: DEMO 下载: jquery-tmpl-ma ... -
jQuery:从零开始,DIY一个jQuery(2)
2016-08-19 03:06 1017在上篇文章我们简单实 ... -
jQuery:从零开始,DIY一个jQuery(1)
2016-08-19 03:00 947从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅 ... -
Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar
2016-08-18 06:15 1553先看上面图片的效果,下面是代码: .navbar .nav ... -
jQuery: 操作select option方法集合
2016-08-18 06:06 3304每一次操作select的时候,总是要谷歌一下资料,真是太不爽 ... -
jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
2016-08-16 05:31 1205原文:http://www.codeceo.com/arti ... -
jQuery: 选择器(DOM,name,属性,元素)
2016-08-11 01:17 4463出处:http://www.cnblogs.com/star ... -
jQuery: 合并表格中相同文本的相邻单元格
2016-08-01 08:02 1343一、效果 二、代码 <!DOCTYPE ... -
Bootstrap 3: 使用注意box-sizing细节及解决方法
2016-08-01 07:58 1560一、bootstrap样式 在Bootstrap v3.3 ... -
域名详解
2016-07-29 12:51 826域名 域名就是用来唯 ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-20 13:39 2279代码: <link href="http: ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-19 07:12 718代码: <link href=" ... -
jQuery:无限循环两个或者多个事件 click / toggle between two functions
2016-07-19 07:12 1594插件: (function($) { $.fn. ... -
javascript 中面向对象实现 如何继承
2016-07-14 01:01 505上一篇博客已经说了关于javascript中的封装, 其中也 ... -
javascript 中的面向对象实现 如何封装
2016-07-12 12:27 1184javascript 是一门很灵活的语言,也是一门有缺陷的语 ... -
AngularJS jQuery 共存法则
2016-06-14 05:26 3576寻找正确的方法,如何在AngularJS里使用jQuery ... -
七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX
2016-06-04 05:28 1104AngularJS学习列表:七步 ... -
七步从Angular.JS菜鸟到专家(2):Scopes
2016-06-04 05:27 696AngularJS学习列表:七步走 Angular.js 从 ...
相关推荐
WordPress漂亮的音乐播放器插件Aplayer
在上图中,点击Add New添加新的歌曲,title输入标题,URL中输入地址,这里建议在WordPress根目录中建一个audio的目录,把你希望播放的歌曲放在里面,然后,在URL地址中输入这些歌曲的URL地址(这些歌曲用英文来命名,...
Amazing Audio Player Enterprise是一款能够帮助用户快速的制作出一个HTML5音乐播放器的小工具,做好的播放器可以作为插件整合到Wordpress博客系统中去! 软件介绍:用户只需将需要播放的音乐添加到软件中然后选择...
WordPress Audio Player 汉化版使用方法:解压文件,把解压出来的audio-player文件夹上传到WordPress博客的wp-content/plugins 目录下,登陆博客后台 到插件中启用audio-player插件即可。然后在设置中根据需要对插件...
Disk Audio Player For WordPress WordPress的磁盘音频播放器" ---------- 泰森云每天更新发布最新WordPress主题、HTML主题、WordPress插件、shopify主题、opencart主题、PHP项目源码、安卓项目源码、ios项目源码,...
标签的浏览器,而对不支持HTML5的浏览器的原始WP Audio Player有所保留。 最初,这将是,但最终我破坏了该项目的默认CSS,以至于我决定从头开始从事该项目。 结果是一个精简,平均的样式表,具有大量的定制潜力。去...
S3MediaVault - Amazon S3 Video & Audio Player and File Security for WordPress S3MediaVault - 亚马逊S3视频和音频播放器和WordPress的文件安全性" ---------- 泰森云每天更新发布最新WordPress主题、HTML主题...
WordPress - Sticky HTML5 Music Player With Continuous Playback - Example Music
Lono - Responsive HTML5 Audio Player With Playlist WordPress Plugin LONO - 响应HTML5带播放列表WordPress插件的音频播放器" ---------- 泰森云每天更新发布最新WordPress主题、HTML主题、WordPress插件、...
固定音频WordPress主题 演示: : 特征 超级极简主义主题是完全定制的。 大部分只是剥离零件。 用户浏览时持续存在的音频播放器 通过类似SPA的感觉 音频播放器是一个Web组件 Gulp构建过程
WavePlayer - WordPress Audio Player with Waveform and Playlist Waveplayer - wordpress音频播放器waveform和播放列表" ---------- 泰森云每天更新发布最新WordPress主题、HTML主题、WordPress插件、shopify主题...
ZoomSounds - WordPress Wave Audio Player with Playlist zoomsounds - wordpress波浪音频播放器与播放列表" ---------- 泰森云每天更新发布最新WordPress主题、HTML主题、WordPress插件、shopify主题、opencart...
McPlayer是一个全功能HTML5 / JS / AJAX音频播放器,带有播放列表和WordPress插件。 描述 McPlayer是使用来自的JS构建的 jQuery的页面过渡不引人注目。 jQueryHTML5音频和视频 带有播放列表和简约视图的Web音频...
WordPress视频插件可以在WordPress网站的文章中插入相应的视频进行播放。1.支持WP版本:WordPress 4.5.x / WordPress 4.2.x2.多终端跨平台适配:支持PC终端,适配安卓终端,iOS苹果终端观看(支持mp4视频格式)3.支持6...
Visual Composer Addon - Chameleon Audio Player for WPBakery Page Builder Visual Composer Addon - WPBakery页面构建器的变色龙音频播放器" ---------- 泰森云每天更新发布最新WordPress主题、HTML主题、...
该脚本会找到指向页面上没有相应音频播放器的音频文件(现在是 MP3 文件)的链接,并为它们添加音频播放器。 我将添加对其他音频格式的支持,在浏览器中检测 HTML5 音频播放器支持,自定义播放器的位置,并且在某些...
喜欢音乐的朋友们,一定非常期望有一款专属于自己博客的“个性音乐播放器”吧…… 最近为wordpress音乐插件 Flash Media player 设计了一款黑白主题皮肤,如下图 效果预览 / 下载地址 Flash Media player是一款...
Hana Flv Player 是一个在 WordPress 中应用比较广泛的播放器插件, 该插件内置了5种媒体播放器,其播放文件以 flv 文件为主, 并将插入文件的按钮集成到 WordPress 后台的编辑界面上方便用户操作, 实在是一个...