How to add Free Voice Translator to A Chat Bot?

\n<p>At first you have to go to <a href=\"https://responsivevoice.org/\" target=\"_blank\" rel=\"noreferrer noopener\">https://responsivevoice.org/ </a> and sign up for a free account. Then import the javascript file to your project</p>\n\n\n\n<pre class=\"wp-block-code\"><code> <script src=\"https://code.responsivevoice.org/responsivevoice.js\"></script>\n</code></pre>\n\n\n\n<h2 class=\"wp-block-heading\">Now we will create a function called handleSubmit()</h2>\n\n\n\n<p>The objective of this function is to Retrieve User Input, Validate Input, Display User's Message, Send Message to Server, Process Server Response, Speak the Assistant's Response, Scroll Chat to Bottom, Clear Input Field.</p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Get the User's Message:</strong></h2>\n\n\n\n<pre class=\"wp-block-code\"><code>var userMessage = document.getElementById('userMessage').value;\nif (!userMessage) return; // Prevent empty submissions\n</code></pre>\n\n\n\n<h2 class=\"wp-block-heading\">Display the User's Message:</h2>\n\n\n\n<pre class=\"wp-block-code\"><code>var chatMessages = document.getElementById('chat-messages');\n\nvar userDiv = document.createElement('div');\nuserDiv.className = 'message user';\nuserDiv.textContent = userMessage;\nchatMessages.appendChild(userDiv);\n</code></pre>\n\n\n\n<ul>\n<li>Gets the element that contains the chat messages (<code>chatMessages</code>).</li>\n\n\n\n<li>Creates a new <code>div</code> element (<code>userDiv</code>) for the user's message.</li>\n\n\n\n<li>Sets the class of this <code>div</code> to <code>message user</code> for styling purposes.</li>\n\n\n\n<li>Sets the text content of this <code>div</code> to the user's message.</li>\n\n\n\n<li>Appends this <code>div</code> to the <code>chatMessages</code> container, so the user's message is displayed in the chat.</li>\n</ul>\n\n\n\n<h2 class=\"wp-block-heading\">Send the User's Message to the Server:</h2>\n\n\n\n<pre class=\"wp-block-code\"><code>fetch('', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n body: 'userMessage=' + encodeURIComponent(userMessage)\n})\n.then(response => response.json())\n.then(data => {\n</code></pre>\n\n\n\n<ul>\n<li>Uses the <code>fetch</code> API to send a POST request to the server.</li>\n\n\n\n<li>The request headers specify that the content type is <code>application/x-www-form-urlencoded</code>.</li>\n\n\n\n<li>The body of the request contains the user's message, URL-encoded for safe transmission.</li>\n\n\n\n<li>The response is then parsed as JSON.</li>\n</ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Display the Assistant's Response:</strong></h2>\n\n\n\n<pre class=\"wp-block-code\"><code>var assistantDiv = document.createElement('div');\nassistantDiv.className = 'message assistant';\nassistantDiv.innerHTML = data.message.replace(/\\n/g, '<br>'); // Replace line breaks with <br> tags\nchatMessages.appendChild(assistantDiv);\n</code></pre>\n\n\n\n<ul>\n<li>Creates a new <code>div</code> element (<code>assistantDiv</code>) for the assistant's response.</li>\n\n\n\n<li>Sets the class of this <code>div</code> to <code>message assistant</code> for styling purposes.</li>\n\n\n\n<li>Sets the HTML content of this <code>div</code> to the assistant's response, replacing any newline characters with <code><br></code> tags to preserve line breaks.</li>\n\n\n\n<li>Appends this <code>div</code> to the <code>chatMessages</code> container, so the assistant's response is displayed in the chat.</li>\n</ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Speak the Assistant's Response (Optional):</strong></h2>\n\n\n\n<pre class=\"wp-block-code\"><code>responsiveVoice.speak(data.message, \"Hindi Male\"); // You can change the voice as needed\n</code></pre>\n\n\n\n<ul>\n<li>Uses the ResponsiveVoice library to speak the assistant's response aloud.</li>\n\n\n\n<li>The response text is taken from <code>data.message</code>.</li>\n\n\n\n<li>The voice used is \"Hindi Male,\" but this can be changed to any available voice in the ResponsiveVoice library.</li>\n</ul>\n\n\n\n<h2 class=\"wp-block-heading\">Scroll to the Bottom of the Chat:</h2>\n\n\n\n<pre class=\"wp-block-code\"><code>chatMessages.scrollTop = chatMessages.scrollHeight;</code></pre>\n\n\n\n<p>Ensures that the chat container scrolls to the bottom so that the latest messages are visible.</p>\n\n\n\n<h2 class=\"wp-block-heading\">Clear the Input Field:</h2>\n\n\n\n<pre class=\"wp-block-code\"><code>document.getElementById('userMessage').value = '';\n</code></pre>\n\n\n\n<p>Clears the input field for the next message.</p>\n\n\n\n<h2 class=\"wp-block-heading\">Complete Code</h2>\n\n\n\n<pre class=\"wp-block-code\"><code>function handleSubmit() {\n var userMessage = document.getElementById('userMessage').value;\n if (!userMessage) return; // Prevent empty submissions\n var chatMessages = document.getElementById('chat-messages');\n\n var userDiv = document.createElement('div');\n userDiv.className = 'message user';\n userDiv.textContent = userMessage;\n chatMessages.appendChild(userDiv);\n\n // Use fetch to send the POST request\n fetch('', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n body: 'userMessage=' + encodeURIComponent(userMessage)\n })\n .then(response => response.json())\n .then(data => {\n var assistantDiv = document.createElement('div');\n assistantDiv.className = 'message assistant';\n assistantDiv.innerHTML = data.message.replace(/\\n/g, '<br>'); // Replace line breaks with <br> tags\n chatMessages.appendChild(assistantDiv);\n\n // Speak the assistant's response using ResponsiveVoice\n \n responsiveVoice.speak(data.message, \"Hindi Male\"); // You can change the voice as needed\n\n\n // Scroll to the bottom of the chat messages container\n chatMessages.scrollTop = chatMessages.scrollHeight;\n });\n document.getElementById('userMessage').value = '';\n }</code></pre>\n\n\n\n<h2 class=\"wp-block-heading\">Final HTML CODE</h2>\n\n\n\n<pre class=\"wp-block-code\"><code><div class=\"chat-container\">\n <div class=\"chat-header\">Chat with Panda AI</div>\n <div class=\"chat-messages\" id=\"chat-messages\">\n <?php foreach ($conversation as $message): ?>\n <?php if ($message['role'] !== 'system'): ?>\n <div class=\"message <?php echo $message['role']; ?>\">\n <?php echo $message['content']; ?>\n </div>\n <?php endif; ?>\n <?php endforeach; ?>\n </div>\n <form id=\"chat-form\" class=\"chat-input\" method=\"POST\">\n <select id=\"language\" class=\"chat-input input\">\n <option value=\"en-US\">English</option>\n <option value=\"hi-IN\">Hindi</option>\n \n \n </select>\n \n\n <button type=\"button\" id=\"voice-button\" onmousedown=\"startRecording()\" onmouseup=\"stopRecording()\"><i class=\"fa-solid fa-microphone\"></i></button>\n\n\n <input type=\"text\" class=\"chat-input\" name=\"userMessage\" id=\"userMessage\" placeholder=\"Type your message or speak...\" required>\n <button type=\"submit\"><i class=\"fa-regular fa-paper-plane\"></i></button>\n </form>\n </div></code></pre>\n