javascript - 如何将语音捕获的文本放入文本字​​段

Question

这是一个复杂的问题，但这里是。我构建了一个 jquery 聊天功能，我在文本字段标签中键入内容并点击发送，它会进入聊天框。完成了。

我刚找到一个使用 javascript 的文本库语音。 http://ctrlq.org/code/19680-html5-web-speech-api

我的问题是我不知道如何将所有必需的 html 标签放入文本字​​段标签中……我认为这不可能……或者我错了。

代码现在是这样工作的(没有声音)https://jsfiddle.net/v3Lru135/

这是带有语音的代码以及我尝试添加 html 标签 https://jsfiddle.net/9r93vcsq/

谁能帮我弄到它，这样当我按下那个按钮并开始说话时，它会将我所说的文本形式放入文本字​​段中，这样我就可以点击发送....谢谢

<div id="chatContainer">

     </div>

     <div id="chatControls">

     <!--<textarea id="chatTextBox" placeholder = "Enter your message   
here..."> </textarea>-->

<div id="chatTextBox">
     <div>
      <a href="#" id="start_button"  
onclick="startDictation(event)">Dictate</a>
    </div>

    <div id="results">
      <span id="final_span" class="final"></span>
      <span id="interim_span" class="interim"></span>
    </div>
  </div>


     <button id="chatSend">Send</button>

#chatContainer{
    width: 95%;
    height: 50px;
    background: url(../assets/chatTile.png) repeat;
    border: 1px solid #333;
    margin: 0 auto;
    border-radius: 5px;
    margin-top: 10px;
    overflow-y: scroll !important;
    padding: 5px;
}
#chatTextBox{
    resize: none;
    width: 65%;
    height: 35px !important;
    float: left;
    opacity: .9;
}
#chatControls{
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
}
#chatSend{
    resize: none !important;
    width: 50%;
    height: 35px !important;
    display: inline-block;
    max-width: 30%;
    float: right;
    opacity: .9;
    padding: 5px;
}


.chatUsername{
    color: red;
    font-weight: bold;
}
.botMan{
    color: #424242;
    font-weight: bold;
}



var canned = ["Ok, how is this?" , "You're welcome!"]

$(function() {

  // grab a reference to the chat
  var chat = $("#chatContainer")

  // add a click handler to send messages
  $("#chatSend").click(function() {

    var username = "<span class=chatUsername>CNN_News: </span>"
      , newMessage = $("#chatTextBox").val() + '<br>'
      , delay = 4000

    // reset the input
    $("#chatTextBox").val("")

    // render the chat
    chat.append(username + newMessage)
    chat.scrollTop(chat.prop("scrollHeight"))

    // set a timeout to send a canned response

    setTimeout(function() {
      chat.append('<span class=botMan>StarkFan: </span>' + 
canned.shift() + '<br>')
      chat.scrollTop(chat.prop("scrollHeight"))
    }, delay)

  // end of click handler
  })
})















var final_transcript = '';
var recognizing = false;

if ('webkitSpeechRecognition' in window) {

  var recognition = new webkitSpeechRecognition();

  recognition.continuous = true;
  recognition.interimResults = true;

  recognition.onstart = function() {
    recognizing = true;
  };

  recognition.onerror = function(event) {
    console.log(event.error);
  };

  recognition.onend = function() {
    recognizing = false;
  };

  recognition.onresult = function(event) {
    var interim_transcript = '';
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    final_transcript = capitalize(final_transcript);
    final_span.innerHTML = linebreak(final_transcript);
    interim_span.innerHTML = linebreak(interim_transcript);

  };
}

var two_line = /\n\n/g;
var one_line = /\n/g;
function linebreak(s) {
  return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
}

function capitalize(s) {
  return s.replace(s.substr(0,1), function(m) { return m.toUpperCase(); });
}

function startDictation(event) {
  if (recognizing) {
    recognition.stop();
    return;
  }
  final_transcript = '';
  recognition.lang = 'en-US';
  recognition.start();
  final_span.innerHTML = '';
  interim_span.innerHTML = '';
}

Answer 1

看来您可以修改网站上给出的示例以满足您的需要:http://www.labnol.org/software/add-speech-recognition-to-website/19989/

  function startDictation() {

    if (window.hasOwnProperty('webkitSpeechRecognition')) {

      var recognition = new webkitSpeechRecognition();

      recognition.continuous = false;
      recognition.interimResults = false;

      recognition.lang = "en-US";
      recognition.start();

      recognition.onresult = function(e) {
         // commented out the old commands, your new command is below these comments
         // document.getElementById('transcript').value = e.results[0][0].transcript;
         // recognition.stop();
         // document.getElementById('labnol').submit();
         $("#chatTextBox").val(e.results[0][0].transcript); // set the input val to the speech transcript
      };

      recognition.onerror = function(e) {
        recognition.stop();
      }

    }
  }

如果这不起作用，我们可以通过打印results 的内容来尝试调试。