在手机网站或者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 = "";$(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 = "";$(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 = "";$(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 = "";$(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 = "";$(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 = "";$(this).append(iframe);}}});};})(jQuery);

第四步： 调用插件1. 点击链接播报

2. 效果

3. 直接播报

4. 效果

举报/反馈