Vue使用讯飞实时语音识别

​
进入讯飞官方文档实时语音识别通过下载示例demo,这里选择的是demo js.

创建项目并引入js文件

这里使用的是vue项目，便在public下的index.html直接引入了

<script src="./js/hmac-sha256.js"></script>
<script src="./js/HmacSHA1.js"></script>
<script src="./js/md5.js"></script>
<script src="./js/enc-base64-min.js"></script>
<script src="./js/index.umd.js"></script>

创建vue页面

其中的appId和secretKey需要在讯飞工作台中找到自己申请的进行替换。
其中mounted中所引用的js代表processor.worker.js所在文件地址。

 this.recorder = new RecorderManager("../js");

<template>
	<div>
		{
  {message}}
		<div>浏览器录音听写：<button @click.stop="startLuyin">{
  {btnTxt}}</button></div>
		<div>输出结果:{
  {resultText}}</div>
	</div>
</template>

<script>
	export default {
     
		name: 'App',
		data() {
     
			return {
     
				message: 'Hello Vue!',
				btnStatus:"UNDEFINED", // "UNDEFINED" "CONNECTING" "OPEN" "CLOSING" "CLOSED"
				recorder:null,
				resultText:'',
				resultTextTemp:'',
				countdownInterval:null,
				iatWS:null,
				btnTxt:'开始录音',
			};
		}