版权声明:本文为博主原创文章,非商用转载请注明出处: 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 讯飞
不管哪一套,上来先看文档,配置参数。
一、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标签自动播放和隐藏