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();
}
// ...对请求失败做一些处理
}
}