How to use speech recognition in HTML CSS And PHP Project?

<!-- wp:paragraph -->\n<p>In this project we will discuss about the method of using speech recognition in HTML CSS And PHP Project.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":5215,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img class=\"wp-image-5215\" src=\"https://academy.webotapp.com/wp-content/uploads/2024/06/speech-recognition-1024x677.png\" alt=\"speech recognition in HTML CSS And PHP Project\" /></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\"><strong>Speech Recognition Initialization:</strong></h2>\n<!-- /wp:heading -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>var recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)();\n</code></pre>\n<!-- /wp:code -->\n\n<!-- wp:paragraph -->\n<p>This line creates a new instance of the <code>SpeechRecognition</code> object, which is supported by different browser-specific implementations (e.g., <code>webkitSpeechRecognition</code> for Chrome).</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\"><strong>Default Configuration:</strong></h2>\n<!-- /wp:heading -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>recognition.lang = 'en-US'; // Default language\nrecognition.interimResults = false;\nrecognition.maxAlternatives = 1;\n</code></pre>\n<!-- /wp:code -->\n\n<!-- wp:paragraph -->\n<p>These lines set the default properties for the <code>recognition</code> object:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><!-- wp:list-item -->\n<li><code>lang</code>: The language for speech recognition is set to US English.</li>\n<!-- /wp:list-item -->\n\n<!-- wp:list-item -->\n<li><code>interimResults</code>: When <code>false</code>, it ensures that only final results are returned, not intermediate results.</li>\n<!-- /wp:list-item -->\n\n<!-- wp:list-item -->\n<li><code>maxAlternatives</code>: Limits the number of alternative recognition results to 1.</li>\n<!-- /wp:list-item --></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\"><strong>Language Change Event Listener:</strong></h2>\n<!-- /wp:heading -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>document.getElementById('language').addEventListener('change', function() {\n recognition.lang = this.value;\n});\n</code></pre>\n<!-- /wp:code -->\n\n<!-- wp:paragraph -->\n<p>This part adds an event listener to an HTML element with the id <code>language</code>. When the value of this element changes (e.g., when a user selects a different language from a dropdown menu), the <code>recognition.lang</code> property is updated to the new value.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\"><strong>Start Recording Function:</strong></h2>\n<!-- /wp:heading -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>function startRecording() {\n console.log('Start recording');\n recognition.start();\n}\n</code></pre>\n<!-- /wp:code -->\n\n<!-- wp:paragraph -->\n<p>This function starts the speech recognition process. When called, it logs \"Start recording\" to the console and then calls the <code>start</code> method on the <code>recognition</code> object.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\"><strong>Stop Recording Function:</strong></h2>\n<!-- /wp:heading -->\n\n<!-- wp:preformatted -->\n<pre class=\"wp-block-preformatted\">function stopRecording() {<br /> console.log('Stop recording');<br /> recognition.stop();<br />}</pre>\n<!-- /wp:preformatted -->\n\n<!-- wp:paragraph -->\n<p>This function stops the speech recognition process. When called, it logs \"Stop recording\" to the console and then calls the <code>stop</code> method on the <code>recognition</code> object.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">Complete Javascript Code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>var recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)();\n recognition.lang = 'en-US'; // Default language\n recognition.interimResults = false;\n recognition.maxAlternatives = 1;\n\n document.getElementById('language').addEventListener('change', function() {\n recognition.lang = this.value;\n });\n\n function startRecording() {\n console.log('Start recording');\n recognition.start();\n }\n\n function stopRecording() {\n console.log('Stop recording');\n recognition.stop();\n }\n \nrecognition.onresult = function(event) {\n var speechResult = event.results[0][0].transcript;\n console.log('Recognition result:', speechResult);\n document.getElementById('userMessage').value = speechResult;\n\n // Call the function that handles the form submission\n handleSubmit();\n };\n</code></pre>\n<!-- /wp:code -->