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

用户11481867894842026-04-21 14:43

最近在做一个 AI 客服对话组件，需要接入语音输入。第一反应是用浏览器原生的 window.SpeechRecognition：

js 复制代码 
const recognition = new webkitSpeechRecognition()
recognition.lang = 'zh-CN'
recognition.onresult = (e) => console.log(e.results[0][0].transcript)
recognition.start()

代码很简单，本地测试也没问题。但上线后发现：在国内完全不可用。

加了完整日志后才搞清楚原因：

js 复制代码 
recognition.onstart = () => console.log('已启动')       // ✅ 触发
recognition.onspeechstart = () => console.log('检测到声音') // ❌ 不触发
recognition.onresult = (e) => console.log('有结果', e)   // ❌ 不触发
recognition.onerror = (e) => console.log('错误', e.error) // 有时触发 network
recognition.onend = () => console.log('结束')            // ✅ 触发（静默结束）

根本原因 ：Chrome 的 SpeechRecognition 底层调用 www.google.com/speech-api，这个域名在国内被 GFW 封锁。表现为 onstart 触发后静默等待，最终 onend 直接结束，没有任何识别结果。

解决方案：Vosk-Browser 离线识别

Vosk 是开源的离线语音识别引擎，@lichess-org/vosk-browser 是其 WebAssembly 浏览器版本的维护 fork（原版 vosk-browser 已停止维护）。

核心优势：

  • 完全离线，不依赖任何外部服务，国内可用
  • 支持中文，小模型约 40MB
  • 基于 WebWorker + WASM，识别不阻塞主线程

准备工作

1. 安装依赖

bash 复制代码 
npm install @lichess-org/vosk-browser

2. 复制静态文件到 public 目录

bash 复制代码 
cp node_modules/@lichess-org/vosk-browser/dist/vosk.wasm.js  public/
cp node_modules/@lichess-org/vosk-browser/dist/vosk.worker.js public/
cp node_modules/@lichess-org/vosk-browser/dist/vosk.wasm      public/

Worker 和 WASM 文件必须放到可以直接通过 URL 访问的静态目录，不能走 webpack 打包。

3. 下载中文模型

ruby 复制代码 
https://alphacephei.com/vosk/models/vosk-model-small-cn-0.22.zip

下载后放到 public/ 目录。建议放自己服务器，不要依赖 CDN，国内访问不稳定。

核心 API

js 复制代码 
import { createVoskClient } from '@lichess-org/vosk-browser'

// 1. 加载模型（只需一次，内部启动 WebWorker）
const client = await createVoskClient({
  workerUrl: '/vosk.worker.js',
  wasmUrl:   '/vosk.wasm',
  modelUrl:  '/vosk-model-small-cn-0.22.zip'
})

// 2. 创建识别器（每次录音新建一个）
const recognizer = new client.KaldiRecognizer(16000)  // 采样率必须 16000

// 3. 监听识别结果（每句话结束触发一次）
recognizer.on('result', (msg) => {
  console.log(msg.result.text)  // 识别出的文字
})

// 4. 喂音频数据（通过 ScriptProcessor 实时传入）
recognizer.acceptWaveformFloat(float32Array, 16000)

// 5. 停止时获取最后一段未提交的结果
recognizer.retrieveFinalResult()

// 6. 销毁识别器
recognizer.remove()

实现要点

要点一：页面空闲时预加载模型

模型首次加载需要解压 WASM，用 requestIdleCallback 在页面空闲时静默加载，用户点击录音时已就绪：

js 复制代码 
async function preloadVosk() {
  if (vosk.client || vosk.loading) return
  vosk.loading = true
  try {
    vosk.client = await Promise.race([
      createVoskClient({
        workerUrl: '/vosk.worker.js',
        wasmUrl:   '/vosk.wasm',
        modelUrl:  '/vosk-model-small-cn-0.22.zip'
      }),
      // 加超时保护，防止模型文件不存在时永远挂起
      new Promise((_, reject) => setTimeout(() => reject(new Error('模型加载超时')), 60000))
    ])
  } catch (e) {
    vosk.client = null
  } finally {
    vosk.loading = false
  }
}

// 页面空闲时预加载
if (window.requestIdleCallback) {
  requestIdleCallback(() => preloadVosk(), { timeout: 3000 })
} else {
  setTimeout(preloadVosk, 2000)
}

要点二：用 AudioContext + ScriptProcessor 喂数据

Vosk 需要 16000Hz 的 PCM Float32 音频流：

js 复制代码 
const sampleRate = 16000
const stream    = await navigator.mediaDevices.getUserMedia({ audio: true })
const audioCtx  = new AudioContext({ sampleRate })
const source    = audioCtx.createMediaStreamSource(stream)
const processor = audioCtx.createScriptProcessor(4096, 1, 1)

source.connect(processor)
processor.connect(audioCtx.destination)

processor.onaudioprocess = (e) => {
  // 实时把麦克风数据喂给 Vosk
  recognizer.acceptWaveformFloat(e.inputBuffer.getChannelData(0), sampleRate)
}

要点三：避免识别文本重复

录音过程中 result 事件持续触发（每句话结束一次），停止时还需调 retrieveFinalResult() 获取最后一段。

如果在 startVoice 和 stopVoice 里各绑一次 result 监听，最后一段文本会被计算两遍。

用 finalizing 标志区分：

js 复制代码 
// 开始录音时绑定监听，录音中累积文本
recognizer.on('result', (msg) => {
  const text = msg?.result?.text?.replace(/\s+/g, '') || ''
  if (!text) return
  if (vosk.finalizing) {
    // retrieveFinalResult 触发的最后一段
    inputBox.value += vosk.partialText + text
    vosk.partialText = ''
  } else {
    // 录音中间的结果，先累积
    vosk.partialText += text
  }
})

// 停止录音
function stopVoice() {
  // ... 停止音频流 ...
  vosk.finalizing = true
  recognizer.on('result', () => {
    recognizer.remove()
    vosk.finalizing = false
  })
  recognizer.retrieveFinalResult()
}

要点四：Vue 2 中不要用 _ 前缀存状态

Vue 2 不会代理 _ 或 $ 开头的 data 属性，直接赋值会是 undefined：

js 复制代码 
// ❌ 错误：this._voskClient 永远是 undefined
data() {
  return { _voskClient: null }
}

// ✅ 正确：在 mounted 里直接挂到实例上（非响应式）
mounted() {
  this.$vosk = {
    client: null, loading: false,
    recognizer: null, stream: null,
    audioCtx: null, processor: null,
    partialText: '', finalizing: false
  }
}

完整 H5 Demo（纯离线版）

以下是可直接运行的完整示例，所有依赖全部本地化，无任何外部请求：

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>离线语音转文字 Demo</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      background: #0f1117; color: #e0e0e0;
      display: flex; justify-content: center; align-items: center; min-height: 100vh;
    }
    .chat-box {
      width: 400px; height: 600px;
      background: linear-gradient(160deg, #1a1d2e 0%, #0f1117 100%);
      border-radius: 16px; border: 1px solid rgba(0,200,255,0.15);
      box-shadow: 0 8px 40px rgba(0,0,0,0.6);
      display: flex; flex-direction: column; overflow: hidden; position: relative;
    }
    .chat-header {
      padding: 14px 16px; background: rgba(0,200,255,0.06);
      border-bottom: 1px solid rgba(0,200,255,0.1);
      display: flex; align-items: center; gap: 8px;
      font-size: 15px; font-weight: 600; color: #00c8ff;
    }
    .dot { width: 8px; height: 8px; border-radius: 50%; background: #00c8ff; animation: blink 1.4s infinite; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
    .chat-content {
      flex: 1; overflow-y: auto; padding: 16px 12px;
      display: flex; flex-direction: column; gap: 12px;
    }
    .chat-content::-webkit-scrollbar { width: 4px; }
    .chat-content::-webkit-scrollbar-thumb { background: rgba(0,200,255,0.2); border-radius: 2px; }
    .msg { display: flex; gap: 8px; max-width: 85%; }
    .msg.user { align-self: flex-end; flex-direction: row-reverse; }
    .msg-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(0,200,255,0.15); border: 1px solid rgba(0,200,255,0.3);
      display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
    }
    .msg.user .msg-avatar { background: rgba(100,180,255,0.15); }
    .msg-bubble {
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px; padding: 8px 12px; font-size: 13px; line-height: 1.6;
    }
    .msg.user .msg-bubble { background: rgba(0,200,255,0.12); border-color: rgba(0,200,255,0.2); }
    .msg-time { font-size: 10px; color: #555; margin-top: 4px; }
    .quick-cmds { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 4px; }
    .quick-cmd {
      padding: 4px 12px; border-radius: 12px;
      background: rgba(0,200,255,0.08); border: 1px solid rgba(0,200,255,0.2);
      font-size: 12px; color: #00c8ff; cursor: pointer;
    }
    .quick-cmd:hover { background: rgba(0,200,255,0.18); }
    .chat-input {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 12px; border-top: 1px solid rgba(255,255,255,0.06);
    }
    .input-box {
      flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 20px; padding: 8px 14px; color: #e0e0e0; font-size: 13px; outline: none;
    }
    .input-box:focus { border-color: rgba(0,200,255,0.4); }
    .input-box::placeholder { color: #555; }
    .btn-send, .btn-mic {
      width: 34px; height: 34px; border-radius: 50%; border: none;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      font-size: 15px; flex-shrink: 0;
    }
    .btn-send { background: #00c8ff; color: #000; }
    .btn-mic { background: rgba(0,200,255,0.1); border: 1px solid rgba(0,200,255,0.3); color: #00c8ff; }
    .btn-mic.recording { background: rgba(255,71,87,0.2); border-color: #ff4757; color: #ff4757; animation: pulse-red 1s infinite; }
    @keyframes pulse-red { 0%,100%{box-shadow:0 0 0 0 rgba(255,71,87,0.4)} 50%{box-shadow:0 0 0 6px rgba(255,71,87,0)} }
    .voice-overlay {
      position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
      background: rgba(10,12,20,0.92); border: 1px solid rgba(0,200,255,0.2);
      border-radius: 16px; padding: 16px 24px;
      display: none; flex-direction: column; align-items: center; gap: 12px;
      z-index: 20; min-width: 200px;
    }
    .voice-overlay.show { display: flex; }
    .voice-wave { display: flex; align-items: flex-end; gap: 4px; height: 32px; }
    .voice-wave span { width: 4px; border-radius: 2px; background: #00c8ff; animation: wave-bar 0.8s ease-in-out infinite; }
    .voice-wave span:nth-child(1){height:8px;animation-delay:0s}
    .voice-wave span:nth-child(2){height:18px;animation-delay:0.1s}
    .voice-wave span:nth-child(3){height:28px;animation-delay:0.2s}
    .voice-wave span:nth-child(4){height:18px;animation-delay:0.3s}
    .voice-wave span:nth-child(5){height:8px;animation-delay:0.4s}
    @keyframes wave-bar { 0%,100%{transform:scaleY(1);opacity:0.7} 50%{transform:scaleY(1.6);opacity:1} }
    .voice-tip { font-size: 12px; color: #aaa; }
    .voice-actions { display: flex; gap: 24px; }
    .voice-action {
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      cursor: pointer; font-size: 12px; color: #aaa; padding: 6px 12px;
      border-radius: 8px; transition: all 0.2s;
    }
    .voice-action .icon { font-size: 20px; }
    .voice-action.cancel:hover { color: #ff4757; background: rgba(255,71,87,0.1); }
    .voice-action.confirm:hover { color: #00c8ff; background: rgba(0,200,255,0.1); }
    .status-bar { padding: 4px 12px 8px; font-size: 11px; color: #555; text-align: center; }
    .status-bar.ready { color: #67c23a; }
    .status-bar.error { color: #f56c6c; }
  </style>
</head>
<body>
<div class="chat-box">
  <div class="chat-header">
    <div class="dot"></div>
    AI 智能助手（离线语音版）
  </div>

  <div class="chat-content" id="chatContent"></div>

  <div class="quick-cmds">
    <span class="quick-cmd" onclick="sendText('你好')">你好</span>
    <span class="quick-cmd" onclick="sendText('帮助')">帮助</span>
    <span class="quick-cmd" onclick="sendText('测试语音')">测试语音</span>
  </div>

  <!-- 录音遮罩 -->
  <div class="voice-overlay" id="voiceOverlay">
    <div class="voice-wave">
      <span></span><span></span><span></span><span></span><span></span>
    </div>
    <div class="voice-tip">正在录音，请说话...</div>
    <div class="voice-actions">
      <div class="voice-action cancel" onclick="cancelVoice()">
        <span class="icon">🗑</span><span>取消</span>
      </div>
      <div class="voice-action confirm" onclick="stopVoice()">
        <span class="icon">✅</span><span>转文本</span>
      </div>
    </div>
  </div>

  <div class="chat-input">
    <button class="btn-mic" id="btnMic" onclick="startVoice()" title="点击录音">🎤</button>
    <input class="input-box" id="inputBox" placeholder="输入消息..." onkeydown="if(event.key==='Enter')sendMessage()" />
    <button class="btn-send" onclick="sendMessage()">➤</button>
  </div>

  <div class="status-bar" id="statusBar">语音模型加载中...</div>
</div>

<script type="module">
// 所有文件全部本地化，无外部依赖
import { createVoskClient } from '/vosk.wasm.js'

const vosk = {
  client: null, loading: false,
  recognizer: null, stream: null,
  audioCtx: null, processor: null,
  partialText: '', finalizing: false
}
let isRecording = false

const chatContent  = document.getElementById('chatContent')
const inputBox     = document.getElementById('inputBox')
const btnMic       = document.getElementById('btnMic')
const voiceOverlay = document.getElementById('voiceOverlay')
const statusBar    = document.getElementById('statusBar')

// ── 预加载模型 ──────────────────────────────────────────────
async function preloadVosk() {
  if (vosk.client || vosk.loading) return
  vosk.loading = true
  setStatus('语音模型加载中...', '')
  try {
    vosk.client = await Promise.race([
      createVoskClient({
        workerUrl: '/vosk.worker.js',
        wasmUrl:   '/vosk.wasm',
        modelUrl:  '/vosk-model-small-cn-0.22.zip'
      }),
      new Promise((_, r) => setTimeout(() => r(new Error('加载超时，请确认模型文件已放置')), 60000))
    ])
    setStatus('语音模型已就绪，可点击 🎤 录音', 'ready')
  } catch (e) {
    vosk.client = null
    setStatus('模型加载失败：' + e.message, 'error')
  } finally {
    vosk.loading = false
  }
}

// ── 开始录音 ────────────────────────────────────────────────
window.startVoice = async function () {
  if (isRecording) return
  if (!vosk.client) {
    if (vosk.loading) { alert('模型加载中，请稍候...'); return }
    await preloadVosk()
    if (!vosk.client) return
  }
  try {
    const sampleRate  = 16000
    vosk.recognizer   = new vosk.client.KaldiRecognizer(sampleRate)
    vosk.partialText  = ''
    vosk.finalizing   = false

    vosk.recognizer.on('result', (msg) => {
      const text = msg?.result?.text?.replace(/\s+/g, '') || ''
      if (!text) return
      if (vosk.finalizing) {
        const full = vosk.partialText + text
        if (full) inputBox.value += full
        vosk.partialText = ''
      } else {
        vosk.partialText += text
      }
    })

    vosk.stream    = await navigator.mediaDevices.getUserMedia({ audio: true })
    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 = (e) => {
      if (vosk.recognizer) vosk.recognizer.acceptWaveformFloat(e.inputBuffer.getChannelData(0), sampleRate)
    }

    isRecording = true
    btnMic.classList.add('recording')
    voiceOverlay.classList.add('show')
  } catch (err) {
    alert(err.name === 'NotAllowedError' ? '麦克风权限被拒绝' : '录音启动失败：' + err.message)
  }
}

// ── 停止录音（转文本） ───────────────────────────────────────
window.stopVoice = function () {
  if (!isRecording) return
  isRecording = false
  btnMic.classList.remove('recording')
  voiceOverlay.classList.remove('show')
  if (vosk.processor) { vosk.processor.disconnect(); vosk.processor = null }
  if (vosk.audioCtx)  { vosk.audioCtx.close();       vosk.audioCtx  = null }
  if (vosk.stream)    { vosk.stream.getTracks().forEach(t => t.stop()); vosk.stream = null }
  if (vosk.recognizer) {
    vosk.finalizing = true
    vosk.recognizer.on('result', () => {
      vosk.recognizer.remove()
      vosk.recognizer = null
      vosk.finalizing = false
    })
    vosk.recognizer.retrieveFinalResult()
  }
}

// ── 取消录音 ────────────────────────────────────────────────
window.cancelVoice = function () {
  isRecording = false
  btnMic.classList.remove('recording')
  voiceOverlay.classList.remove('show')
  if (vosk.processor) { vosk.processor.disconnect(); vosk.processor = null }
  if (vosk.audioCtx)  { vosk.audioCtx.close();       vosk.audioCtx  = null }
  if (vosk.stream)    { vosk.stream.getTracks().forEach(t => t.stop()); vosk.stream = null }
  if (vosk.recognizer){ vosk.recognizer.remove(); vosk.recognizer = null }
  vosk.partialText = ''
}

// ── 消息收发 ────────────────────────────────────────────────
window.sendMessage = function () {
  const text = inputBox.value.trim()
  if (!text) return
  appendMsg('user', text)
  inputBox.value = ''
  setTimeout(() => appendMsg('ai', getReply(text)), 600)
}

window.sendText = function (text) {
  inputBox.value = text
  sendMessage()
}

function appendMsg(type, content) {
  const div = document.createElement('div')
  div.className = 'msg ' + type
  const now = new Date()
  const time = `${now.getHours().toString().padStart(2,'0')}:${now.getMinutes().toString().padStart(2,'0')}`
  div.innerHTML = `
    <div class="msg-avatar">${type === 'user' ? '👤' : '🤖'}</div>
    <div class="msg-bubble">
      <div>${content}</div>
      <div class="msg-time">${time}</div>
    </div>`
  chatContent.appendChild(div)
  chatContent.scrollTop = chatContent.scrollHeight
}

function getReply(text) {
  const map = {
    '你好': '您好！我是 AI 助手，有什么可以帮您？',
    '帮助': '您可以直接输入问题，或点击 🎤 使用语音输入。',
    '测试语音': '语音识别正常！这是一条测试回复。',
  }
  for (const k in map) { if (text.includes(k)) return map[k] }
  return `您说的是："${text}"，我已收到。`
}

function setStatus(msg, type) {
  statusBar.textContent = msg
  statusBar.className = 'status-bar ' + (type || '')
}

// 页面空闲时预加载模型
if (window.requestIdleCallback) requestIdleCallback(() => preloadVosk(), { timeout: 3000 })
else setTimeout(preloadVosk, 2000)

appendMsg('ai', '您好！我是 AI 智能助手。点击 🎤 可使用<b>离线语音输入</b>，无需联网，完全本地识别。')
</script>
</body>
</html>

运行前确保以下文件都在 public 根目录：

  • vosk.wasm.js
  • vosk.worker.js
  • vosk.wasm
  • vosk-model-small-cn-0.22.zip
相关推荐
江上清风山间明月2 小时前
Vite现代化的前端构建工具详解
前端·webpack·nodejs·vite
PBitW2 小时前
apijson 让前端自己定义接口 —— 但不推荐
前端·apijson
存在X2 小时前
前端自动化编译Jenkins
前端·github
军军君012 小时前
数字孪生监控大屏实战模板：云数据中心展示平台
前端·javascript·vue.js·typescript·前端框架·es6·echarts
吴声子夜歌2 小时前
Vue3——使用axios实现Ajax请求
前端·javascript·ajax·axios
qq4356947012 小时前
JavaWeb05
前端·html
@PHARAOH2 小时前
WHAT - W3C WCAG 2.1 AA 无障碍标准
前端
用户游民2 小时前
Android 项目aab包上传谷歌平台需支持16KB页面
前端
SevgiliD2 小时前
后台下载：获取响应头文件名
前端
热门推荐
012026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点032026 年 AI 编程助手全面对比评测：Cursor vs Copilot vs Claude Code vs GitHub Copilot Free042026年4月AI大事件深度解读：大模型竞争进入“深水区“05Claude Code Windows 兼容性问题：指定版本 2.1.112 可解决06AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析07UBUNTU Claude Code 报错 claude native binary not installed08从限购到畅通：GLM-5.1 Coding Plan接入攻略09近期有什么ai的新消息，新动态？ 2026.4月10从零部署 Hermes Agent：一只"会成长的 AI 马"保姆级安装教程