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

更新时间：2025年03月14日 08:21:26 作者：JYeontu

语音识别转文本看似是很有难度的一个功能,但你知道吗,使用原生 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语音识别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

bootstrap中的导航条实例代码详解
本文通过实例代码给大家介绍了bootstrap中的导航条，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-05-05
javascript将DOM节点添加到文档的方法实例分析
这篇文章主要介绍了javascript将DOM节点添加到文档的方法,对比分析了javascript的两种节点创建的方法,涉及javascript节点操作及运行时间计算的相关技巧,需要的朋友可以参考下
2015-08-08
JS中异常抛出和处理方法图文详解
JavaScript和其他语言一样,都拥有捕获异常的机制,下面这篇文章主要给大家介绍了关于JS中异常抛出和处理的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
express异步函数异常捕获示例详解
这篇文章主要给大家介绍了关于express异步函数异常捕获的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
浅谈FastClick 填坑及源码解析
这篇文章主要介绍了浅谈FastClick 填坑及源码解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
微信公众平台发送模板消息(Java接口开发)
这篇文章主要介绍了微信公众平台发送模板消息(Java接口开发)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
原生js+css调节音量滑块
这篇文章主要介绍了原生js+css调节音量滑块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
BootStrap表单控件之文本域textarea
这篇文章主要介绍了BootStrap表单控件之文本域textarea,需要的朋友可以参考下
2017-05-05
javascript将数组插入到另一个数组中的代码
下面的代码主要功能就是将数组arr2插入到数组arr1的index位置，需要的朋友可以参考下
2013-01-01
JavaScript实现获取设备网络连接信息
作为前端开发，做好用户体验是很重要的，日常开发中我们经常可以遇到用户网速慢导致静态资源加载慢，从而给影响用户体验，所以本文来和大家分享一个有趣的API，可以实现获取网络信息
2023-05-05