318 lines
8.6 KiB
Vue
318 lines
8.6 KiB
Vue
|
<template>
|
|||
|
|
<view class="">
|
|||
|
|
<!-- <button class="btn" shape="circle" type="info" @touchstart="openMedia" @touchend="stopMedia">按住
|
|||
|
|
说话</button> -->
|
|||
|
|
<!-- @click="handleShow" -->
|
|||
|
|
<!-- <iatPopup v-model:moduleValue="show" /> -->
|
|||
|
|
<!-- <view v-if="show" class="iating">
|
|||
|
|
正在说话中....
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import CryptoJS from "crypto-js";
|
|||
|
|
// 科大讯飞接口配置
|
|||
|
|
const config = {
|
|||
|
|
hostUrl: "wss://iat-api.xfyun.cn/v2/iat",
|
|||
|
|
host: "iat-api.xfyun.cn",
|
|||
|
|
appid: "331874e7",
|
|||
|
|
apiSecret: "YTc3MDJmYjJjMjk3NTJhMGMzMTk5YTVl", //"你的秘钥",
|
|||
|
|
apiKey: "ddf92cc17ecc9cda0a8cca5d4997e897", //"你的apikey",
|
|||
|
|
uri: "/v2/iat",
|
|||
|
|
highWaterMark: 1280,
|
|||
|
|
// file: "./16k_10.pcm",
|
|||
|
|
};
|
|||
|
|
// 鉴权签名
|
|||
|
|
function getAuthStr(date) {
|
|||
|
|
let signatureOrigin = `host: ${config.host}\ndate: ${date}\nGET ${config.uri} HTTP/1.1`;
|
|||
|
|
let signatureSha = CryptoJS.HmacSHA256(signatureOrigin, config.apiSecret);
|
|||
|
|
let signature = CryptoJS.enc.Base64.stringify(signatureSha);
|
|||
|
|
let authorizationOrigin =
|
|||
|
|
`api_key="${config.apiKey}", algorithm="hmac-sha256", headers="host date request-line", signature="${signature}"`;
|
|||
|
|
let authStr = CryptoJS.enc.Base64.stringify(
|
|||
|
|
CryptoJS.enc.Utf8.parse(authorizationOrigin)
|
|||
|
|
);
|
|||
|
|
return authStr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getUrl() {
|
|||
|
|
// 获取当前时间 RFC1123格式
|
|||
|
|
let date = new Date().toUTCString();
|
|||
|
|
//科大讯飞远程连接地址
|
|||
|
|
let wssUrl =
|
|||
|
|
config.hostUrl +
|
|||
|
|
"?authorization=" +
|
|||
|
|
getAuthStr(date) +
|
|||
|
|
"&date=" +
|
|||
|
|
encodeURIComponent(date) +
|
|||
|
|
"&host=" +
|
|||
|
|
config.host;
|
|||
|
|
console.log("websocke科大讯飞的地址为", wssUrl);
|
|||
|
|
return wssUrl;
|
|||
|
|
}
|
|||
|
|
let uniSocketTask = null
|
|||
|
|
//发送给科大讯飞的第一帧的模板数据格式
|
|||
|
|
let frame = {
|
|||
|
|
common: {
|
|||
|
|
app_id: config.appid,
|
|||
|
|
},
|
|||
|
|
business: {
|
|||
|
|
language: "zh_cn",
|
|||
|
|
domain: "iat",
|
|||
|
|
accent: "mandarin",
|
|||
|
|
dwa: "wpgs", // 可选参数，动态修正
|
|||
|
|
vad_eos: 5000,
|
|||
|
|
},
|
|||
|
|
data: {
|
|||
|
|
status: 0,
|
|||
|
|
format: "audio/L16;rate=16000",
|
|||
|
|
encoding: "lame"
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 录音配置项
|
|||
|
|
const recordOption = {
|
|||
|
|
sampleRate: 16000, // 采样率（pc不支持）
|
|||
|
|
format: "mp3", // 音频格式，默认是 aac
|
|||
|
|
};
|
|||
|
|
// 录音管理器
|
|||
|
|
const recordManager = uni.getRecorderManager();
|
|||
|
|
console.log('recordManager:', recordManager)
|
|||
|
|
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
show: false,
|
|||
|
|
resultText: "",
|
|||
|
|
resultTextTemp: "",
|
|||
|
|
renderText: "",
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//打开麦克风
|
|||
|
|
openMedia() {
|
|||
|
|
this.connectSocket(); //创建websocket连接
|
|||
|
|
},
|
|||
|
|
stopMedia() {
|
|||
|
|
console.log('组件录音结束',)
|
|||
|
|
recordManager.stop()
|
|||
|
|
},
|
|||
|
|
//创建连接并返回数据
|
|||
|
|
connectSocket() {
|
|||
|
|
//创建socketTask实例
|
|||
|
|
if (uniSocketTask === null) {
|
|||
|
|
uniSocketTask = uni.connectSocket({
|
|||
|
|
url: getUrl(),
|
|||
|
|
success() {},
|
|||
|
|
});
|
|||
|
|
console.log('uniSocketTask:::', uniSocketTask)
|
|||
|
|
//监听连接成功的事件
|
|||
|
|
uniSocketTask.onOpen(() => {
|
|||
|
|
console.log("监听到开启连接成功");
|
|||
|
|
this.startRecord(); //打开录音
|
|||
|
|
});
|
|||
|
|
//监听连接关闭的事件
|
|||
|
|
uniSocketTask.onClose((res) => {
|
|||
|
|
console.log("监听到关闭连接成功", res); //Websocket关闭!服务器读取MSG超时
|
|||
|
|
uniSocketTask = null;
|
|||
|
|
});
|
|||
|
|
uniSocketTask.onError((res) => {
|
|||
|
|
console.log("监听到连接发生错误", res);
|
|||
|
|
});
|
|||
|
|
//监听科大讯飞消息返回
|
|||
|
|
uniSocketTask.onMessage((res) => {
|
|||
|
|
//收到消息
|
|||
|
|
console.log('收到消息:', res)
|
|||
|
|
const message = JSON.parse(res.data);
|
|||
|
|
//判断是否存在数据
|
|||
|
|
if (res.data) {
|
|||
|
|
console.log("收到服务器消息,并开始渲染", message);
|
|||
|
|
this.renderResult(message);
|
|||
|
|
|
|||
|
|
if (message.code === 0 && message.data.status === 2) {
|
|||
|
|
//该函数为当前页唯一的关闭连接函数
|
|||
|
|
console.log('最后一条', this.renderText)
|
|||
|
|
this.closeSocket();
|
|||
|
|
this.$emit('renderText', this.renderText)
|
|||
|
|
}
|
|||
|
|
//收到不正常服务器消息,返回错误到控制台
|
|||
|
|
if (message.code !== 0) {
|
|||
|
|
this.closeSocket();
|
|||
|
|
console.error(message);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
console.log("未监听到消息：原因：", JSON.stringify(res));
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
console.log("socketTask实例已存在");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//发送消息
|
|||
|
|
sendMessage(sendData) {
|
|||
|
|
console.log('发送', JSON.stringify(sendData))
|
|||
|
|
uniSocketTask.send({
|
|||
|
|
data: JSON.stringify(sendData),
|
|||
|
|
success() {
|
|||
|
|
console.log("发送成功");
|
|||
|
|
},
|
|||
|
|
fail() {
|
|||
|
|
console.log("发送失败");
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//关闭连接
|
|||
|
|
closeSocket() {
|
|||
|
|
console.log("开始尝试关闭连接");
|
|||
|
|
// 关闭连接
|
|||
|
|
uniSocketTask.close();
|
|||
|
|
},
|
|||
|
|
//开启录音
|
|||
|
|
startRecord() {
|
|||
|
|
console.log("打开录音");
|
|||
|
|
recordManager.onStart(() => {
|
|||
|
|
console.log("开始录音");
|
|||
|
|
this.show = true
|
|||
|
|
// ...
|
|||
|
|
});
|
|||
|
|
recordManager.onStop((res) => {
|
|||
|
|
this.show = false
|
|||
|
|
// tempFilePath String 录音文件的临时路径
|
|||
|
|
console.log("录音停止,文件路径为:", res.tempFilePath);
|
|||
|
|
|
|||
|
|
// this.sendMessage(frame)
|
|||
|
|
|
|||
|
|
this.pathToBase64(res.tempFilePath).then(base64 => {
|
|||
|
|
console.log('base64--', base64);
|
|||
|
|
// 这里一定要注意：当需要将base64字符串转换为Buffer时，通常会去掉前面部分的数据URL标识（如"data:image/png;base64,"），因为这部分内容不是实际的base64编码数据。
|
|||
|
|
let buff = base64.split(",")[1]
|
|||
|
|
const arrayBuffer = uni.base64ToArrayBuffer(buff)
|
|||
|
|
const audioString = this.toString(arrayBuffer)
|
|||
|
|
console.log("文件读取成功", audioString.length);
|
|||
|
|
let offset = 0;
|
|||
|
|
while (offset < audioString.length) {
|
|||
|
|
const subString = audioString.substring(offset, offset + 1280)
|
|||
|
|
offset += 1280
|
|||
|
|
const isEnd = offset >= audioString.length
|
|||
|
|
|
|||
|
|
let params = {
|
|||
|
|
common: {
|
|||
|
|
app_id: config.appid,
|
|||
|
|
},
|
|||
|
|
business: {
|
|||
|
|
language: "zh_cn",
|
|||
|
|
domain: "iat",
|
|||
|
|
accent: "mandarin",
|
|||
|
|
dwa: "wpgs", // 可选参数，动态修正
|
|||
|
|
vad_eos: 5000,
|
|||
|
|
},
|
|||
|
|
data: {
|
|||
|
|
status: isEnd ? 2 : 1,
|
|||
|
|
format: "audio/L16;rate=16000",
|
|||
|
|
encoding: "lame",
|
|||
|
|
audio: btoa(subString)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.sendMessage(params);
|
|||
|
|
}
|
|||
|
|
}).catch(error => {
|
|||
|
|
console.error(error)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
recordManager.onError((err) => {
|
|||
|
|
// errMsg String 错误信息
|
|||
|
|
console.log("录音出现错误", err);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
recordManager.start(recordOption);
|
|||
|
|
},
|
|||
|
|
//关闭录音
|
|||
|
|
stopRecord() {
|
|||
|
|
recordManager.stop();
|
|||
|
|
},
|
|||
|
|
toString(buffer) {
|
|||
|
|
var binary = '';
|
|||
|
|
var bytes = new Uint8Array(buffer);
|
|||
|
|
var len = bytes.byteLength;
|
|||
|
|
for (var i = 0; i < len; i++) {
|
|||
|
|
binary += String.fromCharCode(bytes[i]);
|
|||
|
|
}
|
|||
|
|
return binary
|
|||
|
|
},
|
|||
|
|
//录音文件路径转base64
|
|||
|
|
pathToBase64(path) {
|
|||
|
|
return new Promise(function(resolve, reject) {
|
|||
|
|
// app
|
|||
|
|
if (typeof plus === 'object') {
|
|||
|
|
plus.io.resolveLocalFileSystemURL(path, function(entry) {
|
|||
|
|
entry.file(function(file) {
|
|||
|
|
var fileReader = new plus.io.FileReader()
|
|||
|
|
fileReader.onload = function(evt) {
|
|||
|
|
resolve(evt.target.result)
|
|||
|
|
}
|
|||
|
|
fileReader.onerror = function(error) {
|
|||
|
|
reject(error)
|
|||
|
|
}
|
|||
|
|
fileReader.readAsDataURL(file)
|
|||
|
|
}, function(error) {
|
|||
|
|
reject(error)
|
|||
|
|
})
|
|||
|
|
}, function(error) {
|
|||
|
|
reject(error)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
reject(new Error('not support'))
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//讯飞回复字段拼接
|
|||
|
|
renderResult(jsonData) {
|
|||
|
|
console.log("开始执行渲染函数", jsonData);
|
|||
|
|
if (jsonData.data && jsonData.data.result) {
|
|||
|
|
let data = jsonData.data.result;
|
|||
|
|
let str = ""; // 初始化一个字符串变量用于存储拼接后的识别结果
|
|||
|
|
let ws = data.ws;
|
|||
|
|
for (let i = 0; i < ws.length; i++) {
|
|||
|
|
str = str + ws[i].cw[0].w;
|
|||
|
|
}
|
|||
|
|
// 开启wpgs会有此字段(前提：在控制台开通动态修正功能)
|
|||
|
|
// 取值为 "apd"时表示该片结果是追加到前面的最终结果；取值为"rpl" 时表示替换前面的部分结果，替换范围为rg字段
|
|||
|
|
if (data.pgs) {
|
|||
|
|
if (data.pgs === "apd") {
|
|||
|
|
// 将resultTextTemp同步给resultText
|
|||
|
|
this.resultText = this.resultTextTemp;
|
|||
|
|
}
|
|||
|
|
// 将结果存储在resultTextTemp中
|
|||
|
|
this.resultTextTemp = this.resultText + str;
|
|||
|
|
} else {
|
|||
|
|
this.resultText = this.resultText + str;
|
|||
|
|
}
|
|||
|
|
this.renderText = this.resultTextTemp || this.resultText || "";
|
|||
|
|
}
|
|||
|
|
console.log("渲染后的数据为");
|
|||
|
|
console.log(this.renderText);
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
page {
|
|||
|
|
/* background-color: #111111; */
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
|
|||
|
|
</style>
|