百度语音播报js代码
近日开发项目时,遇到需要用到语音播报功能,在百度搜索一番之后,发现了百度提供了语音播报接口,我就在项目中使用了百度提供的 http://tts.baidu.com/text2audio这个语音播报接口实现语音播报功能。下面记录下开发过程中遇到的一些或者说需要注意的问题以及相关代码。
一.版本1
最开始时候用的是如下代码:先定义一个方法,传入需要播报的文本参数,在需要播报的地方调用该方法播报:
functionsound(str){varobj=document.createElement("embed");obj.style.width=0;obj.style.height=0;obj.src="http://tsn.baidu.com/text2audio?lan=zh&cuid=9C-4E-36-43-DB-D0&ctp=1&vol=9&tok=24.5760f9c29a27f22f21fd0e9410ffbef0.2592000.1505287074.282335-10005162&tex="+str;obj.loop=0;document.body.appendChild(obj);} 测试后发现一个问题就是,播报出来的内容和传入的需要播报的文本不一致,看了一下百度语音播报的api发现,传入的中文需要用utf-8编码转义,即需要对参数文本内容进行 encodeURI处理,进一步发现,用一个encodeURI 还是会存在其他问题,所以需要用两次 encodeURI 方法,即在js中需要 encodeURI(encodeURI("需要播报的文本"),代码示例varzhText="测试百度文字转语音接口";zhText=encodeURI(encodeURI(zhText));sound(zhText);这样对参数处理之后,终于可以播报正确的文本了。
可是这种写法过了几天,突然不起作用了,界面中需要播报的地方怎么都没有声音了。后面就修改为下面的版本了。
二.版本2
版本1不起作用之后,就修改了实现方法,在html或者jsp中声明 audio标签,用 audio标签来播报,具体示例代码如下:
在html和jsp中声明:
然后再js中设置 source、 embed对象的src属性,并调用 audio的play方法:varzhText=encodeURI(encodeURI("测试百度文字转语音接口"));varvoicebbUrl="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=3&text="+zhText;varvoiceAdDoc=document.getElementById("voiceAd");varvoiceSrDoc=document.getElementById("voiceSr");varvoiceEdDoc=document.getElementById("voiceEd");voiceSrDoc.src=voicebbUrl;voiceEdDoc.src=voicebbUrl;voiceAdDoc.play(); 对于版本2中 audio标签是属于html5的,所以要在支持html5的浏览器或设备中使用。
如果要播报的文本在页面加载时就已经确定,也可以不写js,直接在html和jsp中声明 audio时,就把相关属性写进入对应标签中,自动播报,如:
百度语音接口相关参数说明:
lan=zh:语言是中文,如果改为lan=en,则语言是英文。
ie=UTF-8:文字格式。
spd=3:语速,可以是1-9的数字,数字越大,语速越快。
text=**:这个就是你要转换的文字。
参考文章或网址:
1.http://www.webkaka.com/tutorial/zhanzhang/2015/091647/
2.http://yuyin.baidu.com/docs/tts/136