web接入科大讯飞实时语音转写模块

简介

该模块提供了与科大讯飞语音识别API的集成，实现实时语音转写功能。通过WebSocket连接，将麦克风采集的音频数据发送至科大讯飞服务器，并接收返回的识别结果。

安装

复制代码

npm install kdxf-web

基本用法

javascript 复制代码

import createIatRecorder from 'kdxf-web';
const config = {
    hostUrl: "wss://iat-api.xfyun.cn/v2/iat",
    host: "iat-api.xfyun.cn",
    appid: "", // 填写您的科大讯飞应用ID
    apiSecret: "", // 填写您的科大讯飞API密钥
    apiKey: "", // 填写您的科大讯飞API密钥
    uri: "/v2/iat"
};
const iatRecorder = createIatRecorder(config);

// 设置文本变化回调
iatRecorder.onTextChange = (text) => {
  console.log('当前识别文本:', text);
};

// 设置识别完成回调
iatRecorder.onRecognitionComplete = (text) => {
  console.log('识别完成:', text);
};

// 设置状态变化回调
iatRecorder.onWillStatusChange = (oldStatus, newStatus) => {
  console.log(`状态从 ${oldStatus} 变为 ${newStatus}`);
};

// 开始录音并识别
document.getElementById('startBtn').onclick = () => {
  iatRecorder.start();
};

// 停止录音
document.getElementById('stopBtn').onclick = () => {
  iatRecorder.stop();
};

API 参考

主要方法

方法	描述
`start()`	开始录音并进行语音识别
`stop()`	停止录音，等待最终识别结果
`recorderStop()`	完全停止录音并释放所有资源

回调函数

回调	描述
`onTextChange`	当识别文本变化时触发
`onRecognitionComplete`	当语音识别完成时触发
`onWillStatusChange`	当状态即将改变时触发

状态值

录音器有以下几种状态：

null: 未开始录音
ing: 录音中
end: 录音结束

配置参数说明

参数	类型	描述
`hostUrl`	String	WebSocket服务地址
`host`	String	主机名
`appid`	String	科大讯飞应用ID
`apiSecret`	String	科大讯飞API密钥
`apiKey`	String	科大讯飞API密钥
`uri`	String	API路径

工作原理

初始化录音设备和WebSocket连接
采集用户麦克风的音频数据
对音频数据进行必要的预处理（重采样到16kHz）
通过WebSocket发送音频数据到科大讯飞服务器
接收并处理服务器返回的识别结果
触发相应回调函数通知应用程序

注意事项

使用前需要在科大讯飞开放平台注册并创建应用，获取相应的appid、apiKey和apiSecret
确保用户允许浏览器访问麦克风，否则将无法进行录音
该模块依赖Web Audio API和WebSocket API，确保使用的浏览器支持这些功能
每次使用完毕后应调用recorderStop()方法释放资源
默认最大录音时间为60秒，超时将自动停止

示例项目

完整示例代码：

ini 复制代码

<template>
  <div class="speech-recognition">
    <h3>科大讯飞语音识别</h3>
    
    <div class="buttons">
      <button @click="startRecording" :disabled="isRecording">开始录音</button>
      <button @click="stopRecording" :disabled="!isRecording">停止录音</button>
    </div>
    
    <div class="status">当前状态：{{ status }}</div>
    
    <div class="result">
      <p>{{ result || '等待识别结果...' }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import createIatRecorder from 'kdxf-web';

// 状态变量
const result = ref('');
const status = ref('准备就绪');
const isRecording = ref(false);
const recorder = ref(null);

// 初始化语音识别器
onMounted(() => {
  const config = {
    hostUrl: "wss://iat-api.xfyun.cn/v2/iat",
    host: "iat-api.xfyun.cn",
    appid: "您的应用ID",
    apiSecret: "您的API密钥",
    apiKey: "您的API密钥",
    uri: "/v2/iat"
  };
  
  recorder.value = createIatRecorder(config);
  
  // 设置回调函数
  recorder.value.onTextChange = (text) => {
    result.value = text;
  };
  
  recorder.value.onWillStatusChange = (oldStatus, newStatus) => {
    if (newStatus === 'ing') {
      status.value = '录音中...';
      isRecording.value = true;
    } else if (newStatus === 'end') {
      status.value = '处理中...';
    } else if (newStatus === 'null') {
      status.value = '准备就绪';
      isRecording.value = false;
    }
  };
  
  recorder.value.onRecognitionComplete = (text) => {
    result.value = text;
    status.value = '识别完成';
    isRecording.value = false;
  };
});

// 开始录音
const startRecording = async () => {
  if (recorder.value) {
    result.value = '';
    await recorder.value.start();
  }
};

// 停止录音
const stopRecording = () => {
  if (recorder.value) {
    recorder.value.stop();
  }
};

// 组件销毁时释放资源
onUnmounted(() => {
  if (recorder.value) {
    recorder.value.recorderStop();
  }
});
</script>

<style scoped>
.speech-recognition {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.buttons {
  margin: 20px 0;
}

button {
  padding: 8px 16px;
  margin: 0 8px;
  cursor: pointer;
}

.result {
  margin-top: 20px;
  min-height: 100px;
  padding: 10px;
  text-align: left;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.status {
  font-size: 14px;
  color: #666;
}
</style>

高级配置

除了基本配置外，还可以设置语言、方言等参数：

ini 复制代码

// 设置为英语识别
iatRecorder.language = 'en_us';

// 设置方言（普通话、粤语等）
iatRecorder.accent = 'cantonese';

更多信息请参考科大讯飞开放平台文档。