原生JavaScrip實現(xiàn)語音識別的示例詳解

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

語音識別轉文本看似是很有難度的一個功能,但你知道嗎,使用原生?JavaScript?也能實現(xiàn)語音識別功能,下面小編就來和大家講講具體的實現(xiàn)方法吧

效果展示

SpeechRecognition

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

1、基礎定義

// 瀏覽器兼容性處理
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();

2、核心參數(shù)配置

參數(shù)	類型	作用描述
continuous	boolean	是否持續(xù)識別（默認false）
interimResults	boolean	是否返回臨時識別結果（默認false）
lang	string	識別語言（如'zh-CN'/'en-US'）
maxAlternatives	number	返回候選結果數(shù)量（默認1）

功能實現(xiàn)

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、語音指令系統(tǒng)

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';

    // 狀態(tài)管理
    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>