mkm/TaskSystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更语音静态资源

Browse Source
This commit is contained in:
yaooo 2023-10-12 15:21:14 +08:00
parent e16afaf4d6
commit ce984a9f8b
5 changed files with 127 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
public/xf_voice/.htaccess
View File

6
public/xf_voice/css/base.css
View File

@ -1,7 +1,9 @@
.h1 { .h1 {
text-align: center; text-align: center;
} }
body{
background-color: transparent !important;
}
.voice-box { .voice-box {
box-sizing : border-box; box-sizing : border-box;
display : flex; display : flex;
@ -9,7 +11,7 @@
margin : 50px auto; margin : 50px auto;
padding : 50px; padding : 50px;
width : 60%; width : 60%;
border : 1px solid gray;
border-radius : 3px; border-radius : 3px;
} }

162
public/xf_voice/index.html
View File

@ -1,86 +1,106 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum=1.0, user-scalable=no shrink-to-fit=no" /> <meta name="viewport"
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum=1.0, user-scalable=no shrink-to-fit=no" />
<title>迅飞语音听写（流式版）WebAPI</title> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./css/base.css" /> <link rel="stylesheet" href="./css/base.css" />
<script async src="https://hm.baidu.com/hm.js?85fad12bb9a6dab448f4eff0a19299a5"></script> <!-- <script async src="https://hm.baidu.com/hm.js?85fad12bb9a6dab448f4eff0a19299a5"></script> -->
</head> </head>
<body style="background-color: transparent;"> <body>
<h1 class="h1">迅飞语音听写（流式版）WebAPI</h1>
<hr>
<section class="voice-box">
<input type="search" name="voice" id="voice-txt" />
<button id="start-btn">开始识别</button>
</section>
<section class="fixed-box" id="fixed-box">
<div class="fixed-main">
<button class="fixed-close" id="close-btn"></button>
<div id="fixed-txt">Hello! 请说出你想说话。。。！</div>
<div class="fixed-icon">
<img src="./img/voice.png" alt="" />
</div>
</div>
</section>
<script src="./js/crypto-js.min.js"></script> <section class="voice-box">
<script src="./js/voice.js"></script> <input type="search" name="voice" id="voice-txt" />
<button id="start-btn">开始识别</button>
</section>
<script> <section class="fixed-box" id="fixed-box">
window.onload = function () { <div class="fixed-main">
const voiceTxt = document.querySelector('#voice-txt'); <button class="fixed-close" id="close-btn"></button>
const startBtn = document.querySelector('#start-btn'); <div id="fixed-txt">Hello! 请说出你想说话。。。！</div>
const fixedBox = document.querySelector('#fixed-box'); <div class="fixed-icon">
const fixedTxt = document.querySelector('#fixed-txt'); <img src="./img/voice.png" alt="" />
const closeBtn = document.querySelector('#close-btn'); </div>
let times = null; </div>
</section>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
</script>
<script src="./js/crypto-js.min.js"></script>
<script src="./js/voice.js"></script>
// 实例化迅飞语音听写（流式版）WebAPI <script>
const voice = new Voice({ window.onload = function() {
const voiceTxt = document.querySelector('#voice-txt');
const startBtn = document.querySelector('#start-btn');
const fixedBox = document.querySelector('#fixed-box');
const fixedTxt = document.querySelector('#fixed-txt');
const closeBtn = document.querySelector('#close-btn');
let times = null;
// 服务接口认证信息 注：apiKey 和 apiSecret 的长度都差不多，请要填错哦，！
appId: '2eda6c2e',
apiSecret: 'MDEyMzE5YTc5YmQ5NjMwOTU1MWY4N2Y2',
apiKey: '12ec1f9d113932575fc4b114a2f60ffd',
// 注：要获取以上3个参数，请到迅飞开放平台：https://www.xfyun.cn/services/voicedictation 【注：这是我的迅飞语音听写（流式版）每天服务量500（也就是调500次），如果你需求里大请购买服务量：https://www.xfyun.cn/services/voicedictation?target=price】
onWillStatusChange: function (oldStatus, newStatus) { // 实例化迅飞语音听写（流式版）WebAPI
//可以在这里进行页面中一些交互逻辑处理：注：倒计时（语音听写只有60s）,录音的动画，按钮交互等！ const voice = new Voice({
fixedBox.style.display = 'block';
},
onTextChange: function (text) {
//监听识别结果的变化
voiceTxt.value = text;
fixedTxt.innerText = text;
// 3秒钟内没有说话，就自动关闭 // 服务接口认证信息 注：apiKey 和 apiSecret 的长度都差不多，请要填错哦，！
if (text) { appId: '2eda6c2e',
clearTimeout(times); apiSecret: 'MDEyMzE5YTc5YmQ5NjMwOTU1MWY4N2Y2',
times = setTimeout(() => { apiKey: '12ec1f9d113932575fc4b114a2f60ffd',
this.stop(); // voice.stop(); // 注：要获取以上3个参数，请到迅飞开放平台：https://www.xfyun.cn/services/voicedictation 【注：这是我的迅飞语音听写（流式版）每天服务量500（也就是调500次），如果你需求里大请购买服务量：https://www.xfyun.cn/services/voicedictation?target=price】
fixedBox.style.display = 'none';
}, 3000);
};
}
});
// 开始识别 onWillStatusChange: function(oldStatus, newStatus) {
startBtn['onclick'] = function () { //可以在这里进行页面中一些交互逻辑处理：注：倒计时（语音听写只有60s）,录音的动画，按钮交互等！
voice.start(); fixedBox.style.display = 'block';
}; },
onTextChange: function(text) {
//监听识别结果的变化
voiceTxt.value = text;
fixedTxt.innerText = text;
console.log(text,'11111')
// 3秒钟内没有说话，就自动关闭
if (text) {
setTimeout(() => {
voice.stop();
uni.postMessage({
data: text
});
fixedBox.style.display = 'none';
}, 0);
};
}
});
// 关闭识别 addUniEvenPassthrough()
closeBtn['onclick'] = function () { addcloEvenPassthrough()
voice.stop();
fixedBox.style.display = 'none'; function addUniEvenPassthrough() {
}; window.uniEvent = function(info) {
}; console.log('11111')
</script> voice.start();
</body> }
}
function addcloEvenPassthrough() {
window.closeEvent = function(info) {
console.log('2222')
voice.stop();
fixedBox.style.display = 'none';
}
}
// 开始识别
startBtn['onclick'] = function() {
voice.start();
};
// 关闭识别
closeBtn['onclick'] = function() {
voice.stop();
fixedBox.style.display = 'none';
};
};
</script>
</body>
</html> </html>

9
public/xf_voice/js/voice.js
View File

@ -74,6 +74,7 @@
} else { } else {
self.webWorker = new Worker('./js/transcode.worker.js'); self.webWorker = new Worker('./js/transcode.worker.js');
self.webWorker.onmessage = function (event) { self.webWorker.onmessage = function (event) {
self.audioData.push(...event.data); self.audioData.push(...event.data);
}; };
} }
@ -124,6 +125,7 @@
this.setStatus('init'); this.setStatus('init');
iatWS.onopen = e => { iatWS.onopen = e => {
this.setStatus('ing'); this.setStatus('ing');
console.log('连接成功')
// 重新开始录音 // 重新开始录音
setTimeout(() => { setTimeout(() => {
this.webSocketSend(); this.webSocketSend();
@ -217,6 +219,7 @@
// 向webSocket发送数据(音频二进制数据经过Base64处理) // 向webSocket发送数据(音频二进制数据经过Base64处理)
webSocketSend() { webSocketSend() {
if (this.webSocket.readyState !== 1) return false; if (this.webSocket.readyState !== 1) return false;
// 音频数据 // 音频数据
const audioData = this.audioData.splice(0, 1280); const audioData = this.audioData.splice(0, 1280);
const params = { const params = {
@ -263,6 +266,7 @@
} }
return false; return false;
}; };
console.log(this.audioData)
// 中间帧 // 中间帧
this.webSocket.send( this.webSocket.send(
JSON.stringify({ JSON.stringify({
@ -278,7 +282,9 @@
}; };
// 识别结束 webSocket返回数据 // 识别结束 webSocket返回数据
webSocketRes(resultData) { webSocketRes(resultData) {
let jsonData = JSON.parse(resultData); let jsonData = JSON.parse(resultData);
console.log(JSON.stringify( jsonData))
if (jsonData.data && jsonData.data.result) { if (jsonData.data && jsonData.data.result) {
let data = jsonData.data.result; let data = jsonData.data.result;
let str = ''; let str = '';
@ -307,13 +313,16 @@
} }
if (jsonData.code === 0 && jsonData.data.status === 2) { if (jsonData.code === 0 && jsonData.data.status === 2) {
this.webSocket.close(); this.webSocket.close();
} }
if (jsonData.code !== 0) { if (jsonData.code !== 0) {
this.webSocket.close(); this.webSocket.close();
} }
}; };
// 启动录音 // 启动录音
recorderStart() { recorderStart() {
if (!this.audioContext) { if (!this.audioContext) {
this.recorderInit(); this.recorderInit();
} else { } else {

0
public/xf_voice/nginx.htaccess
View File