voice search to Blogger sidebar

<style> #search-form { max-width: 300px; .adding: 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> <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> <script> function vSearch() { if(window.hasOwnProperty('webkitSpeechRecognition')) { let recognition = new webkitSpeechRecognition(); recognition.lang = 'en-US'; recognition.start(); 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>