vue3 + vite + 科大讯飞 实现语音测评 踩坑记录
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
在科大讯飞的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
},
}
这样就不会再报错了!
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 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)