前端实现语音识别语音翻译
目录
前端实现语音识别、语音翻译
前端实现语音识别、语音翻译
需求：用户说一段话，转译英文
一、录音
使用的是js-audio-recorder
另我这个里面有些东西是不需要的，因为我有个录音波浪图的功能，大家可忽略
let recorder = new Recorder({
sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000
numChannels: 1, // 声道，支持 1 或 2， 默认是1
});
/**
* 录音的具体操作功能
* */
// 开始录音
startRecorder() {
recorder.start().then(
() => {
this.drawRecord(); //开始绘制图片
},
(error) => {
console.log(`${error.name} : ${error.message}`);
}
);
},
// 结束录音
stopRecorder() {
recorder.stop();
this.drawRecordId && cancelAnimationFrame(this.drawRecordId);
this.drawRecordId = null;
},
// 录音播放
playRecorder() {
recorder.play();
this.drawPlay(); //绘制波浪图
},
// 停止录音播放
stopPlayRecorder() {
recorder.stopPlay();
},
// 销毁录音
destroyRecorder() {
recorder.destroy().then(function () {
recorder = null;
this.drawRecordId && cancelAnimationFrame(this.drawRecordId);
this.drawRecordId = null;
});
},二、blobtoBase64
因百度ai接口需要base64格式编码，需转一下格式
/**
* blob二进制 to base64
**/
export function blobToBase64(blob) {
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = (e) => {
resolve(e.target.result);
};
// readAsDataURL
fileReader.readAsDataURL(blob);
fileReader.onerror = () => {
reject(new Error('blobToBase64 error'));
};
});
}三、调用百度语音识别接口
先简单处理一下跨域问题
'/oauth': {
target: 'https://aip.baidubce.com',
secure: true,
pathRewrite: {
'^/oauth' : '/oauth'
},
changeOrigin: true
},识别接口里有个参数token，所以需先获取token
/**
* 处理录音识别
**/
import request from '@/api/request'
const tokenUrl = "/oauth/2.0/token";
const urlInfo = "/server_api";
const API_KEY = "";//自己去官网上开通服务，拿到 API_KEY
const SECRET_KEY = "";//自己去官网上开通服务，拿到 SECRET_KEY
const myurl =
tokenUrl +
"?grant_type=client_credentials" +
"&client_id=" +
API_KEY +
"&client_secret=" +
SECRET_KEY;
export async function identify(blob, size) {
const res = await request.post(myurl)
let access_token = res.access_token;
let speech = blob.split("data:audio/wav;base64,")[1];
let formData = {
format: "wav",
rate: 16000,
dev_pid: 1537,
channel: 1,
token: access_token,
cuid: "baidu_workshop",
len: size,
speech: speech,
};
const r = await request.post(urlInfo, formData)
let basic = r.result[0];
let newBasic = basic.substring(0, basic.length - 1);
return newBasic
}四、调用百度语音翻译接口
同识别接口差不多，解决跨域问题再请求，不对，应该是先请求出现跨域问题再解决。
/**
* 处理语音翻译
**/
import axios from "axios";
import md5 from "js-md5";
const request = axios.create({
baseURL: '',
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
});
let appid = "";//去官网获取
let key = "";//去官网获取
let salt = new Date().getTime();
const url = "/api/trans/vip/translate";
let form = new FormData();
let from = "zh";
let to = "en";
export async function translate(word) {
let query = word; // 多个query可以用\n连接 如 query='apple\norange\nbanana\npear'
let str1 = appid + query + salt + key;
let sign = md5(str1);
const myurl =
url +
"?appid=" +
appid +
"&from=" +
from +
"&to=" +
to +
"&salt=" +
salt +
"&sign=" +
sign;
form.append("q", query);
const res = await request.post(myurl, form)
let prompt = res.data.trans_result[0].dst;
localStorage.setItem("prompt", prompt);
return prompt
}
'/api': {
target: 'http://api.fanyi.baidu.com',
secure: false,
pathRewrite: {
'^/api' : '/api'
},
changeOrigin: true
}三、调用
调用即可 word为中文，prompt为英文
/**
* 处理录音识别,语音翻译
**/
async identify() {
let file = recorder.getWAVBlob();
let size = file.size;
const blob = await blobToBase64(file);
const word = await identify(blob, size);
const prompt = await translate(word);
}