JQuery插件制作：语音播报jspeech

JQuery插件制作：语音播报jspeech

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

1. 1

   第一步： 下载JQuery文件，并导入到html文件中

   

2. 
   

3. 
   

4. 
   

5. 2

   第二步： html文件布局实现

   

6. 
   

7. 
   

8. 
   

9. 
   

10. 第三步： jspeech插件实现

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

    

11. 
    

12. 
    

13. 
    

14. 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":"测试"

    };

    

15. 
    

16. 
    

17. 
    

18. 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);

    }

    });

    

19. 
    

20. 
    

21. 
    

22. 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);

    }

    

23. 
    

24. 5. 说下实现原理

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

    

25. 
    

26. 
    

27. 
    

28. 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);

    
    
    
    

29. 
    

30. 
    

31. 
    

32. 
    

33. 
    

34. 第四步： 调用插件

    1. 点击链接播报

    

35. 
    

36. 
    

37. 
    

38. 
    

39. 2. 效果

    

40. 
    

41. 
    

42. 3. 直接播报

43. 步骤阅读

44. 
    

45. 
    

46. 
    

47. 
    

48. 
    

49. 4. 效果

    
50.