How to add voice search in website

<html lang="en">
<head>
  <title>How to add voice search in website</title>
<style>
#search-form {
    max-width: 300px;
    padding:0 7px;
    margin: 0;
    border-radius: 4px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #search-form input {
    width: 80%;
    border: 0;
    outline: none;
    background: transparent;
  }
  #search-form img {
    float: right;
    width: 40px;
  }
</style>
</head>
<body>
  <p>This is a demo of how voice search looks on your WordPress or blogger blog. </p>
<form id="search-form" method="get" action="/search" target="_blank">
    <input type="text" name="q" placeholder="Search Here.." />
    <img onclick="vSearch()" src="https://i.imgur.com/Qeh3TLJ.png" />
</form>

recognition.onresult = function (e) {
        document.querySelector('#search-form input').value = e.results[0][0].transcript;
        recognition.stop();
        document.querySelector('#search-form').submit();
      };

recognition.onerror = function (e) {
        recognition.stop();
      };
    }
  }
</script>
  </body>
</html>

How to add voice search in website

You may like these posts :

Write Your Comment