在科大讯飞的js-demo中,并没有用到vue或者vite,我们实际开发时会遇到 let transWorker = new TransWorker() 这个代码报错的情况

import TransWorker from ‘js/transcode.worker.js’ 引入了webWorker文件,webWorker相当于js中的线程,在主线程中启动一个子线程不影响ui,,有关webworker内容如下:

参考:h5 web worker - HTML5 Web Workers | 菜鸟教程

IatRecorder .js文件里面const transWorker = new Worker() 报错,原因是vue里面不能直接使用原生的new Worker,也会跟webpack版本有关系.

参考:vue+科大讯飞语音听写功能(解决针对vue new Worker报错问题)

我们这边使用的是vite,所以不支持上面的webpack配置构建,在vite中也有关于webworker的配置项:vite官网webworker链接

在这里插入图片描述

在vite中不需要像webpack构建那样去配置vue.config.js文件,只需要改变webworker文件的引入方式:

// URL()内的第一个参数为 webworker文件的路径,第二个参数固定
const worker = new Worker(new URL('./worker.js', import.meta.url))

同时还需要把transcode.worker.js文件改为如下:

/*
 * transcode.worker.js
 * @Autor: lycheng
 * @Date: 2020-01-07 08:51:50
 */

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
	},
}

这样就不会再报错了!

GitHub 加速计划 / vu / vue
109
19
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐