自己做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
/*!
* Jquery Audio5js: 基于Audio5js的Jquery简单封装
* http://www.cnblogs.com/yvanwu/
* yvan.wu 2015
*/
/**
使用方式:
如:
$("#voice1").audio5js({
url : "voice/demo.mp3"
});
*/
!function ($) {
var Audio = function (element, options) {
this.$element = $(element);
this.options = $.extend({}, $.fn.audio5js.defaults, options);
this.init();
};
Audio.prototype = {
constructor : Audio,
// 初始化导航
init : function(){
var settins = this.options;
var ele = this.$element;
var audio = this;
// 初始化样式
ele.addClass(settins['class']);
ele.attr("title", settins.title);
// 初始化audio5js
settins.audio5js = new Audio5js({
swf_path: 'https://cdnjscn.b0.upaiyun.com/libs/audio5js/0.1.9/audio5js.swf',
ready: function(){
this.load(settins.url);
ele.click(function(){
audio.playPause();
});
this.on('play', function () {
ele.removeClass(settins['class']);
ele.addClass(settins.playingClass);
}, this);
this.on('pause', function () {
ele.removeClass(settins.playingClass);
ele.addClass(settins['class']);
}, this);
this.on('ended', function () {
ele.removeClass(settins.playingClass);
ele.addClass(settins['class']);
}, this);
//error event passes error object to callback
this.on('error', function (error) {
//alert("播放出错!");
}, this);
}
});
},
playPause : function () {
var audio5js = this.options.audio5js;
if (audio5js.playing) {
audio5js.pause();
audio5js.volume(0);
} else {
audio5js.seek(0); //回到最开始的位置
audio5js.play();
audio5js.volume(1);
}
},
pause : function(){
var audio5js = this.options.audio5js;
if (audio5js.playing) {
audio5js.pause();
audio5js.volume(0);
}
},
play : function(){
var audio5js = this.options.audio5js;
if (!audio5js.playing) {
audio5js.play();
audio5js.volume(1);
}
},
getAudio5js : function(){
return this.options.audio5js;
} };
$.fn.audio5js = function (option, value) {
var methodReturn; var $set = this.each(function () {
var $this = $(this);
var data = $this.data('audio');
var options = typeof option === 'object' && option;
if (!data) {
$this.data('audio', (data = new Audio(this, options)));
}
if (typeof option === 'string') {
methodReturn = data[option](value);
}
});
return (methodReturn === undefined) ? $set : methodReturn;
}; $.fn.audio5js.defaults = {
url : "", //音频文件地址
title : "点击播放",
'class' : "audio", // 正常样式class
playingClass : "audio-playing", // 播放时样式class
audio5js : {}
}; $.fn.audio5js.Constructor = Audio;
}(window.jQuery);
2、语音插件样式:jquery.audio5js.css
/*播放样式*/
.audio {
cursor: pointer;
background: url("../images/voice.png") 0 -512px no-repeat;
width: 60px;
height: 60px;
vertical-align: middle;
display: inline-block;
}
.audio-playing {
cursor: pointer;
background: url("../images/voice.gif") 0 0 no-repeat;
width: 60px;
height: 60px;
vertical-align: middle;
display: inline-block;
}
3、案例页面:demo.html
<!DOCTYPE html>
<html>
<head>
<title>Jquery Audio5js Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/jquery.audio5js.css" />
<script type="text/javascript" src="https://cdnjscn.b0.upaiyun.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjscn.b0.upaiyun.com/libs/audio5js/0.1.9/audio5.min.js"></script>
<script type="text/javascript" src="js/jquery.audio5js.js"></script>
</head> <body>
标准案例:点击图片可以播放/暂停<br />
<span id="voice1" ></span> <br />
<br />
<br />
JS控制:<br />
<input type="button" value="播放/停止" onclick="$('#voice1').audio5js('playPause')" />
<input type="button" value="播放" onclick="$('#voice1').audio5js('play')" />
<input type="button" value="暂停" onclick="$('#voice1').audio5js('pause')" />
<script type="text/javascript">
$(function(){
$("#voice1").audio5js({
url : "voice/demo.mp3"
});
});
</script>
</body>
</html>
4、样式的图片资源与案例的音频文件在第5点中,请另行下载。
5、完整下载
6、经测试:Chrome 44、QQ浏览器9、Firefox 35、IE 5/7/8/9/10/+可用,其它未测试。
注意:IE5/7/8的中自动切换为flash播放器播放,但由于浏览器与flash播放器的安全性问题,需要将文件放置到中间件(如Tomcat)中才能见效果。
自己做jQuery插件:将audio5js封装成jQuery语音播放插件的更多相关文章
- jQuery语音播放插件
自己做jQuery插件:将audio5js封装成jQuery语音播放插件 日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以 ...
- 星级评分--封装成jquery插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 使用DOM的方法获取所有li元素,然后使用jQuery()构造函数把它封装为jQuery对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何将Js代码封装成Jquery插件
很多相同的Jquery代码会在很多页面使用,每次都复制粘贴太麻烦了,不如封装成一个Jquery插件就方便了,至于影响网页的速度不,我就没有测试了哈. 代码如下 这是一个自定闪烁打印文字的Jquery特 ...
- JQuery实用技巧--学会你也是大神(1)——插件的制作技巧
前 言 JRedu 学习之前,首先我们需要知道什么是JQuery? JQuery是一个优秀的javascript框架. JQuery是继Prototype之后又一个优秀的Javascript框架 ...
- 05 HTML字符串转换成jQuery对象、绑定数据到元素上
1 要求 将一段 HTML脚本 封装成一个字符串,将这个字符串转换成一个jQuery对象:然后将这个jQuery对象添加到指定的元素中去 2 步骤 定义字符串 var str = '<div i ...
- jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)
jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...
- jQuery学习笔记(五)jQuery中的表单
目录 单行文本框的应用 表单验证 上次我们说完jQuery中的动画之后,我们再来看一种jQuery在Web网页应用最为广泛的一种形式,这就是jQuery对表单的操作,通过jQuery对表单的操作,可以 ...
- 把jQuery的类、插件封装成seajs的模块的方法
这篇文章主要介绍了把jQuery的类.插件封装成seajs的模块的方法,需要的朋友可以参考下 注:本文使用的seajs版本是2.1.1 一.把Jquery封装成seajs的模块 define(func ...
随机推荐
- 新浪短链接API接口示例
<?php /** * URL地址长短切换,由sina新浪短链接API生成 * User: chenqt * Date: 2016/8/23 * Time: 18:45 */ class Url ...
- 函数:lambda表达式 - 零基础入门学习Python021
函数:lambda表达式 让编程改变世界 Change the world by program lambda表达式 Python允许使用lambda关键字来创建匿名函数.我们提到一个新的关键字:匿名 ...
- Hql 子查询
直接上代码: public virtual IList<VoucherLog> GetMaxResultVoucherLog() { string orgaizationCode = Ht ...
- java读取property文件
property文件中: url = jdbc:mysql://localhost:3306/resume user= root pwd = 123 java代码读取: packa ...
- MVC之实体框架(数据持久化框架)EntityFrameWork(EF)
EF - EntityFrameWork 中文名:实体框架(数据持久化框架) 1.使用EF查询(Linq to EF) 1.1使用标准查询运算符来查询 OumindBlogEntities db = ...
- leetcode_question_114 Flatten Binary Tree to Linked List
Given a binary tree, flatten it to a linked list in-place. For example, Given 1 / \ 2 5 / \ \ 3 4 6 ...
- 统计useragent和页面情况
- cf486C Palindrome Transformation
C. Palindrome Transformation time limit per test 1 second memory limit per test 256 megabytes input ...
- Sqrt(x) 解答
Question Implement int sqrt(int x). Compute and return the square root of x. Solution 1 -- O(log n) ...
- 【HDU1754】I Hate It(线段树)
update:单点替换 query:区间最值 #include <iostream> #include <cstring> #include <cstdlib> # ...