Add text by voice to

[mdykstra]

I saw this in an app I use and thought it was a great idea. You click the microphone on the bottom right and it starts dictation. I know it uses Google and Apple’s dictation services, but not sure how they made it work. Any ideas?

[moe]

It’s actually not as complex as you might expect. I’m sure there are easy ways of making it look better.

https://localtest.tadabase.io/speech-recognition#!/speech-recognition

But very rough idea:

1. Inside your form add HTML with the following code:
   <p><span id="speech" class="ready">Record</span></p>

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
}

Inside the JS of this page paste this in.

Make sure you change the LongText Field ID in the code and the component id.

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";
  }
}
});

[brettlewis]

That’s very neat.

[mdykstra]

Thank you @moe I’ll give it shot!