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

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

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

步骤一、下载运行demo

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

这是一个原生的html项目,我们使用环境打开,使用cnpm安装依赖并运行,这里的步骤藏在README中,可以直接看并复制运行命令:
科大讯飞语音评测demo目录结构
科大讯飞语音评测demo目录结构
以上就是项目的目录结构了,安装好依赖以后按照他定义的命令来运行即可。运行出来的画面是这样的:
在这里插入图片描述

步骤二、注册获取appid

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

key
这是分析完成的结果
在这里插入图片描述

步骤三、引入自己的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))
}

这就是调用并监听,我们把这两个监听事件放到我们的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",

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

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

然后在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'
            }])
        ],

在这里插入图片描述

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

然后在控制台命令行终端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舒服多了

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

  • 4
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
科大讯飞语音是基于vue版本的语音识别语音合成的开源项目。它结合了科大讯飞语音识别语音合成技术,提供了一种简单易用的方式来实现语音交互功能。使用vue版本的科大讯飞语音,我们可以轻松地将语音识别语音合成功能集成到我们的vue应用程序Vue版本的科大讯飞语音具有以下特点。首先,它提供了灵活的配置选项,可以根据我们的需求来配置语音识别语音合成的参数,如录音设备、语种、语速等。其次,它具有良好的兼容性,可以在不同的浏览器和设备上正常运行。另外,它还支持多语种的语音识别语音合成,使得我们可以实现更多种类的语音交互。 使用vue版本的科大讯飞语音,我们可以快速地实现语音输入和输出的功能。对于语音输入,用户可以通过麦克风录入语音科大讯飞语音可以将语音转换为文字,并传递给应用程序进行相应的处理。对于语音输出,应用程序可以向科大讯飞语音发送文字,科大讯飞语音可以将文字转换为语音,并通过扬声器输出给用户。 总之,vue版本的科大讯飞语音为我们提供了一种简单、高效的方式来实现语音交互功能。无论是实现语音输入还是语音输出,它都能帮助我们快速地集成语音识别语音合成的功能。因此,它在语音交互应用领域有着广泛的应用前景。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值