日前的一个项目需要用到语音播放功能。发现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、完整下载

jquery-audio5js.zip

6、经测试:Chrome 44、QQ浏览器9、Firefox 35、IE 5/7/8/9/10/+可用,其它未测试。

注意:IE5/7/8的中自动切换为flash播放器播放,但由于浏览器与flash播放器的安全性问题,需要将文件放置到中间件(如Tomcat)中才能见效果。

自己做jQuery插件:将audio5js封装成jQuery语音播放插件的更多相关文章

  1. jQuery语音播放插件

    自己做jQuery插件:将audio5js封装成jQuery语音播放插件   日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以 ...

  2. 星级评分--封装成jquery插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 使用DOM的方法获取所有li元素,然后使用jQuery()构造函数把它封装为jQuery对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 如何将Js代码封装成Jquery插件

    很多相同的Jquery代码会在很多页面使用,每次都复制粘贴太麻烦了,不如封装成一个Jquery插件就方便了,至于影响网页的速度不,我就没有测试了哈. 代码如下 这是一个自定闪烁打印文字的Jquery特 ...

  5. JQuery实用技巧--学会你也是大神(1)——插件的制作技巧

      前  言 JRedu 学习之前,首先我们需要知道什么是JQuery? JQuery是一个优秀的javascript框架. JQuery是继Prototype之后又一个优秀的Javascript框架 ...

  6. 05 HTML字符串转换成jQuery对象、绑定数据到元素上

    1 要求 将一段 HTML脚本 封装成一个字符串,将这个字符串转换成一个jQuery对象:然后将这个jQuery对象添加到指定的元素中去 2 步骤 定义字符串 var str = '<div i ...

  7. jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)

    jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...

  8. jQuery学习笔记(五)jQuery中的表单

    目录 单行文本框的应用 表单验证 上次我们说完jQuery中的动画之后,我们再来看一种jQuery在Web网页应用最为广泛的一种形式,这就是jQuery对表单的操作,通过jQuery对表单的操作,可以 ...

  9. 把jQuery的类、插件封装成seajs的模块的方法

    这篇文章主要介绍了把jQuery的类.插件封装成seajs的模块的方法,需要的朋友可以参考下 注:本文使用的seajs版本是2.1.1 一.把Jquery封装成seajs的模块 define(func ...

随机推荐

  1. 新浪短链接API接口示例

    <?php /** * URL地址长短切换,由sina新浪短链接API生成 * User: chenqt * Date: 2016/8/23 * Time: 18:45 */ class Url ...

  2. 函数:lambda表达式 - 零基础入门学习Python021

    函数:lambda表达式 让编程改变世界 Change the world by program lambda表达式 Python允许使用lambda关键字来创建匿名函数.我们提到一个新的关键字:匿名 ...

  3. Hql 子查询

    直接上代码: public virtual IList<VoucherLog> GetMaxResultVoucherLog() { string orgaizationCode = Ht ...

  4. java读取property文件

    property文件中: url = jdbc:mysql://localhost:3306/resume   user= root   pwd = 123 java代码读取:       packa ...

  5. MVC之实体框架(数据持久化框架)EntityFrameWork(EF)

    EF - EntityFrameWork 中文名:实体框架(数据持久化框架) 1.使用EF查询(Linq to EF) 1.1使用标准查询运算符来查询 OumindBlogEntities db = ...

  6. 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 ...

  7. 统计useragent和页面情况

  8. cf486C Palindrome Transformation

    C. Palindrome Transformation time limit per test 1 second memory limit per test 256 megabytes input  ...

  9. Sqrt(x) 解答

    Question Implement int sqrt(int x). Compute and return the square root of x. Solution 1 -- O(log n) ...

  10. 【HDU1754】I Hate It(线段树)

    update:单点替换 query:区间最值 #include <iostream> #include <cstring> #include <cstdlib> # ...