jQuery语音播放插件
自己做jQuery插件:将audio5js封装成jQuery语音播放插件
日前的一个项目需要用到语音播放功能。发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以下的封装。
首先先简单介绍一下Audio5js吧。
Audio5js是一个能够帮助你解决类似这样的浏览器兼容性问题的js类库,轻量级并且能够很优雅的使用flash向前兼容老版本的浏览器。
其主要特性:
- 拥有完整API来控制“加载”,“播放”,“暂停”,“音量”和“查找”
- 并且可以得到播放内容的具体相关信息
- 不依赖任何类库
- 兼容版本浏览器,包括:IE8, IE9, Chrome 23 (Mac), Firefox 17 (Mac), Safari 6, Opera 12 (Mac), Safari Mobile (iOS 6.0), Webkit Mobile (Android 4.0.4)
Audio5js 官方地址:http://zohararad.github.io/audio5js/
下面开始介绍封装方式
1、自定义jQuery插件方法:jquery.audio5js.js
1 /*!
2 * Jquery Audio5js: 基于Audio5js的Jquery简单封装
3 * http://www.cnblogs.com/yvanwu/
4 * yvan.wu 2015
5 */
6 /**
7 使用方式:
8 如:
9 $("#voice1").audio5js({
10 url : "voice/demo.mp3"
11 });
12 */
13 !function ($) {
14 var Audio = function (element, options) {
15 this.$element = $(element);
16 this.options = $.extend({}, $.fn.audio5js.defaults, options);
17 this.init();
18 };
19 Audio.prototype = {
20 constructor : Audio,
21 // 初始化导航
22 init : function(){
23 var settins = this.options;
24 var ele = this.$element;
25 var audio = this;
26 // 初始化样式
27 ele.addClass(settins['class']);
28 ele.attr("title", settins.title);
29 // 初始化audio5js
30 settins.audio5js = new Audio5js({
31 swf_path: 'https://cdnjscn.b0.upaiyun.com/libs/audio5js/0.1.9/audio5js.swf',
32 ready: function(){
33 this.load(settins.url);
34 ele.click(function(){
35 audio.playPause();
36 });
37 this.on('play', function () {
38 ele.removeClass(settins['class']);
39 ele.addClass(settins.playingClass);
40 }, this);
41 this.on('pause', function () {
42 ele.removeClass(settins.playingClass);
43 ele.addClass(settins['class']);
44 }, this);
45 this.on('ended', function () {
46 ele.removeClass(settins.playingClass);
47 ele.addClass(settins['class']);
48 }, this);
49 //error event passes error object to callback
50 this.on('error', function (error) {
51 //alert("播放出错!");
52 }, this);
53 }
54 });
55 },
56 playPause : function () {
57 var audio5js = this.options.audio5js;
58 if (audio5js.playing) {
59 audio5js.pause();
60 audio5js.volume(0);
61 } else {
62 audio5js.seek(0); //回到最开始的位置
63 audio5js.play();
64 audio5js.volume(1);
65 }
66 },
67 pause : function(){
68 var audio5js = this.options.audio5js;
69 if (audio5js.playing) {
70 audio5js.pause();
71 audio5js.volume(0);
72 }
73 },
74 play : function(){
75 var audio5js = this.options.audio5js;
76 if (!audio5js.playing) {
77 audio5js.play();
78 audio5js.volume(1);
79 }
80 },
81 getAudio5js : function(){
82 return this.options.audio5js;
83 }
84
85 };
86 $.fn.audio5js = function (option, value) {
87 var methodReturn;
88
89 var $set = this.each(function () {
90 var $this = $(this);
91 var data = $this.data('audio');
92 var options = typeof option === 'object' && option;
93 if (!data) {
94 $this.data('audio', (data = new Audio(this, options)));
95 }
96 if (typeof option === 'string') {
97 methodReturn = data[option](value);
98 }
99 });
100 return (methodReturn === undefined) ? $set : methodReturn;
101 };
102
103 $.fn.audio5js.defaults = {
104 url : "", //音频文件地址
105 title : "点击播放",
106 'class' : "audio", // 正常样式class
107 playingClass : "audio-playing", // 播放时样式class
108 audio5js : {}
109 };
110
111 $.fn.audio5js.Constructor = Audio;
112 }(window.jQuery);
2、语音插件样式:jquery.audio5js.css
1 /*播放样式*/
2 .audio {
3 cursor: pointer;
4 background: url("../images/voice.png") 0 -512px no-repeat;
5 width: 60px;
6 height: 60px;
7 vertical-align: middle;
8 display: inline-block;
9 }
10 .audio-playing {
11 cursor: pointer;
12 background: url("../images/voice.gif") 0 0 no-repeat;
13 width: 60px;
14 height: 60px;
15 vertical-align: middle;
16 display: inline-block;
17 }
3、案例页面:demo.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Jquery Audio5js Demo</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <link rel="stylesheet" href="css/jquery.audio5js.css" />
7 <script type="text/javascript" src="https://cdnjscn.b0.upaiyun.com/libs/jquery/1.8.3/jquery.min.js"></script>
8 <script type="text/javascript" src="https://cdnjscn.b0.upaiyun.com/libs/audio5js/0.1.9/audio5.min.js"></script>
9 <script type="text/javascript" src="js/jquery.audio5js.js"></script>
10 </head>
11
12 <body>
13 标准案例:点击图片可以播放/暂停<br />
14 <span id="voice1" ></span>
15
16 <br />
17 <br />
18 <br />
19 JS控制:<br />
20 <input type="button" value="播放/停止" onclick="$('#voice1').audio5js('playPause')" />
21 <input type="button" value="播放" onclick="$('#voice1').audio5js('play')" />
22 <input type="button" value="暂停" onclick="$('#voice1').audio5js('pause')" />
23 <script type="text/javascript">
24 $(function(){
25 $("#voice1").audio5js({
26 url : "voice/demo.mp3"
27 });
28 });
29 </script>
30 </body>
31 </html>
4、样式的图片资源与案例的音频文件在第5点中,请另行下载。
5、完整下载
6、经测试:Chrome 44、QQ浏览器9、Firefox 35、IE 5/7/8/9/10/+可用,其它未测试。
注意:IE5/7/8的中自动切换为flash播放器播放,但由于浏览器与flash播放器的安全性问题,需要将文件放置到中间件(如Tomcat)中才能见效果。
jQuery语音播放插件的更多相关文章
- 自己做jQuery插件:将audio5js封装成jQuery语音播放插件
日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以下的封装. 首先先简单介绍一下Audio5js吧. Audio5js是一个能够 ...
- 分享8款精美的jQuery图片播放插件
本文将和大家一起分享8款精美的jQuery图片播放插件,每一款插件均有演示和源码下载,有兴趣的朋友可以下载使用和研究.废话不多说了,直接上这些插件. 1.3D轮播相册 这款3D相册插件利用了HTML5 ...
- 一款超炫的jquery图片播放插件[Cloud Carousel]
今天给大家介绍一个jquery图片播放插件,也可以说是一款幻灯片放映插件,它叫Cloud Carousel,支持自动播放.图片预览.鼠标滚轮滚动,非常酷,下图是效果预览. 该jquery图片播放项目演 ...
- jquery图片播放插件Fancybox使用详解
今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的. Fancybox的项目主页地址:http://fa ...
- jQuery图片播放插件prettyPhoto使用介绍
演示效果 http://www.17sucai.com/preview/131993/2014-07-09/mac-Bootstrap/gallery.html 点击之后的效果 使用方法 Query ...
- Jquery音频播放插件下载地址(有Html、JS、CSS、音频)
有详细的html文件.全部JS代码文件.Css样式文件.测试音频资料 音频播放插件下载链接(百度云): http://pan.baidu.com/s/1pKC904F 提取码评论留邮箱发送,谢谢!
- jquery图片播放插件Fancybox(灯箱)
效果预览Demo源码下载 Fancybox的特点如下: 可以支持图片.html文本.flash动画.iframe以及ajax的支持 可以自定义播放器的CSS样式 可以以组的形式进行播放 如果将鼠标滚动 ...
- 强大的jQuery幻灯片播放插件 支持全拼、拖拽和下载等功能
在线演示 本地下载
- 美女jquery图片播放器插件
相册在线查看http://keleyi.com/keleyi/phtml/image/6.htm 可全屏,可拖动,可自动播放的jquery图片展示插件 使用说明:1.引用css文件:<link ...
随机推荐
- Mono+CentOS+Jexus
在.NET Core之前,实现.Net跨平台之Mono+CentOS+Jexus初体验准备工作 本篇文章采用Mono+CentOS+Jexus的方式实现部署.Net的Web应用程序(实战,上线项目). ...
- java中处理字符编码(网页与数据库)(转)
首先声明一下,此文章时从网上转载的.如下的某些方法是确实管用,但是从中发现了有一点不足,就是原文笔者没考虑使用不同Web Server时出现的情况,比如文章里我用红色字体画出来的部分代码在Tomcat ...
- JDK源码学习系列03----StringBuffer+StringBuilder
JDK源码学习系列03----StringBuffer+StringBuilder 由于前面学习了StringBuffer和StringBuilder的父类A ...
- 2014在辛星Javascript口译科
***************概要*************** 1.Javascript是一种原型化继承的基于对象的动态类型的脚本语言,它区分大写和小写.主要执行在client,用户即使响应用户的操 ...
- JAVA IP地址转成长整型方法
JAVA IP地址转成长整型方法 代码例如以下: /** * IP转成整型 * @param ip * @return */ public static Long ip2int(String ip) ...
- CSDN-markdown编者LaTex数学公式
LaTex什么? LaTeX(LATEX.音译"拉太和")它是基于ΤΕΧ排版系统,莱斯利由美国计算机科学家·兰伯特(Leslie Lamport)于20纪80年代初期开发,利用这样 ...
- 认识node.js:express(一)
express是node.js官方推荐的框架. 安装 npm install express -g 命令中的 “-g” 表示全局(global) 由于新版本(4.x.x)的express的命令集中到了 ...
- NEON简单介绍
个128位四字寄存器Q0-Q15,32个64位双字寄存器D0-D31,两个寄存器是重叠的,在使用的时候须要特别注意,不小心就会被覆盖掉. NEON的数据类型:无符号整数.有符号整数.未指定类型的整数. ...
- Linux 在下面MATLAB下载
网上找了很长一段时间都没有很好的连接,或者是一个普通的软件, 在这里,给大家一个连接: ed2k://|file|[%E7%9F%A9%E9%98%B5%E5%AE%9E%E9%AA%8C%E5%AE ...
- 声明式编程思想和EEPlat
声明式编程定义 声明式编程(英语:Declarativeprogramming)它是一种编程范式.程相对立.它描写叙述目目标性质,让计算机明白目标,而非流程. 声明式编程不用告诉电脑问题领域.从而避免 ...