前端实现语音识别、语音翻译

需求：用户说一段话，转译英文

一、录音

使用的是js-audio-recorder

另我这个里面有些东西是不需要的，因为我有个录音波浪图的功能，大家可忽略

   let recorder = new Recorder({sampleBits: 16, // 采样位数，支持 8 或 16，默认是16sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000numChannels: 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);};// readAsDataURLfileReader.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);}