html5页面融合科大讯飞语音识别

如何在html5页面中融合科大讯飞语音识别功能。

一、科大讯飞语音识别demo：

1. 登录科大讯飞网站：讯飞开放平台-以语音交互为核心的人工智能开放平台 (xfyun.cn)；
2. 产品服务 -> 语音识别 -> 语音听写 -> 技术文档（WebAPI文档） -> 调用示例 -> 语音听写流式API demo js语音；
3. 在demo中填写APPID、APISecret、APIKey，可到控制台-我的应用-语音听写（流式版）页面获取；
4. 打开cmd，进入demo目录，执行如下命令。

 npm install -g cnpm --registry=https://registry.npm.taobao.org
 cnpm install
 npm run dev 

二、融合项目

1. 先将科大讯飞demo的package.json中的安装依赖都复制过来，与原项目重复的删除；
2. 将demo中src文件夹下面的js、html和css拷贝至所在项目相应的文件中；
3. 原项目虽然是用vue技术栈写的，但要访问的文件在static文件夹下面，该文件夹下全是静态html，webpack打包的时候不会打包static下的文件，所以科大讯飞demo中的有些写法在融合项目中需要更改一下；
4. import TransWorker from './transcode.worker.js' 这种写法报错如下：

需要改为如下形式：

let TransWorker = function () {
  return new Worker('./transcode.worker.js')
}

如果不加 new Worker会出现如下报错：

查了Web Worker相关资料，new Worker()一般用于线程的处理，防止页面卡死，提高用户体验。

至此，html5页面与科大讯飞语音识别成功融合完毕。