Requirements description: Realize a click to record English sentence reading, and then call the HKUST Xunfei interface to analyze the reading accuracy, and analyze the reading accuracy word by word.
Step 1. Download and run the demo
First attach the document link of iFLYTEK Voice Evaluation Streaming Version: link here
and then find the demo download in the document, as shown in the figure:
This is a native html project. We use the environment to open it, use cnpm to install dependencies and run them. The steps here are hidden in the README. You can directly read and copy the running commands: the above is the directory structure of the project. After installing the dependencies, follow
them Just run the defined command. The running screen is like this:
Step 2. Register to get appid
After running, the interface cannot be called directly, because we need to register and log in on the Xunfei open platform and create an application, then get the three data of appid, apisecret, and apikey, and then fill it in the index.js in the demo, save it and start again Click to start recognition, and it can be used. The free version can call the interface 500 times a day, which is enough for testing.
This is the result of the analysis done
Step 3. Import into your own VUE project
The demo is a package management tool that uses webpack. If we want to connect to vue, then we will go on:
first, we roughly estimate which are the important tools, as shown in the figure:
the red box circles the files we need to use, in fact It’s all the content. It doesn’t matter whether the two pages deleted by the red line and the style file are left or not. Anyway, we must use our own style page. The most important thing is the index.js file, which directly writes the opening of the long link, the call of the recording permission, the monitoring of the request status, etc. This file is very important.
We delete all the content with layout id in index.js, for example:
Of course, there are also some other layout-related ones, so go find it yourself. Let’s look at the call after deleting it. The most important thing to call is two monitoring events, one is long link status monitoring, and the other is obtaining analysis result monitoring. The code looks like this:
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))
}
This is calling and monitoring. We put these two monitoring events into the mounted of our vue component, and let him automatically create the monitoring and implement the event operation.
Then we make a button and call this.iseRecorder.start()this sentence after clicking to realize recording. When the recording state changes, we can get the state in the monitoring event to operate our interface (icon switching, progress bar display, countdown, etc.)
Notice! ! ! Add dependencies and configure workers
There will be a problem with the call here, that is, there is such a sentence in index.js: let transWorker = new TransWorker(), this sentence will report an error,
_IMPORTED_MODULE_50___default.a is not a constructor
at eval (index.js:19:1)
The error content says that this is not A constructor cannot be new. We went into the transcode.worker.js file and
found that it is indeed not a class. An object called transAudioData, and use it as a handler for the Web Worker. The Web Worker calls the onmessage function when processing an incoming message, so this function is specified as the value of self.onmessage. The transAudioData object then has a transcode method , used to perform audio transcoding. When this method is called, it transcodes the input audio data and sends the output data back to the main thread using the postMessage method.)
It’s good to understand the above paragraph, let’s go on to solve the problem, why can we directly new in the demo, but we can’t, because there is one less configuration:
First, we add it to the dependencies (you may still lack other dependencies in your project, just import them according to the error report)
"crypto-js": "^4.0.0",
"fast-xml-parser": "^3.17.4",
"crypto-js": "^4.0.0",
"copy-webpack-plugin": "^5.1.1",
Add at the top of the vue.config.js file:
const CopyWebpackPlugin = require('copy-webpack-plugin');
Then add the following content under configureWebpack in vue.config.js (note that the writing of the path here is different from that of the demo, and the recording data cannot be transmitted if the writing is wrong):
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'
}])
],
Explain this part of the configuration content, which is related to audio recording. If it is not configured, the recorded audio data cannot be obtained.
Then stop on the console command line terminal ctrl+C, and then re-run the project to take effect. This problem is very critical. If no one gives instructions, it will be stuck for a long time. Then we can follow the above steps and continue to call in the vue
component up. At this point, the data can be returned successfully. The data is shown in the figure. As for parsing the json data, you can handle it by yourself. The students who can see here definitely don’t need me to point out how to analyze the json data. If you get the data, you can do whatever you want.
Ending, Scoring Parameters
By the way, the parameters for scoring and analyzing the correctness of words are available in the document. The official document is here , including each word also has a score, but there is a special parameter for the correctness of the word. Let me tell you the secret: , serr_msgyou Just search for the parameter name in the data. If this parameter is equal to 0, it means it is correct, and 1 means it is wrong. Other values are officially used to test new values and can be ignored. Handle them as errors.
epilogue
It's over here. Although it's a bit messy, it's still very detailed. I hope you can understand it hahaha. If you don't understand or haven't realized it, you can ask questions in the comment area. I know everything. The main thing is to make a record for yourself, in case you forget it when you use it next time, bye~~