首页 > 网络编程 > JavaScript > javascript技巧 > JavaScrip语音识别

原生JavaScrip实现语音识别的示例详解

2025-03-14 08:20:17 作者：JYeontu

语音识别转文本看似是很有难度的一个功能,但你知道吗,使用原生 JavaScript 也能实现语音识别功能,下面小编就来和大家讲讲具体的实现方法吧

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

效果展示

SpeechRecognition

MDN文档：developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition

1、基础定义

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

2、核心参数配置

参数	类型	作用描述
continuous	boolean	是否持续识别（默认false）
interimResults	boolean	是否返回临时识别结果（默认false）
lang	string	识别语言（如'zh-CN'/'en-US'）
maxAlternatives	number	返回候选结果数量（默认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、实时字幕生成

语音笔记应用

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需要梯子，局限性还是比较大。

到此这篇关于原生JavaScrip实现语音识别的示例详解的文章就介绍到这了,更多相关JavaScrip语音识别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！