原生JavaScrip就能实现语音识别？

JYeontu
311 阅读2分钟

说在前面

用过微信的同学大部分都使用过语音转文本功能吧？语音识别转文本看似是很有难度的一个功能，但你知道吗？使用原生 JavaScript 也能实现语音识别功能。

效果展示

SpeechRecognition

MDN文档：developer.mozilla.org/en-US/docs/…

1、基础定义

// 浏览器兼容性处理
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();

2、核心参数配置

参数类型作用描述
continuousboolean是否持续识别（默认false）
interimResultsboolean是否返回临时识别结果（默认false）
langstring识别语言（如'zh-CN'/'en-US'）
maxAlternativesnumber返回候选结果数量（默认1）

功能实现

1、实时结果处理

recognition.onresult = (event) => {
  const results = event.results;
  const resultIndex = event.resultIndex;
  
  // 临时结果和最终结果分离处理
  const current = results[resultIndex];
  const isFinal = current.isFinal;
  
  if (isFinal) {
    // 处理最终结果
    saveToDatabase(current[0].transcript); 
  } else {
    // 实时显示临时结果
    showInterimResult(current[0].transcript);
  }
};

2、移动端适配方案

// Android 自动重启识别
recognition.onend = () => {
  if (/Android/.test(navigator.userAgent)) {
    setTimeout(() => recognition.start(), 500);
  }
};

// iOS 特殊处理
if (/iPhone|iPad/.test(navigator.userAgent)) {
  recognition.continuous = false;
}

应用场景

  • 1、语音指令系统
recognition.onresult = (event) => {
 const command = event.results[0][0].transcript.toLowerCase();
 if(command.includes('刷新')) location.reload();
 if(command.includes('搜索')) triggerSearch(command);
};

  • 2、实时字幕生成

    1. 语音笔记应用

Demo源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>语音转文字实时演示</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      max-width: 800px;
      margin: 2rem auto;
      padding: 0 1rem;
    }
    
    #status {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 10px;
      background: #ccc;
    }
    
    #status.active {
      background: #00c853;
      animation: pulse 1s infinite;
    }
    
    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(0,200,83,0.4); }
      70% { box-shadow: 0 0 0 10px rgba(0,200,83,0); }
      100% { box-shadow: 0 0 0 0 rgba(0,200,83,0); }
    }

    #transcript {
      border: 1px solid #ddd;
      min-height: 150px;
      padding: 1rem;
      margin: 1rem 0;
      white-space: pre-wrap;
      background: #f8f9fa;
    }

    .interim {
      color: #666;
      font-style: italic;
    }
  </style>
</head>
<body>
  <h2>实时语音转文字演示</h2>
  
  <div>
    <span id="status"></span>
    <button id="toggleBtn">开始识别</button>
    <span id="lang">当前语言：中文</span>
  </div>

  <div id="transcript"></div>

  <script>
    const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
    const transcriptDiv = document.getElementById('transcript');
    const statusEl = document.getElementById('status');
    const toggleBtn = document.getElementById('toggleBtn');

    // 基础配置
    recognition.continuous = true;
    recognition.interimResults = true;
    recognition.lang = 'zh-CN';

    // 状态管理
    let isRecognizing = false;

    // 事件处理
    recognition.onstart = () => {
      isRecognizing = true;
      statusEl.classList.add('active');
      toggleBtn.textContent = '停止识别';
    };

    recognition.onend = () => {
      isRecognizing = false;
      statusEl.classList.remove('active');
      toggleBtn.textContent = '开始识别';
    };

    recognition.onresult = (event) => {
      let final = '';
      let interim = '';

      for (let i = event.resultIndex; i < event.results.length; i++) {
        const transcript = event.results[i][0].transcript;
        if (event.results[i].isFinal) {
          final += transcript + '\n';
        } else {
          interim += transcript;
        }
      }

      transcriptDiv.innerHTML = final.replace(/\n/g, '<br>') + 
        `<span class="interim">${interim}</span>`;
    };

    recognition.onerror = (event) => {
      console.error('识别错误:', event.error);
      alert(`识别错误: ${event.error}`);
    };

    // 按钮控制
    toggleBtn.addEventListener('click', () => {
      if (isRecognizing) {
        recognition.stop();
      } else {
        recognition.start();
      }
    });

    // 权限检测
    if (!('webkitSpeechRecognition' in window)) {
      transcriptDiv.innerHTML = '⚠️ 当前浏览器不支持语音识别功能';
      toggleBtn.disabled = true;
    }
  </script>
</body>
</html>

浏览器兼容

实测edge可以正常识别，chrome需要梯子，局限性还是比较大。

公众号

关注公众号『前端也能这么有趣』，获取更多有趣内容。

公众号发送 加群 可以加入群聊，一起来学习（摸鱼）吧~

说在后面

🎉这里是JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打打羽毛球🏸 ，平时也喜欢写些东西，既为自己记录📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解🙇，写错的地方望指出，定会认真改进😊，在此谢谢大家的支持，我们下文再见🙌。

avatar
文章
阅读
粉丝