讯飞语音听写（流式版）开发指南

语音交互大模型的功能越来越受到重视。讯飞语音听写（流式版）为开发者提供了一种高效、准确的语音识别解决方案。本文将基于 Home.vue、iat_xfyun.js 和 sparkChat.js 这三个文档，详细阐述讯飞语音听写（流式版）的开发逻辑、涉及的代码，并提供开发说明、文件结构和分析。

开发说明

页面示例

功能概述

讯飞语音听写（流式版）允许用户通过麦克风输入语音，实时将语音转换为文字。在本项目中，该功能主要应用于聊天界面，用户可以通过语音输入问题，系统将语音转换为文字后发送给后端进行处理。

环境配置

• 开发环境：Vue.js 3.x、Vite
• 依赖库：@muguilin/xf-voice-dictation 用于实现讯飞语音听写功能

配置步骤

1. 安装依赖：在项目根目录下执行以下命令安装 @muguilin/xf-voice-dictation。

npm install @muguilin/xf-voice-dictation

2. 配置讯飞 API 信息：在 iat_xfyun.js 文件中，配置讯飞语音听写的 API 信息，包括 APPID、APIKey 和 APISecret。

// 讯飞语音识别配置
const xfConfig = {
    APPID: '6acb09d5',
    APIKey: '36fb21a7095db0bb***',
    APISecret: 'MmNhN2VkY2JkMj****',
    host: 'iat-api.xfyun.cn',
    path: '/v2/iat'
}

文件结构

主要文件

• Home.vue：聊天界面组件，包含语音输入按钮和语音识别结果显示区域。
• iat_xfyun.js：封装讯飞语音听写功能的工具文件，提供创建语音识别实例的工厂函数。
• sparkChat.js：与后端进行 WebSocket 通信的工具文件，负责将语音识别结果发送给后端。

文件关系

Home.vue 组件引入 iat_xfyun.js 中创建的语音识别实例，当用户点击语音输入按钮时，调用语音识别实例的 start 方法开始录音。识别结果通过 onTextChange 回调函数返回，将结果显示在界面上，并通过 sparkChat.js 发送给后端。

开发逻辑

1. 创建语音识别实例

在 iat_xfyun.js 文件中，创建一个工厂函数 createVoiceInstance，用于创建语音识别实例。该函数接受一个回调对象作为参数，包含 onStatusChange、onTextChange 和 onError 三个回调函数。

文件 iat_xfyun.js

import {
    XfVoiceDictation } from '@muguilin/xf-voice-dictation'

// 讯飞语音识别配置
const xfConfig = {
   
    APPID: '6acb09d5',
    APIKey: '36fb21a7095db0bb***',
    APISecret: 'MmNhN2VkY2JkMj****',
    host: 'iat-api.xfyun.cn',
    path: '/v2/iat'
}

// 创建语音识别实例的工厂函数
export const createVoiceIn