HTML5语音输入和语音识别

HTML5提供了一个名为webkitSpeech的语音输入API，可以用来实现语音识别功能。这个API可以集成到大多数现代浏览器中，但主要是Webkit引擎的浏览器，比如Chrome和Safari。

以下是一个简单的HTML5语音输入示例代码：




<!DOCTYPE html>
<html>
<head>
<title>HTML5 Speech Input Example</title>
<script>
function startSpeechToText() {
  if (window.hasOwnProperty('webkitSpeechRecognition')) {
    const recognition = new webkitSpeechRecognition();
 
    recognition.continuous = false;
    recognition.lang = "en-US";
    recognition.interimResults = false;
    recognition.maxAlternatives = 1;
 
    recognition.start();
 
    recognition.onresult = function(event) {
      const query = event.results[0][0].transcript;
      document.getElementById('speech-input').value = query;
      recognition.stop();
    };
 
    recognition.onerror = function(event) {
      console.error('Speech Recognition Error:', event.error);
    }
  } else {
    alert('Speech Recognition is not supported by your browser.');
  }
}
</script>
</head>
<body>
 
<input type="text" id="speech-input" placeholder="Speech input here...">
<button onclick="startSpeechToText()">Start Speech</button>
 
</body>
</html>

在这个例子中，我们定义了一个名为startSpeechToText的函数，该函数检查浏览器是否支持webkitSpeechRecognition。如果支持，它将创建一个新的webkitSpeechRecognition实例，并设置一些属性，如语言和中间结果。然后，它启动语音识别并设置onresult事件处理程序来处理识别的结果。如果发生错误，它会在控制台中记录错误。如果浏览器不支持，它将弹出一个警告。

用户可以通过点击按钮来开始说话，说完后浏览器会将说话内容转换为文本并填充到输入框中。这个例子提供了一个基本的语音输入实现，你可以根据自己的需求进行扩展和定制。

HTML5语音输入和语音识别

评论已关闭

推荐阅读