jQuery插件制作: 语音播报jspeech

在手机网站或者PC网站的资讯页面,想要有一个对文字进行语音播报功能。在网上找了很多资料,大部分都是正对于手机APP的,比如百度语音。这些都是给手机app(android、ios)提供sdk包,然后在调用对应的接口即可。而现在需要的是在网页上实现对文字进行语音播报功能,大致也是调用百度的语言功能。请看如下实现步骤。

第一步: 下载JQuery文件,并导入到html文件中

20150113163229

第二步: html文件布局实现

20150113163406

第三步: jspeech插件实现

1. 创建jspeech文件,然后根据jquery插件的基本格式把基本框架写好

20150113163805

2. 设置默认配置信息

var defaults = {
			//通过点击链接播报,还是直接播报
			"jspeech_a":true,
			//链接按钮的宽度
			"jspeech_a_width":"16px",
			//链接按钮的高度
			"jspeech_a_height":"13px",
			//链接按钮的背景图片
			"jspeech_a_png":"url(./image/icon.png) no-repeat",
			//直接播报内容
			"jspeech_content":"测试"
		};

20150113164901

3. 设置点击链接播报方式

//如果是通过点击链接播报
				//获得文本内容
				var content = $(this).text();
				//生成链接
				var speechClick = "<a href='javascript:void(0);' class='jspeech_a'></a>";
				$(this).append(speechClick);
				//设置链接样式
				$(this).find(".jspeech_a").css({
												width:options.jspeech_a_width,
												height:options.jspeech_a_height,
												"display":"inline-block",
												"background":options.jspeech_a_png
												});
				$(this).find(".jspeech_a").click(function(){
					//捕获点击事件
					var src = 'http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=' + content;
					if($(this).find(".jspeech_iframe").length > 0){
						$(this).find(".jspeech_iframe").attr("src",src);
					}else{
						var iframe = "<iframe height='0' width='0' class='jspeech_iframe' scrolling='no' frameborder='0' src='"+src+"' ></iframe>";
						$(this).append(iframe);
					}
				});

 

 

20150113165008

 

4. 设置直接播报方式

var src = 'http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=' + options.jspeech_content;
				if($(this).find(".jspeech_iframe").length > 0){
					$(this).find(".jspeech_iframe").attr("src",src);
				}else{
					var iframe = "<iframe height='0' width='0' class='jspeech_iframe' scrolling='no' frameborder='0' src='"+src+"' ></iframe>";
					$(this).append(iframe);
				}

20150113165146

 

5. 说下实现原理

其实就是通过调用百度翻译的语音播放功能,然后对应的将文字传进去就可以了,然后百度翻译的语言播报功能接口就会生成video标签自动播放。所以我只需要传递文字,然后把返回来的video放到iframe里即可。

20150113165525

 

6. 整体源码

(function($){
	$.fn.jspeech = function(options){
		var defaults = {
			//通过点击链接播报,还是直接播报
			"jspeech_a":true,
			//链接按钮的宽度
			"jspeech_a_width":"16px",
			//链接按钮的高度
			"jspeech_a_height":"13px",
			//链接按钮的背景图片
			"jspeech_a_png":"url(./image/icon.png) no-repeat",
			//直接播报内容
			"jspeech_content":"测试"
		};
		var options = $.extend(defaults, options);
		this.each(function(){
			if(options.jspeech_a){
				//如果是通过点击链接播报
				//获得文本内容
				var content = $(this).text();
				//生成链接
				var speechClick = "<a href='javascript:void(0);' class='jspeech_a'></a>";
				$(this).append(speechClick);
				//设置链接样式
				$(this).find(".jspeech_a").css({
												width:options.jspeech_a_width,
												height:options.jspeech_a_height,
												"display":"inline-block",
												"background":options.jspeech_a_png
												});
				$(this).find(".jspeech_a").click(function(){
					//捕获点击事件
					var src = 'http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=' + content;
					if($(this).find(".jspeech_iframe").length > 0){
						$(this).find(".jspeech_iframe").attr("src",src);
					}else{
						var iframe = "<iframe height='0' width='0' class='jspeech_iframe' scrolling='no' frameborder='0' src='"+src+"' ></iframe>";
						$(this).append(iframe);
					}
				});
			}else{
				var src = 'http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=' + options.jspeech_content;
				if($(this).find(".jspeech_iframe").length > 0){
					$(this).find(".jspeech_iframe").attr("src",src);
				}else{
					var iframe = "<iframe height='0' width='0' class='jspeech_iframe' scrolling='no' frameborder='0' src='"+src+"' ></iframe>";
					$(this).append(iframe);
				}
			}
		});
	};
})(jQuery);

20150113165819

第四步: 调用插件

1. 点击链接播报

20150113165640

2. 效果

20150113170026

3. 直接播报

20150113170116

4. 效果

20150113170205

JQuery插件制作:倒计时countdown

关于倒计时的插件可能网上很多,但是都不能满足自己想要的需求,所以作为程序员的我就开始来写一个JQuery倒计时插件countdown。

第一步: 下载JQuery文件

既然编写JQuery插件,那肯定是需要JQuery文件。

20150108021654

第二步: 把JQuery文件导入到html文件中

20150108022333

第三步: 网页布局

20150108023332

第四步: 编写JQuery插件countdown

1. 创建countdown.js文件,并且导入到html文件中。

20150108023748

2.  根据jquery插件的基本格式把基本框架写好。

jquery插件的基本格式:

(function($){
	$.fn.插件名称 = function(options){
		var defaults = {
			//相关属性设置	
		}
		var options = $.extend(defaults, options);
		this.each(function(){
			//实现的功能设置		
           });
	};
})(jQuery);

20150108024430

3. 设置默认配置信息

20150108024643

4. 添加一个倒计时方法timedown

首先添加三个全局变量,第一个是用来保存插件传进来的this,第二个是用来保存的配置信息,第三个是定时器对象

var jthis = null;
var opts = null;
var countdowtime = null;

然后给这三个变量赋值

opts = $.extend({}, defaults, options);
jthis = this;
countdowtime = setInterval(timedown,1000);

20150108030035

然后添加倒计时方法

/*倒计时方法*/
	function timedown(){
		//时间默认值
		var day=0,hour=0,minute=0,second=0;
		
		var end = false;
		
		//遍历该标签元素
		jthis.each(function(index){
			//如果没有开始时间就返回
			if(!opts.timestartClass)
				return;
			//开始时间
			var timestart = $(this).find("."+opts.timestartClass).html();
			//结束时间
			var timeend = $(this).find("."+opts.timeendClass).html();
			//如果没有结束时间,就找开始时间样式中的data属性值为结束时间
			if(!timeend){
				timeend = $(this).find("."+opts.timestartClass).attr("data");
			}
			if(!timestart || !timeend)
				return;
			//开始时间秒数
			var ts = (new Date(timestart)).getTime()/1000;
			//结束时间秒数
			var te = (new Date(timeend)).getTime()/1000;
			//现在时间秒数
			var now = (new Date()).getTime()/1000;
			if(now < ts){
				//进行倒计时
				end = true;
				var changeTime = ts - now;
				day = Math.floor(changeTime / (60 * 60 * 24));
				hour = Math.floor(changeTime / (60 * 60)) - (day * 24);
				minute = Math.floor(changeTime / 60) - (day * 24 * 60) - (hour * 60);
				second = Math.floor(changeTime) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
				var htmlCode = day ? day+"天" : "";
				htmlCode += hour ? ((hour<=9 ? "0"+hour : hour)+"时") : "";
				htmlCode += minute ? ((minute<=9 ? "0"+minute : minute)+"分") : (hour ? "00分" : "");
				htmlCode += second ? ((second<=9 ? "0"+second : second)+"秒") : (minute ? "00秒" : "");
				$(this).find("."+opts.timeshowClass).html(htmlCode);
				$(this).find("."+opts.statusClass).css({color:opts.startStatusColor});
				$(this).find("."+opts.timeshowClass).css({color:opts.timeshowColor,"font-size":opts.timeshowSize,"font-weight":"700"});
			}else if(now >= ts && now <= te){
				//进行中
				$(this).find("."+opts.timeshowClass).html("进行中");
				$(this).find("."+opts.statusClass).css({color:opts.ingStatusColor});
			}else if(now > te){
				//已结束
				$(this).find("."+opts.timeshowClass).html("已结束");
				$(this).find("."+opts.statusClass).css({color:opts.endStatusColor});
			}
		});
		
		//如果都没有倒计时就关闭定时器
		if(!end){
			clearInterval(countdowtime);
		}
	}

 第五步: 调用JQuery插件countdown

<script type="text/javascript">
			$(document).ready(function() {
				$(".countdown").countdown({
					//开始时间样式
					"timestartClass":"timestart",
					//结束时间样式
					"timeendClass":"timeend",
					//展示时间样式
					"timeshowClass":"timeshow",
					//展示时间字体颜色
					"timeshowColor":"red",
					//展示时间字体大小
					"timeshowSize":"14px",
					//状态样式
					"statusClass":"timestatus",
					//开始状态颜色
					"startStatusColor":"#f18519",
					//进行中状态颜色
					"ingStatusColor":"#ff0000",
					//结束状态颜色
					"endStatusColor":"#999",
				});
			});
		</script>

20150108030851

第六步: 效果

20150108030951