保姆级教程：js前端接入科大讯飞语音评测，实现朗读打分，vue对接科大讯飞语音评测，还可以实现句子逐词分析对错以及打分，将demo接入vue项目中_科大讯飞语音识别vue

（更新：已弃坑讯飞的js端语音测评，原因放在文末说，对讯飞js情有独钟的可以接着看，明确说一点，讯飞的方案不适用于uniapp的客户端，小程序和h5可以用，原因也放在文末。）

需求说明：实现一个点击录制英文句子朗读，然后调用科大讯飞接口分析朗读准确度，并逐词分析朗读正确性。

步骤一、下载运行demo

首先附上科大讯飞语音评测流式版的文档链接：链接在此
然后在文档里找到demo下载，如图：

这是一个原生的html项目，我们使用环境打开，使用cnpm安装依赖并运行，这里的步骤藏在README中，可以直接看并复制运行命令：


以上就是项目的目录结构了，安装好依赖以后按照他定义的命令来运行即可。运行出来的画面是这样的：

步骤二、注册获取appid

运行起来以后还不能直接调用接口，因为我们需要在讯飞开放平台注册登录并创建应用，然后拿到appid，apisecret，apikey这3个数据，然后填到demo中的index.js中去，保存再来操作点击开始识别，就可以用了，免费版的每天可以调用500次接口，测试够用了。

这是分析完成的结果

步骤三、引入自己的VUE项目中

demo是使用webpack的包管理工具，如果我们要接入vue，那我们接着往下走：
首先我们大概估计哪些是重要的工具，如图：

红框圈起来的是我们需要用到的文件，其实已经是全部的内容了，红线删除的两个页面和样式文件留不留都无所谓，反正我们肯定要用我们自己的样式页面。最最重要的就是index.js文件了，这里直接写了长链接的开启、录音权限的调用、请求状态的监听等等，这个文件很重要，

我们把index.js里面的所有带有布局id的内容都删掉，比如：

当然还有其他的一些布局相关的也删掉，自己去找一下吧。删掉以后看调用吧，调用最重要的就是两个监听事件，一个是长链接状态监听，一个是获取分析结果监听，代码长这样：

let iseRecorder = new IseRecorder()
let countInterval
// 状态改变时触发
iseRecorder.onWillStatusChange = function(oldStatus, status) {
  // 可以在这里进行页面中一些交互逻辑处理：倒计时（语音评测支持180s）,录音的动画，按钮交互等
}

// 监听识别结果的变化
iseRecorder.onTextChange = function(grade) {
  console.log('iseRecorder.onTextChange==>',grade)
  console.log(JSON.stringify(grade))
}
1
2
3
4
5
6
7
8
9
10
11
12
13

这就是调用并监听，我们把这两个监听事件放到我们的vue组件的mounted中，让他自动创建监听并实现事件的操作。

然后我们搞一个按钮，点击以后调用this.iseRecorder.start()这句来实现录制，当录制状态发生改变的时候，我们可以在监听事件中获取到状态来对我们的界面进行操作（图标切换、进度条展示、倒计时等）

注意！！！ 添加依赖并配置worker

这里调用会出一个问题，那就是在index.js里有这么一句：let transWorker = new TransWorker()，这句话会报一个错，
_IMPORTED_MODULE_50___default.a is not a constructor
at eval (index.js:19:1)
错误内容说这里不是一个构造器，不能new，我们进到transcode.worker.js这个文件里看下

发现确实也不是一个类，（大致解释一下：是使用立即调用函数表达式（Immediately-invoked function expression，IIFE）来创建一个名为transAudioData的对象，并将其作为Web Worker的处理程序。Web Worker在处理传入消息时会调用onmessage函数，因此该函数被指定为self.onmessage的值。然后，transAudioData对象具有一个transcode方法，用于执行音频转码。当此方法被调用时，它将输入的音频数据进行转码，并使用postMessage方法将输出数据发送回主线程。）

上面这段文字了解就好了，咱们接着解决问题，为什么demo中就可以直接new，而我们不行呢，是因为少一个配置：

首先我们在依赖中添加（你的项目中可能还缺少其中的别的依赖，根据报错去引入即可）

"crypto-js": "^4.0.0",
"fast-xml-parser": "^3.17.4",
"crypto-js": "^4.0.0",
"copy-webpack-plugin": "^5.1.1",
1
2
3
4

在vue.config.js文件顶部添加：

const CopyWebpackPlugin = require('copy-webpack-plugin');
1

然后在vue.config.js中的configureWebpack下添加以下内容（注意这里的路径的写法和demo有区别哦，写法不对是无法传输录音数据的呦）：

		module: {
            rules: [
                {
                    test: /\.worker\.js$/,
                    use: { loader: 'worker-loader' }
                }
            ]
        },
        plugins: [
            new CopyWebpackPlugin([{
                from: './src/audiorecord/pages/doc/readme.md',
                to: './data/doc.readme.md'
            }, {
                from: './src/audiorecord/pages/doc/transcode.js',
                to: './data/transcode.js'
            }, {
                from: './src/audiorecord/pages/doc/websocket.js',
                to: './data/websocket.js'
            }])
        ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

解释一下这部分配置内容，就是音频录制相关的内容，如果不配置的话，就无法获取录制的音频数据。

然后在控制台命令行终端ctrl+C停止，然后重新运行项目，就可以生效了，这个问题很关键，没有人指点的话会卡很久，
然后我们就可以接着上面的步骤，在vue组件中继续调用了。至此可以成功返回数据了。数据如图，至于解析json数据，自己去处理吧，能看到这儿的同学肯定不用我来指点怎么去分析json数据吧，数据拿到了，那不就想怎么处理就怎么处理喽。

结尾、打分参数

对了，打分和分析单词对错的参数，文档里都有，官方文档在此，包括每个单词也有分数，但是单词的对错有一个专门的参数，我把这个秘密告诉你吧：serr_msg，你去数据里搜索这个参数名就可以，这个参数等于0代表正确，1代表错误，其他的值是官方用来测试新值的，可以忽略不计，都按照错误处理吧。

结语

到这里就完了，虽然乱了一些，但是总归很详细，希望你能看明白哈哈哈，不明白的或者没实现的可以评论区提问，我知无不言。主要是给自己做个记录，以防下次再用就忘记了，拜拜~~

巨坑

已弃坑讯飞js语音测评，原因有如下几点：
1、讯飞全面放弃了http方式的请求转用ws方式，加大了接入难度不说，他美其名曰是拥有更多功能，但是你可以两个都保留，为何要停用http呢，因为对于基础的词句打分功能，音频不会太大，http也完全不会影响性能和速度，最主要的是方便开发者接入，这整得就很让人难受，
2、还有就是，你响应参数给好一点呗，你起码给个json吧，文档上说近期会推出json格式，实际上好几年前就这么说了，一直是xml，这样巨量代码的实现方案，大动干戈用着websocket分片上传，真的好吗？
3、最近在研究uniapp，这一点不能全怪讯飞，但是也是因为讯飞而起吧，uniapp在安卓端和ios端不支持分片上传，这就没法获取音频帧，就没法按照讯飞要求的那样一帧一帧上传，但是项目进行到一半，再去原生开发也不合适（顺道吐槽一下uniapp真坑）。

4、之前想过云知声接入uniapp，但是发现uniapp不能随便传formdata，而且录音不能设置声道（云知声只支持单声道），后来我发现，好像大多评测方案都是单声道，所以要是涉及硬件内容过多（比如录音、拍摄等）的项目尽早弃坑uniapp。

5、h5实现建议方案，就是嵌套app，壳子，通过js和java桥来互相调用，这样可以使用原生客户端的录音功能，但是逻辑还是h5来写，这样就很舒服。我另外一个帖子介绍了安卓调用讯飞sdk，非常输入，比js舒服多了

如果你看到这里了，烦请给我留个言让我知道这个世界不是我一个人，谢谢。