如何將語音捕獲的文本放入文本字​​段

Question

這是一個複雜的問題，但這裏有。我建立了一個jQuery的聊天功能，我在textfield標籤中輸入內容並點擊發送，然後進入聊天框。完成了。

我剛剛發現一個語音文本庫使用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內容嘗試調試。