更语音静态资源
This commit is contained in:
yaooo
parent
e16afaf4d6
commit
ce984a9f8b
@ -1,7 +1,9 @@
|
||||
.h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.voice-box {
|
||||
box-sizing : border-box;
|
||||
display : flex;
|
||||
@ -9,7 +11,7 @@
|
||||
margin : 50px auto;
|
||||
padding : 50px;
|
||||
width : 60%;
|
||||
border : 1px solid gray;
|
||||
|
||||
border-radius : 3px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,86 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<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 http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>迅飞语音听写（流式版）WebAPI</title>
|
||||
<link rel="stylesheet" href="./css/base.css" />
|
||||
<script async src="https://hm.baidu.com/hm.js?85fad12bb9a6dab448f4eff0a19299a5"></script>
|
||||
</head>
|
||||
|
||||
<body style="background-color: transparent;">
|
||||
<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>
|
||||
<script src="./js/voice.js"></script>
|
||||
|
||||
<script>
|
||||
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;
|
||||
|
||||
// 实例化迅飞语音听写（流式版）WebAPI
|
||||
const voice = new Voice({
|
||||
|
||||
// 服务接口认证信息 注：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) {
|
||||
//可以在这里进行页面中一些交互逻辑处理：注：倒计时（语音听写只有60s）,录音的动画，按钮交互等！
|
||||
fixedBox.style.display = 'block';
|
||||
},
|
||||
onTextChange: function (text) {
|
||||
//监听识别结果的变化
|
||||
voiceTxt.value = text;
|
||||
fixedTxt.innerText = text;
|
||||
|
||||
// 3秒钟内没有说话，就自动关闭
|
||||
if (text) {
|
||||
clearTimeout(times);
|
||||
times = setTimeout(() => {
|
||||
this.stop(); // voice.stop();
|
||||
fixedBox.style.display = 'none';
|
||||
}, 3000);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// 开始识别
|
||||
startBtn['onclick'] = function () {
|
||||
voice.start();
|
||||
};
|
||||
|
||||
// 关闭识别
|
||||
closeBtn['onclick'] = function () {
|
||||
voice.stop();
|
||||
fixedBox.style.display = 'none';
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<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 http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<link rel="stylesheet" href="./css/base.css" />
|
||||
<!-- <script async src="https://hm.baidu.com/hm.js?85fad12bb9a6dab448f4eff0a19299a5"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<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 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>
|
||||
|
||||
<script>
|
||||
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;
|
||||
|
||||
|
||||
// 实例化迅飞语音听写（流式版）WebAPI
|
||||
const voice = new Voice({
|
||||
|
||||
// 服务接口认证信息 注：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) {
|
||||
//可以在这里进行页面中一些交互逻辑处理：注：倒计时（语音听写只有60s）,录音的动画，按钮交互等！
|
||||
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()
|
||||
addcloEvenPassthrough()
|
||||
|
||||
function addUniEvenPassthrough() {
|
||||
window.uniEvent = function(info) {
|
||||
console.log('11111')
|
||||
voice.start();
|
||||
}
|
||||
}
|
||||
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>
|
||||
@ -73,7 +73,8 @@
|
||||
alert('请正确配置【迅飞语音听写（流式版）WebAPI】服务接口认证信息！');
|
||||
} else {
|
||||
self.webWorker = new Worker('./js/transcode.worker.js');
|
||||
self.webWorker.onmessage = function (event) {
|
||||
self.webWorker.onmessage = function (event) {
|
||||
|
||||
self.audioData.push(...event.data);
|
||||
};
|
||||
}
|
||||
@ -123,7 +124,8 @@
|
||||
this.webSocket = iatWS;
|
||||
this.setStatus('init');
|
||||
iatWS.onopen = e => {
|
||||
this.setStatus('ing');
|
||||
this.setStatus('ing');
|
||||
console.log('连接成功')
|
||||
// 重新开始录音
|
||||
setTimeout(() => {
|
||||
this.webSocketSend();
|
||||
@ -216,7 +218,8 @@
|
||||
};
|
||||
// 向webSocket发送数据(音频二进制数据经过Base64处理)
|
||||
webSocketSend() {
|
||||
if (this.webSocket.readyState !== 1) return false;
|
||||
if (this.webSocket.readyState !== 1) return false;
|
||||
|
||||
// 音频数据
|
||||
const audioData = this.audioData.splice(0, 1280);
|
||||
const params = {
|
||||
@ -262,7 +265,8 @@
|
||||
clearInterval(this.handlerInterval);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
};
|
||||
console.log(this.audioData)
|
||||
// 中间帧
|
||||
this.webSocket.send(
|
||||
JSON.stringify({
|
||||
@ -277,8 +281,10 @@
|
||||
}, 40);
|
||||
};
|
||||
// 识别结束 webSocket返回数据
|
||||
webSocketRes(resultData) {
|
||||
let jsonData = JSON.parse(resultData);
|
||||
webSocketRes(resultData) {
|
||||
|
||||
let jsonData = JSON.parse(resultData);
|
||||
console.log(JSON.stringify( jsonData))
|
||||
if (jsonData.data && jsonData.data.result) {
|
||||
let data = jsonData.data.result;
|
||||
let str = '';
|
||||
@ -306,14 +312,17 @@
|
||||
}
|
||||
}
|
||||
if (jsonData.code === 0 && jsonData.data.status === 2) {
|
||||
this.webSocket.close();
|
||||
this.webSocket.close();
|
||||
|
||||
}
|
||||
if (jsonData.code !== 0) {
|
||||
this.webSocket.close();
|
||||
this.webSocket.close();
|
||||
|
||||
}
|
||||
};
|
||||
// 启动录音
|
||||
recorderStart() {
|
||||
recorderStart() {
|
||||
|
||||
if (!this.audioContext) {
|
||||
this.recorderInit();
|
||||
} else {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user