diff --git a/index.js b/index.js index 4ad2845..85eb260 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,5 @@ // (function () { - // // btnControl.onclick = function () { // // if (btnStatus === "UNDEFINED" || btnStatus === "CLOSED") { // // connectWebSocket(); @@ -11,197 +10,205 @@ // // }; // })(); -let btnStatus = "UNDEFINED"; // "UNDEFINED" "CONNECTING" "OPEN" "CLOSING" "CLOSED" +let btnStatus = 'UNDEFINED' // "UNDEFINED" "CONNECTING" "OPEN" "CLOSING" "CLOSED" - // const btnControl = document.getElementById("btn_control"); - const btnControl = {}; +// const btnControl = document.getElementById("btn_control"); +const btnControl = {} - const recorder = new RecorderManager("./dists"); - recorder.onStart = () => { - changeBtnStatus("OPEN"); - } - let iatWS; - let resultText = ""; - let resultTextTemp = ""; - let countdownInterval; +const recorder = new RecorderManager('./dists') +recorder.onStart = () => { + changeBtnStatus('OPEN') +} +let iatWS +let resultText = '' +let resultTextTemp = '' +let countdownInterval +window.winText = '' - /** +/** * 获取websocket url * 该接口需要后端提供,这里为了方便前端处理 */ - function getWebSocketUrl() { - // 请求地址根据语种不同变化 - var url = "wss://iat-api.xfyun.cn/v2/iat"; - var host = "iat-api.xfyun.cn"; - var apiKey = API_KEY; - var apiSecret = API_SECRET; - var date = new Date().toGMTString(); - var algorithm = "hmac-sha256"; - var headers = "host date request-line"; - var signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/iat HTTP/1.1`; - var signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret); - var signature = CryptoJS.enc.Base64.stringify(signatureSha); - var authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`; - var authorization = btoa(authorizationOrigin); - url = `${url}?authorization=${authorization}&date=${date}&host=${host}`; - return url; - } +function getWebSocketUrl() { + // 请求地址根据语种不同变化 + let url = 'wss://iat-api.xfyun.cn/v2/iat' + const host = 'iat-api.xfyun.cn' + const apiKey = API_KEY + const apiSecret = API_SECRET + const date = new Date().toGMTString() + const algorithm = 'hmac-sha256' + const headers = 'host date request-line' + const signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/iat HTTP/1.1` + const signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret) + const signature = CryptoJS.enc.Base64.stringify(signatureSha) + const authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"` + const authorization = btoa(authorizationOrigin) + url = `${url}?authorization=${authorization}&date=${date}&host=${host}` + return url +} - function toBase64(buffer) { - var binary = ""; - var bytes = new Uint8Array(buffer); - var len = bytes.byteLength; - for (var i = 0; i < len; i++) { - binary += String.fromCharCode(bytes[i]); +function toBase64(buffer) { + let binary = '' + const bytes = new Uint8Array(buffer) + const len = bytes.byteLength + for (let i = 0; i < len; i++) + binary += String.fromCharCode(bytes[i]) + + return window.btoa(binary) +} + +function countdown() { + let seconds = 60 + btnControl.innerText = `录音中(${seconds}s)` + countdownInterval = setInterval(() => { + seconds = seconds - 1 + if (seconds <= 0) { + clearInterval(countdownInterval) + recorder.stop() } - return window.btoa(binary); - } + else { + btnControl.innerText = `录音中(${seconds}s)` + } + }, 1000) +} - function countdown() { - let seconds = 60; - btnControl.innerText = `录音中(${seconds}s)`; - countdownInterval = setInterval(() => { - seconds = seconds - 1; - if (seconds <= 0) { - clearInterval(countdownInterval); - recorder.stop(); - } else { - btnControl.innerText = `录音中(${seconds}s)`; +function changeBtnStatus(status) { + btnStatus = status + if (status === 'CONNECTING') { + btnControl.innerText = '建立连接中' + document.getElementById('result').innerText = '' + resultText = '' + resultTextTemp = '' + } + else if (status === 'OPEN') { + countdown() + } + else if (status === 'CLOSING') { + btnControl.innerText = '关闭连接中' + } + else if (status === 'CLOSED') { + btnControl.innerText = '开始录音' + } +} + +function renderResult(resultData) { + // 识别结束 + const jsonData = JSON.parse(resultData) + if (jsonData.data && jsonData.data.result) { + const data = jsonData.data.result + let str = '' + const 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 + resultText = resultTextTemp } - }, 1000); + // 将结果存储在resultTextTemp中 + resultTextTemp = resultText + str + } + else { + resultText = resultText + str + } + document.getElementById('result').innerText + = resultTextTemp || resultText || '' + console.log('录音结果:', resultTextTemp || resultText || '') + window.winText = resultTextTemp || resultText || '' + window.dispatchEvent(new Event('test')) } + if (jsonData.code === 0 && jsonData.data.status === 2) + iatWS.close() - function changeBtnStatus(status) { - btnStatus = status; - if (status === "CONNECTING") { - btnControl.innerText = "建立连接中"; - document.getElementById("result").innerText = ""; - resultText = ""; - resultTextTemp = ""; - } else if (status === "OPEN") { - countdown(); - } else if (status === "CLOSING") { - btnControl.innerText = "关闭连接中"; - } else if (status === "CLOSED") { - btnControl.innerText = "开始录音"; - } + if (jsonData.code !== 0) { + iatWS.close() + console.error(jsonData) } +} - function renderResult(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 - resultText = resultTextTemp; - } - // 将结果存储在resultTextTemp中 - resultTextTemp = resultText + str; - } else { - resultText = resultText + str; - } - document.getElementById("result").innerText = - resultTextTemp || resultText || ""; - console.log(resultTextTemp); - } - if (jsonData.code === 0 && jsonData.data.status === 2) { - iatWS.close(); - } - if (jsonData.code !== 0) { - iatWS.close(); - console.error(jsonData); - } +function connectWebSocket() { + const websocketUrl = getWebSocketUrl() + if ('WebSocket' in window) { + iatWS = new WebSocket(websocketUrl) } - - function connectWebSocket() { - const websocketUrl = getWebSocketUrl(); - if ("WebSocket" in window) { - iatWS = new WebSocket(websocketUrl); - } else if ("MozWebSocket" in window) { - iatWS = new MozWebSocket(websocketUrl); - } else { - alert("浏览器不支持WebSocket"); - return; + else if ('MozWebSocket' in window) { + iatWS = new MozWebSocket(websocketUrl) + } + else { + alert('浏览器不支持WebSocket') + return + } + changeBtnStatus('CONNECTING') + iatWS.onopen = (e) => { + // 开始录音 + recorder.start({ + sampleRate: 16000, + frameSize: 1280, + }) + const params = { + common: { + app_id: APPID, + }, + business: { + language: 'zh_cn', + domain: 'iat', + accent: 'mandarin', + vad_eos: 5000, + dwa: 'wpgs', + }, + data: { + status: 0, + format: 'audio/L16;rate=16000', + encoding: 'raw', + }, } - changeBtnStatus("CONNECTING"); - iatWS.onopen = (e) => { - // 开始录音 - recorder.start({ - sampleRate: 16000, - frameSize: 1280, - }); - var params = { - common: { - app_id: APPID, - }, - business: { - language: "zh_cn", - domain: "iat", - accent: "mandarin", - vad_eos: 5000, - dwa: "wpgs", - }, + iatWS.send(JSON.stringify(params)) + } + iatWS.onmessage = (e) => { + renderResult(e.data) + } + iatWS.onerror = (e) => { + console.error(e) + recorder.stop() + changeBtnStatus('CLOSED') + } + iatWS.onclose = (e) => { + recorder.stop() + changeBtnStatus('CLOSED') + } +} + +recorder.onFrameRecorded = ({ isLastFrame, frameBuffer }) => { + if (iatWS.readyState === iatWS.OPEN) { + iatWS.send( + JSON.stringify({ data: { - status: 0, - format: "audio/L16;rate=16000", - encoding: "raw", + status: isLastFrame ? 2 : 1, + format: 'audio/L16;rate=16000', + encoding: 'raw', + audio: toBase64(frameBuffer), }, - }; - iatWS.send(JSON.stringify(params)); - }; - iatWS.onmessage = (e) => { - renderResult(e.data); - }; - iatWS.onerror = (e) => { - console.error(e); - recorder.stop(); - changeBtnStatus("CLOSED"); - }; - iatWS.onclose = (e) => { - recorder.stop(); - changeBtnStatus("CLOSED"); - }; + }), + ) + if (isLastFrame) + changeBtnStatus('CLOSING') } - - recorder.onFrameRecorded = ({ isLastFrame, frameBuffer }) => { - if (iatWS.readyState === iatWS.OPEN) { - iatWS.send( - JSON.stringify({ - data: { - status: isLastFrame ? 2 : 1, - format: "audio/L16;rate=16000", - encoding: "raw", - audio: toBase64(frameBuffer), - }, - }) - ); - if (isLastFrame) { - changeBtnStatus("CLOSING"); - } - } - }; - recorder.onStop = () => { - clearInterval(countdownInterval); - }; - function RecordXunfei(){ - if (btnStatus === "UNDEFINED" || btnStatus === "CLOSED") { - console.log('开始录音'); - connectWebSocket(); - } else if (btnStatus === "CONNECTING" || btnStatus === "OPEN") { - console.log('结束录音'); - - // 结束录音 - recorder.stop(); - } - } - - +} +recorder.onStop = () => { + clearInterval(countdownInterval) +} +function RecordXunfei() { + if (btnStatus === 'UNDEFINED' || btnStatus === 'CLOSED') { + console.log('开始录音') + connectWebSocket() + } + else if (btnStatus === 'CONNECTING' || btnStatus === 'OPEN') { + console.log('结束录音') + // 结束录音 + recorder.stop() + } + return window.winText +} diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue index bf9a92e..a73fd52 100644 --- a/src/views/chat/index.vue +++ b/src/views/chat/index.vue @@ -1,6 +1,6 @@ @@ -619,7 +615,7 @@ const recordFailed = (error) => {
-
+