百度AI 语音合成_百度语音合成技术实现语音播放-text2audio

作者：寸_铁 | 2024-08-11 02:59:27

踩

百度语音合成技术实现语音播放-text2audio

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标签自动播放和隐藏

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/961861