1

我正在开发一个系统，该系统应该可以选择使用 Webspeech API 通过语音进行控制。我的问题或疑问是：如何将语音识别的结果（存储在“transcript-div”中）复制到“usercomment textarea-div”。就像用户说了什么一样，识别的字符串应该自动复制到用户评论中。

对应的代码行：
语音识别器：

    var recognition = new webkitSpeechRecognition();
    var final_transcript = '';
    var interim_transcript = '';
    var language = 'en-GB'; 

    recognition.continuous = true; // keep processing input until stopped
    recognition.interimResults = true; // show interim results
    recognition.lang = language; // specify the language

    recognition.onresult = function (event) {
        // Assemble the transcript from the array of results
        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;
            }
        }

        console.log("interim: " + interim_transcript);
        console.log("final: " + final_transcript);

        // update the web page
        if (final_transcript.length > 0) {
            $('#transcript').html(final_transcript);
        }

        if (interim_transcript.length > 0) {
            $('#interim').html(interim_transcript);
        }

出于调试目的，我创建了另一个 div，它显示了识别的短语。这是有效的！ 

<div id="console" style="margin-top: 100px;">  
<h3>Console:</h3>  
    <div id="transcript"></div>  
    <div id="interim"></div>  
</div>

现在应该将“transcript-Div”的内容复制到 usercomment -textarea-Div： 

<div id="UsercommentDiv" style="margin-top: 100px;">  
    <br> User Comment :<br> <textarea id="usercomment" style="width: 300px; height: 150px;" name="description" onLoad="fillUsercomment();"></textarea><br>
</div>

我试图通过以下功能做到这一点： 

function fillUsercomment(){
document.getElementById('usercomment').innerHTML = document.getElementById('transcript').innerHTML
}  
fillUsercomment();

fillUsercomment 函数有效（当我手动调用该函数时，它会将内容粘贴到用户注释文本区域。但是我必须如何更改代码，以便在文本区域中即时粘贴识别的输出？

谢谢！

4

2 回答 2

2

取innerHTML并将其div应用于( )：valuetextareademo

var div = document.getElementById("transcript");
var txt = document.getElementById("usercomment");

txt.value = div.innerHTML;

或jQuery方式：

$("#usercomment").val($("#transcript").html());

已编辑

如果final_transcript是要附加的识别结果字符串，这里：

// update the web page
if (final_transcript.length > 0) {
    $('#transcript').html(final_transcript);
}

您应该将“final_transcript”附加到 textarea 的值：

var txt = $("#usercomment");
txt.val(txt.val() + final_transcript);

已编辑 2

这是your updated fiddle（查看 JavaScript 的 17 行和 18 行）。

您可以在此处val()阅读功能的作用

于 2014-01-16T23:15:53.607 回答
1

使用jQuery

$("#usercomment").attr("value", $("#transcript").text() );

或者

 $("#usercomment").val( $("#transcript").text() );

PS对不起，我一开始误解了，我现在编辑了。

于 2014-01-16T23:02:27.953 回答