Add Speech Recognition to Your Form

Please note that this is now available as a plugin for easier installation. While you can use this document as a reference, the recommended method to add this functionality is through the plugin installation wizard. Learn more about plugins here. 

Add Speech Recognition to record your words into a text field with this customization. 

Step 1

Inside your form, add HTML with the following code:

<p><span id="speech" class="ready">Record</span></p>

Step 2

Inside your CSS of this page, add this code:

.recording {
    height: 50px;
    width: 50px;
    background-color: #DC143C;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer
}

.ready {
    height: 50px;
    width: 50px;
    background-color: #1E90FF;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer
}

Step 3

Add the following code to the JavaScript tab of the page. 

TB.render('component_CHANGE_TO_YOUR_ID', function(data) {

    document.getElementById("speech").addEventListener("click", toggleStartStop);
    //Change this ID to the text field you want to update: 
    var textarea = document.getElementById("fieldJawrRJr5kq");
    var button = document.getElementById("speech")


    var recognizing;
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = true;
    reset();
    recognition.onend = reset();

    recognition.onresult = function(event) {
        for (var i = event.resultIndex; i < event.results.length; ++i) {
            if (event.results[i].isFinal) {
                textarea.value += event.results[i][0].transcript;
            }
        }
    }

    function reset() {
        recognizing = false;
        button.innerHTML = "Record";
        button.className = "ready";
    }

    function toggleStartStop() {
        if (recognizing) {
            recognition.stop();
            reset();
        } else {
            recognition.start();
            recognizing = true;
            button.innerHTML = "Stop";
            button.className = "recording";
        }
    }
});

Remember to change your Component Id and Field ID to match your app. The location of these can be found in the images below.

Original Community Post

Add text by voice to - Community Discussions / How Do I - Tadabase Community