JQuery外掛製作：[2]語音播報jspeech

1

第一步： 下載JQuery檔案，並匯入到html檔案中

2

第二步： html檔案布局實現

3

第三步： jspeech外掛實現

1. 建立jspeech檔案，然後根據jquery外掛的基本格式把基本框架寫好

4

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":"測試"

};

5

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

}

});

6

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

}

7

5. 說下實現原理

其實就是通過呼叫百度翻譯的語音播放功能，然後對應的將文字傳進去就可以了，然後百度翻譯的語言播報功能介面就會生成video標籤自動播放。所以我只需要傳遞文字，然後把返回來的video放到iframe裡即可。

8

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

9

第四步： 呼叫外掛

1. 點選連結播報

10

2. 效果

11

3. 直接播報

12

4. 效果