怎样安装Dreamweaver的jquery扩展,我们通常会用dreamweaver这个网页设计软件来编写网页前台代码，在编写代码时会经常出现下拉的菜单供我们选择，为我们编写代码节省了很多的时间。这样......
2023-03-17 294 JQUERY DREAMWEAVER
JQuery插件制作：[2]语音播报jspeech
来源：互联网
2023-03-17 00:52:14 522
在手机网站或者PC网站的资讯页面，想要有一个对文字进行语音播报功能。在网上找了很多资料，大部分都是正对于手机APP的，比如百度语音。这些都是给手机app（android、ios）提供sdk包，然后在调用对应的接口即可。而现在需要的是在网页上实现对文字进行语音播报功能，大致也是调用百度的语言功能。请看如下实现步骤。
工具/原料
- 百度翻译语音接口
方法/步骤
第一步： 下载JQuery文件，并导入到html文件中
![JQuery插件制作：[2]语音播报jspeech](https://exp-picture.cdn.bcebos.com/340e4eb8b43ea8db56148781189c2cf7deb216f1.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
第二步： html文件布局实现
![JQuery插件制作：[2]语音播报jspeech](https://exp-picture.cdn.bcebos.com/cf6d451b1edef4dcab676eac45ecd3d968750cf1.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
第三步： jspeech插件实现
1. 创建jspeech文件，然后根据jquery插件的基本格式把基本框架写好
![JQuery插件制作：[2]语音播报jspeech](https://exp-picture.cdn.bcebos.com/edd84743040148fe0b1c20d88fd149299b8802f1.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
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":"测试"
};
![JQuery插件制作：[2]语音播报jspeech](https://exp-picture.cdn.bcebos.com/acfda02f47704618fe849988b08602214e5776f1.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
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);
}
});
![JQuery插件制作：[2]语音播报jspeech](https://exp-picture.cdn.bcebos.com/974a2f21056104a37bb7fe1d63d7592ae2ef6bf1.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
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);
}
![JQuery插件制作：[2]语音播报jspeech](https://exp-picture.cdn.bcebos.com/562787cf02532f6318db9d85699147e832e05cf1.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
5. 说下实现原理
其实就是通过调用百度翻译的语音播放功能，然后对应的将文字传进去就可以了，然后百度翻译的语言播报功能接口就会生成video标签自动播放。所以我只需要传递文字，然后把返回来的video放到iframe里即可。
![JQuery插件制作：[2]语音播报jspeech](https://exp-picture.cdn.bcebos.com/31097f43d7d448314cb58b14d40f822b75ee51f1.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
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);
![JQuery插件制作：[2]语音播报jspeech](https://exp-picture.cdn.bcebos.com/8db0c6a72633488499bd369fddee7b7f870e45f1.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
第四步： 调用插件
1. 点击链接播报
![JQuery插件制作：[2]语音播报jspeech](https://exp-picture.cdn.bcebos.com/777f3fc2bbd6e1d007b6e7d20d254193cfe8aff1.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
2. 效果
![JQuery插件制作：[2]语音播报jspeech](https://exp-picture.cdn.bcebos.com/0cdb2f0e1799e92acde63ff3e1fec314f0c5a0f1.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
3. 直接播报
![JQuery插件制作：[2]语音播报jspeech](https://exp-picture.cdn.bcebos.com/4080a927ac5306881072d87957e8904801fc96f1.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
4. 效果
![JQuery插件制作：[2]语音播报jspeech](https://exp-picture.cdn.bcebos.com/01bd69f7980e5f20ca2f2268bd20b93acc898ef1.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： JQUERY
上一篇：C语言中变量自加和自减的理解 下一篇：用jquery制作自动移动子菜单的导航栏
相关文章
- 详细阅读
-
jQuery MiniUI 快速入门详细阅读
jQuery MiniUI 快速入门,前段时间由于工作的原因接触到MiiUI。感觉MiiUI很强大，使用起来也很舒服。下面我就带领大家快速的使用MiiUI。MiiUI-专业WeUI控件库它能缩短开发时......
2023-03-17 280 JQUERY
-
怎么使用JQuery Mobile开发移动网站详细阅读
怎么使用JQuery Mobile开发移动网站,现在越来越多的人用网站来做手机a,这样的好处是，可以做一个网站，基本上可以做到多个平台adroid,io,w,都可以使用。这里使用JQueryMoile......
2023-03-17 324 JQUERY