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 関数は機能します (この関数を手動で呼び出すと、内容が usercomment テキストエリアに貼り付けられます。しかし、認識された出力をオンザフライでテキストエリアに貼り付けるには、コードをどのように変更する必要があるのでしょうか?

ありがとう！

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」を追加する必要があります。

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 に答える