百度AI 语音合成

版权声明:本文为博主原创文章,非商用转载请注明出处: https://blog.csdn.net/qq_17058993/article/details/83211614

web端需要实现语音合成,也就是文字转语音。讯飞web端那套文档太简略,看过百度得之后决定选择百度来测试。不信可以比较下

https://doc.xfyun.cn/rest_api/%E8%AF%AD%E9%9F%B3%E5%90%88%E6%88%90.html 讯飞

http://ai.baidu.com/docs#/TTS-API/5363f6ed 百度

不管哪一套,上来先看文档,配置参数。

 一、token获取

https 涉及到跨域请求,简单学习了jsonp 但是需要官方返回js文件 测试发现一直报错 

jsonp需要自己定制服务器端 返回数据 不管怎么样 必须需要服务器端设置 所以不从前台请求而是从服务器端通过request请求获取到token,然后传递到前台页面

并且token有时效性,必须定期进行获取。

二、html端请求

官方js原生方法: 百度语音 语音合成 跨域demo以及支持库

序列化tex参数的时候需要进行2次urlencode ,为了处理特殊字符。官方demo这里没处理 但是官方文档中有明确标识

修改如下:

自己jquery写的

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<input type="text" id='text' value='1+1=2' style='width: 500px;'>
		<button onclick="anounce()">播放</button>
		<div id="div"></div>
	</body>
	<script type="text/javascript">
		//动态添加标签 再删除
		function anounce() {	
			var text = $("#text").val();
			console.log("text:" + text)

			var tex = encodeURIComponent(encodeURIComponent(text));
			console.log("tex:" + tex)
	
			//先删除div标签下的audio标签
			$("audio").remove("#div audio");
			
			//重新创建标签
			$("#div").append(
				"<audio autoplay='autoplay' src='http://tsn.baidu.com/text2audio?lan=zh&ctp=1&cuid=abcdxxx&tok=自己的token&tex=" +
				tex + "&vol=9&per=0&spd=5&pit=5&aue=3' controls='controls'></audio>");
			
					
		}
	</script>
</html>

1、除了token和tex(2次urlencode)参数需要动态输入以后,其他参数这里写死了,也可以根据需要在页面进行设置选择项进行参数的配置。

2、audio的标签动态添加和删除 audio标签自动播放和隐藏 


            

猜你喜欢

转载自blog.csdn.net/qq_17058993/article/details/83211614