更新web语音
This commit is contained in:
yaooo
parent
8c96e517f8
commit
63a7a2bd5f
0
public/xun_voice/.htaccess
Normal file
0
public/xun_voice/.htaccess
Normal file
166
public/xun_voice/css/base.css
Normal file
166
public/xun_voice/css/base.css
Normal file
@ -0,0 +1,166 @@
|
|||||||
|
.h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-box {
|
||||||
|
box-sizing : border-box;
|
||||||
|
display : flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin : 50px auto;
|
||||||
|
padding : 50px;
|
||||||
|
width : 60%;
|
||||||
|
border : 1px solid gray;
|
||||||
|
border-radius : 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-box input {
|
||||||
|
box-sizing : border-box;
|
||||||
|
padding : 10px;
|
||||||
|
width : 70%;
|
||||||
|
height : 50px;
|
||||||
|
font-size : 18px;
|
||||||
|
color : #187cff;
|
||||||
|
border : 1px solid #187cff;
|
||||||
|
border-radius: 3px 0px 0px 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-box button {
|
||||||
|
width : 30%;
|
||||||
|
height : 50px;
|
||||||
|
line-height : 50px;
|
||||||
|
font-size : 18px;
|
||||||
|
color : white;
|
||||||
|
background : #187cff;
|
||||||
|
border : none;
|
||||||
|
border-radius: 0px 3px 3px 0px;
|
||||||
|
cursor : pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-box button::before {
|
||||||
|
content : "";
|
||||||
|
display : inline-block;
|
||||||
|
width : 23px;
|
||||||
|
height : 26px;
|
||||||
|
vertical-align : middle;
|
||||||
|
background : url(../img/voice.png) no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-box {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display : none;
|
||||||
|
position : fixed;
|
||||||
|
top : 0px;
|
||||||
|
right : 0px;
|
||||||
|
bottom : 0px;
|
||||||
|
left : 0px;
|
||||||
|
border : .04rem solid #e0e7ff;
|
||||||
|
background: rgba(16, 22, 62, .2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-close {
|
||||||
|
position : absolute;
|
||||||
|
top : 0px;
|
||||||
|
right : 0px;
|
||||||
|
padding : 24px;
|
||||||
|
width : 20px;
|
||||||
|
height : 20px;
|
||||||
|
border : none;
|
||||||
|
background : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABeklEQVRIibXWsWoVQRQA0LObgGCTFFr6env9h/yETSz0tclrBEUJWhjzAqkV/A9/QrC2CtgIYqk2DwvdMExm991ZJrdaZoY53Bnm3u0Wy80BPuI21jjRPjqc4il+4FG3WG4ucS9ZtMaqMfoej5OxLz3uZAuPcXaDKNzt/TuCPFrgYyi87fEK543xKfQFLvoEaYVvQ19DnwxO4euWaA5P4UcBPIzCbmHRcYLleDqfox9wGEG5nnGKRzOvRilnnOIDluPD/BT6HG/GNp+CI/j+HDQCR/BqlPE7LuGlO5+F1sARPIzWwh32Jub3K/YKw1PFYYgV3rWEI2iKh2r7NnhbGZzdWKaeU03tzZ/W8ARH/2TGMq5BZ7XUElzVZebiOTzU3ho0RUqts4in8Kwuk8Uqig/wti4TQSP41XgfQMNlMIBf9fPd/x8t0RTn+h/LEX52i+XmN241RtM4K+Dfe3y7QZTysV/u7D18+RkP8AfPxPpubXzCL9zHVzz5C8ecbD1n3xuUAAAAAElFTkSuQmCC) no-repeat center center;
|
||||||
|
background-size: 20px;
|
||||||
|
transition : all .5s;
|
||||||
|
cursor : pointer;
|
||||||
|
outline : none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-close:hover {
|
||||||
|
transform : rotate(270deg);
|
||||||
|
-webkit-transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.fixed-main {
|
||||||
|
box-sizing : border-box;
|
||||||
|
position : absolute;
|
||||||
|
left : 20%;
|
||||||
|
bottom : 0px;
|
||||||
|
padding : 30px;
|
||||||
|
width : 60%;
|
||||||
|
height : 240px;
|
||||||
|
font-size : 18px;
|
||||||
|
background : white;
|
||||||
|
border : 2px solid #e0e7ff;
|
||||||
|
border-radius: 5px 5px 0px 0px;
|
||||||
|
overflow-y : auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-icon {
|
||||||
|
box-sizing : border-box;
|
||||||
|
display : flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items : center;
|
||||||
|
position : absolute;
|
||||||
|
top : 50%;
|
||||||
|
left : 50%;
|
||||||
|
margin-top : -50px;
|
||||||
|
margin-left : -50px;
|
||||||
|
width : 100px;
|
||||||
|
height : 100px;
|
||||||
|
background : linear-gradient(115deg, #56d8e4 5%, #9f01ea 95%);
|
||||||
|
border : 1px solid #e0e7ff;
|
||||||
|
border-radius : 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-icon::before {
|
||||||
|
content : "";
|
||||||
|
position : absolute;
|
||||||
|
display : inline-block;
|
||||||
|
width : 100px;
|
||||||
|
height : 100px;
|
||||||
|
border : 1px solid #9f01ea;
|
||||||
|
box-shadow : 0px 0px 6px 0px #9f01ea;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation : move 1.5s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-icon::after {
|
||||||
|
content : "";
|
||||||
|
position : absolute;
|
||||||
|
display : inline-block;
|
||||||
|
width : 100px;
|
||||||
|
height : 100px;
|
||||||
|
border : 1px solid #56d8e4;
|
||||||
|
box-shadow : 0px 0px 6px 0px #56d8e4;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation : move 1.5s .5s infinite;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-icon img {
|
||||||
|
width : 30px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes move {
|
||||||
|
0% {
|
||||||
|
opacity : 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity : 0;
|
||||||
|
transform: scale(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width : 6px;
|
||||||
|
height : 6px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
border-radius : 6px;
|
||||||
|
background-color: #187cff;
|
||||||
|
}
|
||||||
BIN
public/xun_voice/img/test.gif
Normal file
BIN
public/xun_voice/img/test.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
public/xun_voice/img/test.png
Normal file
BIN
public/xun_voice/img/test.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
public/xun_voice/img/voice.png
Normal file
BIN
public/xun_voice/img/voice.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
86
public/xun_voice/index.html
Normal file
86
public/xun_voice/index.html
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
<!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>
|
||||||
|
<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: '5ec244d5',
|
||||||
|
apiSecret: '37912e3e3f205e2a6201ec290452470a',
|
||||||
|
apiKey: '78b6c006f1f3df5e24d315e3dff09212',
|
||||||
|
// 注：要获取以上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>
|
||||||
|
|
||||||
|
</html>
|
||||||
1
public/xun_voice/js/crypto-js.min.js
vendored
Normal file
1
public/xun_voice/js/crypto-js.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
45
public/xun_voice/js/transcode.worker.js
Normal file
45
public/xun_voice/js/transcode.worker.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
;(function () {
|
||||||
|
let self = this
|
||||||
|
self.onmessage = function (e) {
|
||||||
|
transAudioData.transcode(e.data)
|
||||||
|
}
|
||||||
|
|
||||||
|
let transAudioData = {
|
||||||
|
transcode(audioData) {
|
||||||
|
let output = transAudioData.to16kHz(audioData)
|
||||||
|
output = transAudioData.to16BitPCM(output)
|
||||||
|
output = Array.from(new Uint8Array(output.buffer))
|
||||||
|
self.postMessage(output)
|
||||||
|
// return output
|
||||||
|
},
|
||||||
|
|
||||||
|
to16kHz(audioData) {
|
||||||
|
var data = new Float32Array(audioData)
|
||||||
|
var fitCount = Math.round(data.length * (16000 / 44100))
|
||||||
|
var newData = new Float32Array(fitCount)
|
||||||
|
var springFactor = (data.length - 1) / (fitCount - 1)
|
||||||
|
newData[0] = data[0]
|
||||||
|
for (let i = 1; i < fitCount - 1; i++) {
|
||||||
|
var tmp = i * springFactor
|
||||||
|
var before = Math.floor(tmp).toFixed()
|
||||||
|
var after = Math.ceil(tmp).toFixed()
|
||||||
|
var atPoint = tmp - before
|
||||||
|
newData[i] = data[before] + (data[after] - data[before]) * atPoint
|
||||||
|
}
|
||||||
|
newData[fitCount - 1] = data[data.length - 1]
|
||||||
|
return newData
|
||||||
|
},
|
||||||
|
|
||||||
|
to16BitPCM(input) {
|
||||||
|
var dataLength = input.length * (16 / 8)
|
||||||
|
var dataBuffer = new ArrayBuffer(dataLength)
|
||||||
|
var dataView = new DataView(dataBuffer)
|
||||||
|
var offset = 0
|
||||||
|
for (var i = 0; i < input.length; i++, offset += 2) {
|
||||||
|
var s = Math.max(-1, Math.min(1, input[i]))
|
||||||
|
dataView.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true)
|
||||||
|
}
|
||||||
|
return dataView
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})();
|
||||||
347
public/xun_voice/js/voice.js
Normal file
347
public/xun_voice/js/voice.js
Normal file
@ -0,0 +1,347 @@
|
|||||||
|
; (function (window, voice) {
|
||||||
|
"use strict";
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
define(voice);
|
||||||
|
} else if (typeof exports === 'object') {
|
||||||
|
module.exports = voice();
|
||||||
|
} else {
|
||||||
|
window.Voice = voice();
|
||||||
|
};
|
||||||
|
}(typeof window !== "undefined" ? window : this, () => {
|
||||||
|
"use strict";
|
||||||
|
return class IatRecorder {
|
||||||
|
constructor(opts = {}) {
|
||||||
|
// 服务接口认证信息(语音听写（流式版）WebAPI)
|
||||||
|
this.appId = opts.appId || '';
|
||||||
|
this.apiKey = opts.apiKey || '';
|
||||||
|
this.apiSecret = opts.apiSecret || '';
|
||||||
|
// 识别监听方法
|
||||||
|
this.onTextChange = opts.onTextChange || Function();
|
||||||
|
this.onWillStatusChange = opts.onWillStatusChange || Function();
|
||||||
|
// 方言/语种
|
||||||
|
this.status = 'null'
|
||||||
|
this.language = opts.language || 'zh_cn'
|
||||||
|
this.accent = opts.accent || 'mandarin';
|
||||||
|
// 流媒体
|
||||||
|
this.streamRef = [];
|
||||||
|
// 记录音频数据
|
||||||
|
this.audioData = [];
|
||||||
|
// 记录听写结果
|
||||||
|
this.resultText = '';
|
||||||
|
// wpgs下的听写结果需要中间状态辅助记录
|
||||||
|
this.resultTextTemp = '';
|
||||||
|
// 音频数据多线程
|
||||||
|
this.init();
|
||||||
|
};
|
||||||
|
// WebSocket请求地址鉴权
|
||||||
|
getWebSocketUrl() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// 请求地址根据语种不同变化
|
||||||
|
try {
|
||||||
|
const CryptoJS = require('crypto-js');
|
||||||
|
let url = 'wss://iat-api.xfyun.cn/v2/iat',
|
||||||
|
host = 'iat-api.xfyun.cn',
|
||||||
|
date = new Date().toGMTString(),
|
||||||
|
algorithm = 'hmac-sha256',
|
||||||
|
headers = 'host date request-line',
|
||||||
|
signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/iat HTTP/1.1`,
|
||||||
|
signatureSha = CryptoJS.HmacSHA256(signatureOrigin, this.apiSecret),
|
||||||
|
signature = CryptoJS.enc.Base64.stringify(signatureSha),
|
||||||
|
authorizationOrigin = `api_key="${this.apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`,
|
||||||
|
authorization = btoa(authorizationOrigin);
|
||||||
|
resolve(`${url}?authorization=${authorization}&date=${date}&host=${host}`);
|
||||||
|
} catch (error) {
|
||||||
|
let url = 'wss://iat-api.xfyun.cn/v2/iat',
|
||||||
|
host = 'iat-api.xfyun.cn',
|
||||||
|
date = new Date().toGMTString(),
|
||||||
|
algorithm = 'hmac-sha256',
|
||||||
|
headers = 'host date request-line',
|
||||||
|
signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/iat HTTP/1.1`,
|
||||||
|
signatureSha = CryptoJS.HmacSHA256(signatureOrigin, this.apiSecret),
|
||||||
|
signature = CryptoJS.enc.Base64.stringify(signatureSha),
|
||||||
|
authorizationOrigin = `api_key="${this.apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`,
|
||||||
|
authorization = btoa(authorizationOrigin);
|
||||||
|
resolve(`${url}?authorization=${authorization}&date=${date}&host=${host}`);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 操作初始化
|
||||||
|
init() {
|
||||||
|
const self = this;
|
||||||
|
try {
|
||||||
|
if (!self.appId || !self.apiKey || !self.apiSecret) {
|
||||||
|
alert('请正确配置【迅飞语音听写（流式版）WebAPI】服务接口认证信息！');
|
||||||
|
} else {
|
||||||
|
self.webWorker = new Worker('./js/transcode.worker.js');
|
||||||
|
self.webWorker.onmessage = function (event) {
|
||||||
|
self.audioData.push(...event.data);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
alert('对不起：请在服务器环境下运行！');
|
||||||
|
console.error('请在服务器如：WAMP、XAMPP、Phpstudy、http-server、WebServer等环境中运行！', error);
|
||||||
|
};
|
||||||
|
console.log("%c ❤️使用说明：http://www.muguilin.com/blog/info/609bafc50d572b3fd79b058f", "font-size:32px; color:blue; font-weight: bold;");
|
||||||
|
};
|
||||||
|
// 修改录音听写状态
|
||||||
|
setStatus(status) {
|
||||||
|
this.onWillStatusChange && this.status !== status && this.onWillStatusChange(this.status, status);
|
||||||
|
this.status = status;
|
||||||
|
};
|
||||||
|
// 设置识别结果内容
|
||||||
|
setResultText({ resultText, resultTextTemp } = {}) {
|
||||||
|
this.onTextChange && this.onTextChange(resultTextTemp || resultText || '');
|
||||||
|
resultText !== undefined && (this.resultText = resultText);
|
||||||
|
resultTextTemp !== undefined && (this.resultTextTemp = resultTextTemp);
|
||||||
|
};
|
||||||
|
// 修改听写参数
|
||||||
|
setParams({ language, accent } = {}) {
|
||||||
|
language && (this.language = language)
|
||||||
|
accent && (this.accent = accent)
|
||||||
|
};
|
||||||
|
// 对处理后的音频数据进行base64编码，
|
||||||
|
toBase64(buffer) {
|
||||||
|
let binary = '';
|
||||||
|
let bytes = new Uint8Array(buffer);
|
||||||
|
for (let i = 0; i < bytes.byteLength; i++) {
|
||||||
|
binary += String.fromCharCode(bytes[i]);
|
||||||
|
}
|
||||||
|
return window.btoa(binary);
|
||||||
|
};
|
||||||
|
// 连接WebSocket
|
||||||
|
connectWebSocket() {
|
||||||
|
return this.getWebSocketUrl().then(url => {
|
||||||
|
let iatWS;
|
||||||
|
if ('WebSocket' in window) {
|
||||||
|
iatWS = new WebSocket(url);
|
||||||
|
} else if ('MozWebSocket' in window) {
|
||||||
|
iatWS = new MozWebSocket(url);
|
||||||
|
} else {
|
||||||
|
alert('浏览器不支持WebSocket!');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
this.webSocket = iatWS;
|
||||||
|
this.setStatus('init');
|
||||||
|
iatWS.onopen = e => {
|
||||||
|
this.setStatus('ing');
|
||||||
|
// 重新开始录音
|
||||||
|
setTimeout(() => {
|
||||||
|
this.webSocketSend();
|
||||||
|
}, 500);
|
||||||
|
};
|
||||||
|
iatWS.onmessage = e => {
|
||||||
|
this.webSocketRes(e.data);
|
||||||
|
};
|
||||||
|
iatWS.onerror = e => {
|
||||||
|
this.recorderStop(e);
|
||||||
|
};
|
||||||
|
iatWS.onclose = e => {
|
||||||
|
this.recorderStop(e);
|
||||||
|
};
|
||||||
|
})
|
||||||
|
};
|
||||||
|
// 初始化浏览器录音
|
||||||
|
recorderInit() {
|
||||||
|
// 创建音频环境
|
||||||
|
try {
|
||||||
|
this.audioContext = this.audioContext ? this.audioContext : new (window.AudioContext || window.webkitAudioContext)();
|
||||||
|
this.audioContext.resume();
|
||||||
|
if (!this.audioContext) {
|
||||||
|
alert('浏览器不支持webAudioApi相关接口');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
if (!this.audioContext) {
|
||||||
|
alert('浏览器不支持webAudioApi相关接口');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 获取浏览器录音权限成功时回调
|
||||||
|
let getMediaSuccess = _ => {
|
||||||
|
// 创建一个用于通过JavaScript直接处理音频
|
||||||
|
this.scriptProcessor = this.audioContext.createScriptProcessor(0, 1, 1);
|
||||||
|
this.scriptProcessor.onaudioprocess = e => {
|
||||||
|
if (this.status === 'ing') {
|
||||||
|
// 多线程音频数据处理
|
||||||
|
try {
|
||||||
|
this.webWorker.postMessage(e.inputBuffer.getChannelData(0));
|
||||||
|
} catch (error) { }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 创建一个新的MediaStreamAudioSourceNode 对象，使来自MediaStream的音频可以被播放和操作
|
||||||
|
this.mediaSource = this.audioContext.createMediaStreamSource(this.streamRef);
|
||||||
|
this.mediaSource.connect(this.scriptProcessor);
|
||||||
|
this.scriptProcessor.connect(this.audioContext.destination);
|
||||||
|
this.connectWebSocket();
|
||||||
|
};
|
||||||
|
// 获取浏览器录音权限失败时回调
|
||||||
|
let getMediaFail = (e) => {
|
||||||
|
alert('对不起：录音权限获取失败!');
|
||||||
|
this.audioContext && this.audioContext.close();
|
||||||
|
this.audioContext = undefined;
|
||||||
|
// 关闭websocket
|
||||||
|
if (this.webSocket && this.webSocket.readyState === 1) {
|
||||||
|
this.webSocket.close();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
|
||||||
|
// 获取浏览器录音权限
|
||||||
|
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
||||||
|
navigator.mediaDevices.getUserMedia({
|
||||||
|
audio: true
|
||||||
|
}).then(stream => {
|
||||||
|
this.streamRef = stream;
|
||||||
|
getMediaSuccess();
|
||||||
|
}).catch(e => {
|
||||||
|
getMediaFail(e);
|
||||||
|
})
|
||||||
|
} else if (navigator.getUserMedia) {
|
||||||
|
navigator.getUserMedia({
|
||||||
|
audio: true
|
||||||
|
}, (stream) => {
|
||||||
|
this.streamRef = stream;
|
||||||
|
getMediaSuccess();
|
||||||
|
}, function (e) {
|
||||||
|
getMediaFail(e);
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
if (navigator.userAgent.toLowerCase().match(/chrome/) && location.origin.indexOf('https://') < 0) {
|
||||||
|
console.error('获取浏览器录音功能，因安全性问题，需要在localhost 或 127.0.0.1 或 https 下才能获取权限！');
|
||||||
|
} else {
|
||||||
|
alert('对不起：未识别到录音设备!');
|
||||||
|
}
|
||||||
|
this.audioContext && this.audioContext.close();
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
// 向webSocket发送数据(音频二进制数据经过Base64处理)
|
||||||
|
webSocketSend() {
|
||||||
|
if (this.webSocket.readyState !== 1) return false;
|
||||||
|
// 音频数据
|
||||||
|
const audioData = this.audioData.splice(0, 1280);
|
||||||
|
const params = {
|
||||||
|
common: {
|
||||||
|
app_id: this.appId,
|
||||||
|
},
|
||||||
|
business: {
|
||||||
|
language: this.language, //小语种可在控制台--语音听写（流式）--方言/语种处添加试用
|
||||||
|
domain: 'iat',
|
||||||
|
accent: this.accent, //中文方言可在控制台--语音听写（流式）--方言/语种处添加试用
|
||||||
|
vad_eos: 5000,
|
||||||
|
dwa: 'wpgs' //为使该功能生效，需到控制台开通动态修正功能（该功能免费）
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
status: 0,
|
||||||
|
format: 'audio/L16;rate=16000',
|
||||||
|
encoding: 'raw',
|
||||||
|
audio: this.toBase64(audioData)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 发送数据
|
||||||
|
this.webSocket.send(JSON.stringify(params));
|
||||||
|
this.handlerInterval = setInterval(() => {
|
||||||
|
// websocket未连接
|
||||||
|
if (this.webSocket.readyState !== 1) {
|
||||||
|
this.audioData = [];
|
||||||
|
clearInterval(this.handlerInterval);
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
if (this.audioData.length === 0) {
|
||||||
|
if (this.status === 'end') {
|
||||||
|
this.webSocket.send(
|
||||||
|
JSON.stringify({
|
||||||
|
data: {
|
||||||
|
status: 2,
|
||||||
|
format: 'audio/L16;rate=16000',
|
||||||
|
encoding: 'raw',
|
||||||
|
audio: ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
this.audioData = [];
|
||||||
|
clearInterval(this.handlerInterval);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
// 中间帧
|
||||||
|
this.webSocket.send(
|
||||||
|
JSON.stringify({
|
||||||
|
data: {
|
||||||
|
status: 1,
|
||||||
|
format: 'audio/L16;rate=16000',
|
||||||
|
encoding: 'raw',
|
||||||
|
audio: this.toBase64(this.audioData.splice(0, 1280))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}, 40);
|
||||||
|
};
|
||||||
|
// 识别结束 webSocket返回数据
|
||||||
|
webSocketRes(resultData) {
|
||||||
|
let jsonData = JSON.parse(resultData);
|
||||||
|
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.setResultText({
|
||||||
|
resultText: this.resultTextTemp
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 将结果存储在resultTextTemp中
|
||||||
|
this.setResultText({
|
||||||
|
resultTextTemp: this.resultText + str
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.setResultText({
|
||||||
|
resultText: this.resultText + str
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (jsonData.code === 0 && jsonData.data.status === 2) {
|
||||||
|
this.webSocket.close();
|
||||||
|
}
|
||||||
|
if (jsonData.code !== 0) {
|
||||||
|
this.webSocket.close();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 启动录音
|
||||||
|
recorderStart() {
|
||||||
|
if (!this.audioContext) {
|
||||||
|
this.recorderInit();
|
||||||
|
} else {
|
||||||
|
this.audioContext.resume();
|
||||||
|
this.connectWebSocket();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 停止录音
|
||||||
|
recorderStop() {
|
||||||
|
if (!(/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgen))) {
|
||||||
|
// safari下suspend后再次resume录音内容将是空白，设置safari下不做suspend
|
||||||
|
this.audioContext && this.audioContext.suspend();
|
||||||
|
}
|
||||||
|
this.setStatus('end');
|
||||||
|
try {
|
||||||
|
// this.streamRef.getTracks().map(track => track.stop()) || his.streamRef.getAudioTracks()[0].stop();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('暂停失败!');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 开始
|
||||||
|
start() {
|
||||||
|
this.recorderStart();
|
||||||
|
this.setResultText({ resultText: '', resultTextTemp: '' });
|
||||||
|
};
|
||||||
|
// 停止
|
||||||
|
stop() {
|
||||||
|
this.recorderStop();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}));
|
||||||
0
public/xun_voice/nginx.htaccess
Normal file
0
public/xun_voice/nginx.htaccess
Normal file
Loading…
x
Reference in New Issue
Block a user