如何在 JS SpeechRecognition API 中识别用户何时停止说话？

Question

我使用 JS SpeechRecognition API 制作了一个 SpeechToText 应用程序。在我的应用程序中有一个按钮和一个输入，当用户单击按钮时，我开始收听用户的语音并将他们所说的内容写入输入。当用户开始说话时，我会在输入上方的范围内显示文本。如果用户短暂休息，我想隐藏输入上方的跨度。然后如果用户继续说话，我想再次显示这个跨度。所以我想检测用户何时休息，我该怎么做？

HTML

<div id="container">
    <input type="text" id="textInput">
    <button id="startButton">Start</button>
    <div id="speechOutput"></div>
</div>

CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

#container {
    text-align: center;
}

#speechOutput {
    margin-top: 20px;
    font-style: italic;
    color: #888;
}

JS

const recognition = new webkitSpeechRecognition() || new SpeechRecognition();
recognition.lang = 'en-US';

const textInput = document.getElementById('textInput');
const startButton = document.getElementById('startButton');
const speechOutput = document.getElementById('speechOutput');

recognition.onstart = function() {
  speechOutput.innerText = 'Speech started...';
};

recognition.onresult = function(event) {
  const speechResult = event.results[0][0].transcript;
  textInput.value = speechResult;
};

recognition.onend = function() {
  speechOutput.innerText = '';
};

startButton.addEventListener('click', function() {
  recognition.start();
});

应用程序 JS Fiddle

Answer 1

以下是 SpeechToText 应用程序的改进 JavaScript 代码，具有检测语音短暂中断的功能：

const recognition = new webkitSpeechRecognition() || new SpeechRecognition();
recognition.lang = 'en-US';
recognition.continuous = true; // Set continuous recognition

const textInput = document.getElementById('textInput');
const startButton = document.getElementById('startButton');
const speechOutput = document.getElementById('speechOutput');

let isListening = false;
let timeoutId = null; // Stores the timeout ID for break detection

recognition.onstart = function() {
  isListening = true;
  speechOutput.innerText = 'Speech started...';
};

recognition.onresult = function(event) {
  const speechResult = event.results[0][0].transcript;
  textInput.value += speechResult; // Append speech result

  // Reset timeout if user keeps talking
  clearTimeout(timeoutId);
  timeoutId = setTimeout(function() {
    if (isListening) {
      speechOutput.innerText = ''; // Hide text if silence detected
    }
  }, 500); // Adjust timeout value based on your desired silence duration
};

recognition.onend = function() {
  isListening = false;
  speechOutput.innerText = '';
};

startButton.addEventListener('click', function() {
  if (!isListening) {
    recognition.start();
  } else {
    recognition.stop();
  }
});

变更说明：

1. continuous: true

   ： 此设置可实现连续识别，这意味着即使在语音间隙后浏览器也会继续监听。

2. isListening

   标志： 此变量跟踪识别当前是否处于活动状态。

3. timeoutId

   : 该变量存储用于检测静音的超时函数的ID。
4. 已修改

   onresult

   ：
   • 语音结果会附加到

     textInput.value

     ，而不是替换它。
   • 每当识别到新语音时，就会设置超时功能（

     setTimeout

     ）。
   • 超时函数检查在特定延迟后

     isListening

     是否仍然为真（可通过修改超时值以毫秒为单位进行调整）。
   • 如果

     isListening

     为 true 并且超时触发（意味着检测到静音），则

     speechOutput.innerText

     设置为 ''，隐藏文本。