Vosk-Browser 实现浏览器离线语音转文字

admin
人工智能
13天前
12热度
0评论

离线语音转文字实现详解

本文详细介绍了如何使用 VUE 和 Web API 实现一个完整的离线语音转文字 H5 应用。该应用包括录音、语音识别以及文本显示功能，完全依赖本地资源，无需外部请求。

一、技术栈简介

前端框架：Vue.js (2.x 版本)
音频处理库：Web Audio API
离线语音转文字引擎：Vosk（一个开源的离线语音识别系统）

二、项目结构

src/
│
├── assets/             # 静态资源
├── components/         # Vue 组件目录
├── router/             # 路由配置
└── views/              # 视图页面
    ├── main.vue        # 主界面组件，包含录音和显示逻辑

三、依赖安装及配置

安装 Vosk：npm install vosk-api

创建 main.js 或相应入口文件中引入 Vosk 库：


import Vue from 'vue';
import App from './App.vue';
import * as Vosk from 'vosk-api'; // 引入 Vosk api

new Vue({ render: h => h(App), mounted() { this.$store.dispatch('initVosk'); // 初始化 Vosk 模型 }, }).$mount('#app');


## 四、功能实现细节
### 4.1 音频流处理
使用 getUserMedia API 获取麦克风权限，捕获音频数据：
```javascript
navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
    // 创建 AudioContext 并设置相关参数
});

4.2 语音识别逻辑

通过 Vosk 对捕获的音频进行实时解析，并将结果反馈给前端展示部分：

new Vosk.Recognizer({ model: 'path/to/vosk-model-small-ru-0.15' });
recognizer.acceptWaveform(audioBuffer); // 将获取到的 audio 数据传入

4.3 文本显示与输入框逻辑

在 Vue 组件中定义状态管理对象，用于存储录音状态、部分文本以及最终结果：

data() {
    return { 
      finalizing: false,
      partialText: '',
      resultText: ''
    }
},
methods: {
  startRecording() {
    this.finalizing = false;
    // 开始录音逻辑...
  },
  stopRecording() {
    this.finalizing = true;
    // 结束录音及处理结果逻辑...
  },
  onResult(msg) {
    if(this.finalizing){
      this.resultText += msg?.result?.text || '';
      return;
    }
    this.partialText += msg?.result?.text || '';
  }
}

4.4 避免文本重复

在开始录音和结束录音时绑定结果监听器，确保不产生重复计算：

recognizer.on('partial', this.onResult);
function stopVoice() {
    recognizer.off('partial', this.onResult);
    // 处理最终结果...
}

五、完整 H5 Demo 实现

HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />

<title>离线语音转文字 Demo</title>
  <!-- 引入样式 -->
</head>
<body>
<div id="app"></div>
<script src="./dist/build.js"></script>
</body>
</html>

Vue 组件

定义 Main.vue 包含录音按钮、文本显示区域等 UI 元素及交互逻辑：


<template>
  <main class="chat-box">
    <!-- 头部 -->
    <header class="chat-header">离线语音转文字 Demo</header>
    <!-- 内容区 -->
    <section class="chat-content" v-for="(message, index) in messages" :key="index">{{ message.text }}</section>
    <!-- 输入框与录音按钮 -->
    <footer class="chat-input">
      <input type="text" placeholder="请输入文本..." class="input-box">
      <button @click="startRecording" class="btn-mic">录音</button>
    </footer>
  </main>
</template>

<script>
export default {
  data() { return {...} },
  methods: { ... }
}
</script>

<style scoped>
/* CSS 样式 */
</style>

六、总结

本文通过一个具体的案例，展示了如何使用 Vue.js 和 Web Audio API 结合 Vosk 实现离线语音转文字的功能。此应用具备录音采集、音频处理以及实时文本显示的能力，并且整个过程无需依赖任何外部网络资源。

以上就是实现完整 H5 离线语音转文字功能的详细步骤，希望对大家有所帮助！

离线语音转文字实现详解

客户端界面与交互设计

在离线语音转文字功能中，用户界面的设计至关重要。为了确保用户体验流畅且直观，我们采用了简洁的布局和清晰的操作引导。界面包括一个用于显示聊天记录的对话框、输入文本框以及录音按钮（🎤）。此外，还提供了一些常见的快速命令选项，如“你好”、“帮助”和“测试语音”。

当用户点击录音按钮时，会弹出包含波纹动画效果的提示层，以指示正在录音的状态。该界面允许用户在录音过程中随时选择取消操作或确认转换为文本。

本地模型加载与初始化

为了实现离线功能，所有相关的音频处理和识别逻辑均采用本地化文件部署，无外部依赖项。通过使用WebAssembly技术加速了语音识别模型的运行效率。具体步骤如下：

预加载模型：当页面加载时，系统会自动调用preloadVosk()函数来检查并初始化语音识别客户端。如果模型尚未就绪或正在加载中，则显示相应的提示信息。
模型实例化：一旦确认模型文件存在且可以访问后，创建一个基于用户设备音频采样率的KaldiRecognizer实例。
实时处理：通过监听onaudioprocess事件并调用语音识别器的方法来接受来自麦克风输入的数据流，并进行实时转换为文本输出。

音频录制与数据传输

在开始录音之前，首先需要获取用户的麦克风权限。如果成功获得授权，则创建一个新的AudioContext实例以处理音频信号，并连接到默认的媒体设备源（如内置麦克风）。接下来，通过使用ScriptProcessorNode对象来捕获并传递采样数据给语音识别器。

// 获取用户音频流和初始化处理环境
window.startVoice = async function () {
  // 省略了错误检查代码...

    const sampleRate = 16000;
    vosk.recognizer   = new vosk.client.KaldiRecognizer(sampleRate);

    // 创建AudioContext并配置处理节点
    vosk.audioCtx     = new AudioContext({sampleRate});
    const source      = vosk.audioCtx.createMediaStreamSource(vosk.stream);
    vosk.processor    = vosk.audioCtx.createScriptProcessor(4096, 1, 1);

    // 连接处理链路
    source.connect(vosk.processor);
    vosk.processor.connect(vosk.audioCtx.destination);

    vosk.processor.onaudioprocess(function(e) {
        if (vosk.recognizer) 
            vosk.recognizer.acceptWaveformFloat(e.inputBuffer.getChannelData(0), sampleRate);
    });
}

结果处理与用户反馈

一旦录音结束，系统将触发结果解析过程。语音识别器会在result事件中返回部分和最终的文本结果给前端，随后根据这些信息更新输入框内容或直接显示在聊天窗口内。

对于任何可能发生的异常情况（如设备权限被拒绝），应用会通过弹窗对话提示用户，并指导他们如何解决问题继续使用功能。此外，在整个过程中还提供了加载状态与错误状态反馈以提高用户体验的稳定性。

总结

以上便是离线语音转文字系统的实现细节，包括前端界面设计、本地模型管理以及实时音频处理等关键部分。通过这种方式，用户可以在没有互联网连接的情况下也能享受到便捷高效的语音命令服务。