Esta es mi entrada de formulario html

 <form method="GET" action=""> {% csrf_token %} <button class="btn btn-primary" action="" style="background-color: dodgerblue;">Search</button> <input id="q" name="qq" type="text" placeholder="Enter search text here" style="width: 500px;">

Este es mi guión de voz a texto,

 <input type="text" name="" id="speechToText" placeholder="Speak Something" onclick="record()"> <!-- Below is the script for voice recognition and conversion to text--> <script> function record() { var recognition = new webkitSpeechRecognition(); recognition.lang = "en-GB"; recognition.onresult = function(event) { // console.log(event); document.getElementById('speechToText').value = event.results[0][0].transcript; } recognition.start(); } </script>

Obviamente quiero deshacerme del campo de texto secundario y envolver onclick="record()" con el botón de búsqueda principal como este.

 <input id="q" name="qq" type="text" placeholder="Enter search text here" style="width: 500px;" onclick="record()">

pero cuando hago esto, la voz a texto ya no funciona. ¿Qué estoy haciendo mal? También quiero agregar una lógica de que la voz a texto se activa solo cuando el usuario hace clic en un botón. Por favor, dé algunas soluciones. Gracias. Que tengas un buen dia.