JQuery插件制作:语音播报jspeech
在手机网站或者PC网站的资讯页面,想要有一个对文字进行语音播报功能。在网上找了很多资料,大部分都是正对于手机APP的,比如百度语音。这些都是给手机app(android、ios)提供sdk包,然后在调用对应的接口即可。而现在需要的是在网页上实现对文字进行语音播报功能,大致也是调用百度的语言功能。请看如下实现步骤。
-
第一步: 下载JQuery文件,并导入到html文件中
-
-
-
-
第二步: html文件布局实现
-
-
-
-
-
第三步: jspeech插件实现
1. 创建jspeech文件,然后根据jquery插件的基本格式把基本框架写好
-
-
-
-
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":"测试"
};
-
-
-
-
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);
}
});
-
-
-
-
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);
}
-
-
5. 说下实现原理
其实就是通过调用百度翻译的语音播放功能,然后对应的将文字传进去就可以了,然后百度翻译的语言播报功能接口就会生成video标签自动播放。所以我只需要传递文字,然后把返回来的video放到iframe里即可。
-
-
-
-
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);
-
-
-
-
-
-
第四步: 调用插件
1. 点击链接播报
-
-
-
-
-
2. 效果
-
-
-
3. 直接播报
-
-
-
-
-
-
4. 效果
-