微信小程序-百度AI语音识别——（一）
一、百度AI
某天闲来无事在CSDN上看到有大神用百度语音识别+图灵机器人做了一个可以语音聊天（调戏人工智障 ）的小demo，觉得挺有趣的，也想着实现一下。
百度AI
打开百度AI的官网，看到有很多功能
语音识别
; 二、着手实现（开始踩坑）
本着严谨的原则，肯定要先通过postman工具把接口调通之后再进行开发
1.接口鉴权
套路都一样 一个ACCESS KEY 一个 ACCESS SECRET直接请求
https://openapi.baidu.com/oauth/2.0/token
请求之后就可以拿到响应的token （这个token的有效期是2592000秒，30天）
为了实现自动化测试接口，我在postman中添加了一段小脚本，请求到token之后放入环境变量中
pm.test("token",function(){
var jsonData = pm.response.json();
pm.environment.set("TOKEN",jsonData.refresh_token);
});
2.语音识别接口
请求到token之后就可以接着请求语音识别的接口了
百度AI语音识别接口有两种请求方式：
- 通过json将语音数据进行base64编码后放入请求参数中
- 通过RAW的方式放入请求主体中进行请求
我个人感觉第一种方式虽然感觉挺方便的，但是对于一个长语音，base64编码会非常的长且会受到不同浏览器 url长度限制
所以放弃了第一种方式，采用RAW的方式
（老实说我居然都没听说过raw这个词，但是原理我是使用过的，就是通过请求体带去数据）
这里我都统一使用采样率16k的音频了，8k的还没测试过
设置请求头：
Content-Type: audio/pcm;rate=16000
将官方提供的测试 pcm格式的文件放入body中
请求到了数据
三、实现demo（坑。。。🕳。。。）
我想着先在浏览器上实现一个简单的小demo
于是二话不说，开搞！
<body>
<input type="file" name="audio" id="audio-file">
<button onclick="getToken()">GET TOKENbutton>
body>
它比较简单，功能也很浓缩。
[En]
It is relatively simple, and the functions are condensed.
先上传文件，之后点击按钮 会依次获取token 和 上传音频文件进行识别
因为要读取文件的二进制内容，我首先想到了js中内置的FileReader对象，并且其中也有readAsBinaryString这样的方法，将文件的二进制内容读出来放入请求体中
const ACCESS_KEY = "NSuFZs*********lpvdLvKb";
const ACCESS_SECRET = "iAa************************tG";
let audio_file = document.getElementById("audio-file");
let file_data;
audio_file.onchange = (file) => {
let reader = new FileReader();
reader.readAsBinaryString(file.target.files[0]);
reader.onload = (res) => {
console.log(res.target.result);
file_data = res.target.result;
}
}
function getToken(){
let xhr = new XMLHttpRequest();
xhr.open("POST",
"https://openapi.baidu.com/oauth/2.0/token?grant_type=client_credentials&client_id="+ACCESS_KEY+"&client_secret="+ACCESS_SECRET
);
xhr.send();
xhr.addEventListener("readystatechange",(res)=>{
if(xhr.readyState == 4){
token = JSON.parse(res.target.response).refresh_token;
soundReco();
}
});
}
function soundReco(){
let xhr = new XMLHttpRequest();
xhr.open("POST",
"http://vop.baidu.com/server_api?cuid=155236postman&dev_pid=1537&token="+token
);
xhr.setRequestHeader("Content-Type","audio/pcm;rate=16000");
xhr.addEventListener("readystatechange",(res)=>{
if(xhr.readyState === 4){
console.log("***********************",JSON.parse(res.target.response));
}
});
xhr.send(file_data);
}
但是这样请求会返回speech quality error.的错误
显然，文件的参数和内容已经传递了，是吗？
[En]
Obviously, the parameters and the contents of the file have been passed, huh?
猜测可能是纯文本数据的问题。
[En]
The guess may be the problem of plain text data.
于是换用了readAsArrayBuffer这个api
reader.readAsArrayBuffer(file.target.files[0]);
果然请求到了数据！！！
好👌 反正请求到数据了，接下来如何展示还不简单嘛！
在请求过程中会遇到浏览器的跨域问题。目前，我已经通过设置浏览器跨域的方式解决了这个问题。
[En]
The cross-domain problem of the browser will be encountered in the process of the request. At present, I have solved it by setting the browser to cross-domain.
参考这位大佬的方案
浏览器设置跨域
这次demo的开发就先这样吧，狗命要紧~~~~
下一步是改用用户体验更好的平台。我想用微信小程序来实现一个语音识别功能。
[En]
The next step is to change to a platform with a better user experience. I want to use WeChat Mini Programs to achieve a speech recognition function.
四、第二期已更新——微信小程序实现
项目已经上传gitee
Original: https://blog.csdn.net/qq_41122414/article/details/113805835
Author: Index[0]
Title: 微信小程序-百度AI语音识别——（一）
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/515029/
转载文章受原作者版权保护。转载请注明原作者出处！