基于Webkit的Speech to Text仅在控制台显示，如何输出至文本输入框？

我一眼就看出问题所在啦——你现在用innerHTML来设置<input>元素的内容，但<input>是空元素（void element），它的显示内容是通过value属性控制的，根本不会渲染内部的HTML内容！这就是为什么文本只在控制台能看到，却出现在输入框外面的原因。

具体修改步骤 #

1. 替换innerHTML为value：对于<input type="text">，我们需要用value属性来设置它的输入内容，而不是innerHTML。
2. 调整临时转录文本的显示：因为value不能包含HTML标签，所以如果要区分最终文本和临时文本，你可以选择：
   • 把临时文本也合并到value中（用灰色字体的话需要额外处理，比如用一个相邻的元素显示临时文本）
   • 或者简化处理，直接把所有转录内容都放到输入框的value里

修改后的完整代码片段 #

<label for="textInput" class="inputOutline">
  <input id="textInput" class="input responsive-column" placeholder="Type something" type="text" onkeydown="/*globals CanvasJS */ ConversationPanel.inputKeyDown(event, this)">
</label>
<button onclick="startConverting();"><i class="fa fa-microphone"></i></button>

<script type="text/javascript">
var r = document.getElementById('textInput');
function startConverting (){
  if('webkitSpeechRecognition' in window){
    var speechRecognizer = new webkitSpeechRecognition();
    speechRecognizer.continuous = true;
    speechRecognizer.interimResults = true;
    speechRecognizer.lang = 'en-IN';
    speechRecognizer.start();
    var finalTranscripts = '';
    
    speechRecognizer.onresult = function(event){
      var interimTranscripts = '';
      for(var i = event.resultIndex; i < event.results.length; i++){
        var transcript = event.results[i][0].transcript;
        transcript = transcript.replace("\n", " "); // 把换行换成空格，适配输入框格式
        if(event.results[i].isFinal){
          finalTranscripts += transcript;
        }else{
          interimTranscripts += transcript;
        }
      }
      // 把最终文本+临时文本合并到输入框的value中
      r.value = finalTranscripts + interimTranscripts;
      // 如果想要区分临时文本的样式，可以额外加一个span放在输入框旁边
      // 比如：document.getElementById('interimText').textContent = interimTranscripts;
    };
    
    speechRecognizer.onerror = function (event) { 
      console.error('语音识别出错:', event.error);
    };
  }else {
    alert('请使用Google Chrome浏览器以支持语音识别功能');
  }
}
</script>

额外说明 #

• 你控制台里看到的<input>this text should appear in the text area...</input>是错误的写法，<input>标签不需要闭合，也不能在内部放文本内容，正确的写法是<input value="你的文本内容">。
• 如果需要保留临时文本的灰色样式，可以在输入框旁边添加一个<span id="interimText" style="color:#999;"></span>，然后把临时文本赋值给这个span的textContent，同时输入框只显示最终文本。

内容的提问来源于stack exchange，提问作者Daniel Dalan