安装 worker-loader版本是2.0.0
vue.config.js的配置如下
chainWebpack:(config)=>{config.output.globalObject("this");
},
configureWebpack: (config) => {config.module.rules.push({test: /\.worker.js$/,use: {loader: "worker-loader",options: { inline: true, name: "workerName.[hash].js" },},});
}
transcode.worker.js文件
// (function(){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 * springFactorvar before = Math.floor(tmp).toFixed()var after = Math.ceil(tmp).toFixed()var atPoint = tmp - beforenewData[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 = 0for (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},}
// })()
crypto-js如有需要安装
IatRecorder.js
import CryptoJS from "crypto-js";
import TransWorker from "@/components/speechRecognition/transcode.worker";
import { getWebsocket } from "@/api/websocket/websocket";
let transWorker = new TransWorker();
//APPID,APISecret,APIKey在控制台-我的应用-语音听写(流式版)页面获取const APPID = " "const API_SECRET = " "const API_KEY = " "/*** 获取websocket url* 该接口需要后端提供,这里为了方便前端处理*/
function getWebSocketUrl() {return new Promise((resolve, reject) => {// 请求地址根据语种不同变化getWebsocket().then((res) => {resolve(res.data.data.url);});});
}
export default class IatRecorder {constructor({ language, accent, appId } = {}) {let self = this;this.status = "null";this.language = language || "zh_cn";this.accent = accent || "mandarin";this.appId = appId || APPID;// 记录音频数据this.audioData = [];// 记录听写结果this.resultText = "";// wpgs下的听写结果需要中间状态辅助记录this.resultTextTemp = "";transWorker.onmessage = function (event) {self.audioData.push(...event.data);};}// 修改录音听写状态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);}// 连接websocketconnectWebSocket() {return 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;}this.webSocket = iatWS;this.setStatus("init");iatWS.onopen = (e) => {this.setStatus("ing");// 重新开始录音setTimeout(() => {this.webSocketSend();}, 500);};iatWS.onmessage = (e) => {this.result(e.data);};iatWS.onerror = (e) => {this.recorderStop();};iatWS.onclose = (e) => {this.recorderStop();};});}// 初始化浏览器录音recorderInit() {navigator.getUserMedia =navigator.getUserMedia ||navigator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.msGetUserMedia;// 创建音频环境try {this.audioContext = new (window.AudioContext ||window.webkitAudioContext)();this.audioContext.resume();if (!this.audioContext) {alert("浏览器不支持webAudioApi相关接口");return;}} catch (e) {if (!this.audioContext) {