JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<form action="http://www.google.com/search">
    <input type="search" name="q" speech />
    <input type="image" name="speech" id="speech" src="http://uxrepo.com/static/icon-sets/mfg-labs/svg/mic.svg" />
</form>

<div id="output"></div>

CSS

#speech {
    height: 10px;
    width: 10px;
}

JavaScript

$(function() {
   var recognition = new SpeechRecognition();
    recognition.onresult = function(e) {
      $("output").text(e.results[0][0].transcript);  
    };
    
    $("#speech").click(function(e) {
        recognition.start();
    });
});

function startSearch(event) {
    alert("searched");
}