Question

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

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

    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函数有效（当我手动调用该函数时，它会将内容粘贴到usercomment textarea。但我如何更改代码，以便在textarea中动态粘贴已识别的输出？

谢谢！

Answer 1

获取innerHTML的{{1}}并将其div应用于value（ demo ）：

textarea

或jQuery方式：

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

txt.value = div.innerHTML;

被修改

如果$("#usercomment").val($("#transcript").html());是您想要追加的识别结果字符串，请执行以下操作：

final_transcript

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

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

已编辑2

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

您可以阅读var txt = $("#usercomment"); txt.val(txt.val() + final_transcript);函数here

的内容

Answer 2

使用 jQuery

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

或

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

P.S。对不起我起初误解了，我现在编辑了。

将一个div的结果复制到textarea-div

2 个答案:

被修改

已编辑2