WEB端百度语音合成Demo

Demo 地址：http://yotcap.top/htm/speaker.html
源码地址：https://github.com/yotcap/someGadgets/tree/master/speaker

1. 去百度云控制台找到百度语音，创建应用，找到API Key和Secret Key

2. 换取 Token（请求语音接口需要鉴权）

访问该地址，用分配的 Key 替换地址中的参数。

https://openapi.baidu.com/oauth/2.0/token?grant_type=client_credentials&client_id=API Key&client_secret=Secert Key

返回结果如下：

{
    "access_token": "1.a6b7dbd428f731035f771b8d********.86400.1292922000-2346678-124328",
    "expires_in": 2592000,
    "refresh_token": "2.385d55f8615fdfd9edb7c4b********.604800.1293440400-2346678-124328",
    "scope": "public audio_tts_post ...",
    "session_key": "ANXxSNjwQDugf8615Onqeik********CdlLxn",
    "session_secret": "248APxvxjCZ0VEC********aK4oZExMB",
}

其中 access_token 为 Token，expires_in 为秘钥的有效期（30天）。因为该接口有跨域，到期之后需手动或通过服务器端重新获取 Token 值。

3. 调取合成接口

正式地址为：http://tsn.baidu.com/text2audio 或 https://tsn.baidu.com/text2audio。
该接口支持 GET 和 POST（推荐），无跨域。

请求参数如下：

参数	可需	描述
tex	必填	合成的文本，使用UTF-8编码。小于2048个中文字或者英文数字。（文本在百度服务器内转换为GBK后，长度必须小于4096字节）
tok	必填	开放平台获取到的开发者 access_token
cuid	必填	用户唯一标识，用来计算UV值。建议填写能区分用户的机器 MAC 地址或 IMEI 码，长度为60字符以内
ctp	必填	客户端类型选择，web端填写固定值1
lan	必填	固定值zh。语言选择,目前只有中英文混合模式，填写固定值zh
spd	选填	语速，取值0-15，默认为5中语速
pit	选填	音调，取值0-15，默认为5中语调
vol	选填	音量，取值0-15，默认为5中音量
per	选填	发音人选择, 0为普通女声，1为普通男生，3为情感合成-度逍遥，4为情感合成-度丫丫，默认为普通女声
aue	选填	3为mp3格式(默认)； 4为pcm-16k；5为pcm-8k；6为wav（内容同pcm-16k）; 注意aue=4或者6是语音识别要求的格式，但是音频内容不是语音识别要求的自然人发音，所以识别效果会受影响。

4. 页面

(1) 页面中可以添加 input 或 textarea 框，获取文本内容。
(2) 之后添加一些选项，可以图形化自定义参数。
(3) 使用 button 请求接口，返回成功后替换 Audio 标签的 src，并调用播放事件。

新建 Audio 标签

<audio id="aud" src="" type="audio/mp3" controls="controls">nosupport</audio>

初始化参数并请求接口，成功后用请求地址替换 Audio 标签中的 src。
关键点：

let params = {
    tok: '24.5************************15',
    cuid: 'tao',	// 自定义用户标识
    ctp: '1',
    lan: 'zh',
    spd: 5,
    pit: 5,
    per: 0
}
// 获取文本框的内容
params.tex = document.querySelector('textArea').value;
// 调取接口
if (window.XMLHttpRequest) {
	xhr= new XMLHttpRequest();
} else if (window.ActiveXObject) {
	xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
url = `http://tsn.baidu.com/text2audio?tok=${params.tok}&cuid=${params.cuid}&ctp=${params.ctp}&lan=${params.lan}&tex=${params.tex}&spd=${params.spd}&pit=${params.pit}&per=${params.per}`;
xhr.onreadystatechange = getResponse;
xhr.open('POST', url, true);
xhr.send();

function getResponse() {
	if (xhr.readyState === 4) {
	  if (xhr.status === 200) {
	  	// 成功后替换 src
	    aud.setAttribute('src', url);
	    // 自动播放
	    aud.play();
	  } 
	  // ...对请求失败做一些处理
	}
}