A Pen by M Fathurrohman Mauludin on CodePen.
Created
December 19, 2023 06:31
-
-
Save MFathurrohmanMauludin/27cbb6e8a0eb71dbe45494d243e7854e to your computer and use it in GitHub Desktop.
Speech to text Converter
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Speech to text Converter</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
| </head> | |
| <body> | |
| <h3 align="center">Speech to text converter JavaScript</h3> | |
| <div id="result"></div> | |
| <button onclick="startConverting();"><i class="fa fa-microphone btn btn-danger" aria-hidden="true"></i></button> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var result = document.getElementById('result'); | |
| function startConverting () { | |
| if('webkitSpeechRecognition' in window) { | |
| var speechRecognizer = new webkitSpeechRecognition(); | |
| speechRecognizer.continuous = true; | |
| speechRecognizer.interimResults = true; | |
| speechRecognizer.lang = 'en-US'; | |
| speechRecognizer.start(); | |
| var finalTranscripts = ''; | |
| speechRecognizer.onresult = function(event) { | |
| var interimTranscripts = ''; | |
| for(var i = event.resultIndex; i < event.results.length; i++){ | |
| var transcript = event.results[i][0].transcript; | |
| transcript.replace("\n", "<br>"); | |
| if(event.results[i].isFinal) { | |
| finalTranscripts += transcript; | |
| }else{ | |
| interimTranscripts += transcript; | |
| } | |
| } | |
| result.innerHTML = finalTranscripts + '<span style="color: #999">' + interimTranscripts + '</span>'; | |
| }; | |
| speechRecognizer.onerror = function (event) { | |
| }; | |
| }else { | |
| result.innerHTML = 'Your browser is not supported. Please download Google chrome or Update your Google chrome!!'; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| font-family: Open Sans; | |
| } | |
| #result{ | |
| height: 200px; | |
| border: 1px solid #ccc; | |
| padding: 10px; | |
| box-shadow: 0 0 10px 0 #bbb; | |
| margin-bottom: 30px; | |
| font-size: 14px; | |
| line-height: 25px; | |
| } | |
| button{ | |
| font-size: 20px; | |
| position: absolute; | |
| top: 240px; | |
| left: 50%; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment