前端实现语音转文字，零基础入门到精通，收藏这篇就够了

原创于 2025-12-23 09:38:08 发布 · 165 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习 #笔记

计算机同时被 3 个专栏收录

1938 篇文章

订阅专栏

程序员

1937 篇文章

订阅专栏

前端

112 篇文章

订阅专栏

在当今AI技术飞速发展的时代，语音识别技术已经成为人机交互的重要方式之一。本文将详细介绍如何基于WebSocket协议实现一个实时语音转文字的前端应用，该应用能够将用户的语音实时转换为文字显示在文本框中，并支持短语音识别和手动停止功能。

一、技术架构概述

本实现主要采用了以下核心技术：

WebSocket协议：用于建立客户端与语音识别服务器之间的全双工通信通道
Recorder.js：前端录音库，用于捕获用户的语音输入
科大讯飞开放平台：提供语音识别(IAT)的API服务
Vue.js框架：前端MVVM框架，用于构建用户界面
Element UI：提供美观的UI组件

整个技术栈构成了一个完整的前端语音识别解决方案，实现了从语音采集、实时传输到文字转换的全流程。

二、核心代码解析

2.1 前端界面设计

界面设计简洁明了，主要包含以下几个部分：

<template>
  <div class="Iat-container" style="padding: 10px;margin-bottom:50px;">
    <!-- 聊天窗口开始 -->
    <div style="height: 150px;">
      <textarea v-model="text" 
                placeholder="请点击短语音文字并朗读，会把实时说话语音转成文字"
                style="height: 460px;width: 100%;padding: 20px; border: none;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;outline: none">
      </textarea>
    </div>
    <div style="text-align: left;padding-right: 10px;margin-top: 340px;">
      <el-button type="primary" size="medium" @click="voiceSend">
        <i class="el-icon-microphone"></i>短语音文字
      </el-button>
      <el-button type="danger" size="medium" @click="stopVoice">
        停止朗读
      </el-button>
    </div>
  </div>
</template>

textarea：用于显示实时转换的文字结果
两个按钮：分别用于开始录音和停止录音
样式设计采用简洁风格，突出核心功能

2.2 录音功能实现

录音功能使用Recorder.js库实现，这是一个强大的前端录音解决方案：

import Recorder from '../../public/recorder/index.umd.js'

// 初始化录音工具
let recorder = new Recorder("../../recorder")
recorder.onStart = () => {
  console.log("开始录音了")
}
recorder.onStop = () => {
  console.log("结束录音了")
}

录音的核心配置包括采样率和帧大小：

javascript

复制

下载

recorder.start({
  sampleRate: 16000,  // 采样率16kHz
  frameSize: 1280,    // 帧大小
});

这里选择16kHz采样率是因为它在语音识别中既能保证识别质量，又能减少数据量。帧大小设置为1280字节，这是一个经验值，可以在实时性和性能之间取得平衡。

2.3 WebSocket连接管理

与语音识别服务器的通信通过WebSocket实现：

wsTask = new WebSocket(reqeustUrl);

// WebSocket事件处理
wsTask.onopen = function() {
  console.log('ws已经打开...')
  wsFlag = true
  // 发送第一帧数据...
}

wsTask.onmessage = function(message) {
  // 处理服务器返回的识别结果...
}

wsTask.onclose = function() {
  console.log('ws已关闭...')
}

wsTask.onerror = function() {
  console.log('发生错误...')
}

WebSocket连接建立后，需要按照协议发送不同状态的数据帧：

第0帧：初始化参数，包含appid、语言配置等
第1帧：中间语音数据帧，实时传输录音数据
第2帧：结束帧，通知服务器语音结束

2.4 语音数据处理

录音数据通过onFrameRecorded事件处理：

recorder.onFrameRecorded = ({isLastFrame, frameBuffer}) => {
  if (!isLastFrame && wsFlag) {
    // 发送中间帧
    const params = {
      data: {
        status: 1,
        format: "audio/L16;rate=16000",
        encoding: "raw",
        audio: toBase64(frameBuffer),
      },
    };
    wsTask.send(JSON.stringify(params))
  } else {
    // 发送最后一帧
    const params = {
      data: {
        status: 2,
        format: "audio/L16;rate=16000",
        encoding: "raw",
        audio: "",
      },
    };
    wsTask.send(JSON.stringify(params))
  }
}

音频数据需要转换为Base64格式传输，转换函数如下：

function toBase64(buffer) {
  let binary = "";
  let bytes = new Uint8Array(buffer);
  let len = bytes.byteLength;
  for (let i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes\[i\]);
  }
  return window.btoa(binary);
}

2.5 鉴权与安全

与科大讯飞API的通信需要严格的鉴权，采用HMAC-SHA256算法：

getWebSocketUrl() {
  return new Promise((resolve, reject) => {
    var url = this.URL;
    var host = this.URL.host;
    var apiKeyName = "api\_key";
    var date = new Date().toGMTString();
    var algorithm = "hmac-sha256";
    var headers = "host date request-line";
    var signatureOrigin = \`host: ${host}\\ndate: ${date}\\nGET /v2/iat HTTP/1.1\`;
    var signatureSha = CryptoJS.HmacSHA256(signatureOrigin, atob(this.user.apisecret));
    var signature = CryptoJS.enc.Base64.stringify(signatureSha);
    var authorizationOrigin =
        \`${apiKeyName}="${atob(this.user.apikey)}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"\`;
    var authorization = base64.encode(authorizationOrigin);
    url = \`${url}?authorization=${authorization}&date=${encodeURI(date)}&host=${host}\`;
    resolve(url);
  });
}

三、关键技术点详解

3.1 实时语音处理流程

语音采集：通过浏览器API获取麦克风权限并录制音频
分帧处理：将连续的语音流分割为小的音频帧
实时传输：通过WebSocket将音频帧实时发送到服务器
结果接收：异步接收服务器返回的识别结果
结果展示：动态更新界面显示识别文字

3.2 语音识别结果处理

服务器返回的识别结果采用增量返回方式，需要特殊处理：

if (jsonData.data && jsonData.data.result) {
  let data = jsonData.data.result;
  let str = "";
  let ws = data.ws;
  for (let i = 0; i < ws.length; i++) {
    str = str + ws\[i\].cw\[0\].w;
  }
  if (data.pgs) {
    if (data.pgs === "apd") {
      \_this.resultText = \_this.resultTextTemp;
    }
    \_this.resultTextTemp = \_this.resultText + str;
  } else {
    \_this.resultText = \_this.resultText + str;
  }
  \_this.text = \_this.resultTextTemp || \_this.resultText || "";
}

pgs字段：表示识别结果的进度状态
apd值：表示追加模式，需要合并临时结果和最终结果
ws数组：包含识别的词语信息

3.3 自动停止机制

系统实现了两种停止识别的方式：

手动停止：用户点击停止按钮
自动停止：检测到用户2秒没有说话自动停止

if (jsonData.code === 0 && jsonData.data.status === 2) {
  recorder.stop();
  \_this.$message.success("检测到您2秒没说话，自动结束识别！")
  wsTask.close();
  wsFlag = false
}

自动停止通过服务器的vad_eos参数控制，设置为2000毫秒。