Cool Little Script in JS, Hope you enjoy!

Please use this forum to discuss anything you want to.
Forum rules
Please be careful about sharing personal information. Never use any identifiable information.
Post Reply
User avatar
Orest
New User
Posts: 4
Joined: 31 Aug 2018, 14:40

Cool Little Script in JS, Hope you enjoy!

Post by Orest » 20 Mar 2019, 16:39

Alright Dear people, as you may know, JavaScript, like Python, C++, and other languages can be used for almost any purpose. For web usage, it is usually JS that is used. So, I decided to make a small project, about 150 lines of code long, in HTML-CSS-JS. The CSS here is as basic as it gets, as you can see, and the HTML, well, HTML isn't even really a programming language. It is mostly JS that is used, and it just includes a WebKit, and the rest is history. So, drop this into your code editor, PHPStorm, WebStorm, VSCode, whatever, and run it in LocalHost. This should give you the best results. It can be uploaded, but don't take other's code without citing it.

Code: Select all


<!DOCTYPE html>
<html>
	<head>
		<title>Speech to text converter in JS</title>
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.min.css" />
		<style type="text/css">
			body
                        {
				font-family: verdana;
			}

			#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%;
			}
		</style>
	</head>
	<body>
		<h4 align="center">Speech to text converter in JS</h4>
		<div id="result"></div>
		<button onclick="startConverting();"><i class="fa fa-microphone"></i></button>
		<script type="text/javascript">

			var r = document.getElementById('result');

			function startConverting () 
			{
				if('webkitSpeechRecognition' in window)
				{
					var speechRecognizer = new webkitSpeechRecognition();
					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;
							}
						}
						r.innerHTML = finalTranscripts + '<span style="color:#999">' + interimTranscripts + '</span>';
					}
					speechRecognizer.onerror = function (event)
					{

					}
				}
				else
				{
					r.innerHTML = 'Your browser is not supported. If google chrome, please upgrade!';
				}
			}

			

		</script>
	</body>
</html>

~Orest Brykowytch, Grade 9. (C++ will forever be better than any other language tho.....)

Have a great one!
1 x

Tags:

User avatar
Mr. MacKenty
Site Admin
Posts: 88
Joined: 28 Apr 2018, 17:06
Answers: 3

Re: Cool Little Script in JS, Hope you enjoy!

Post by Mr. MacKenty » 20 Mar 2019, 19:43

This is so cool!

Thank you for sharing, and I can't wait to test this out. It uses a webkit speech-to-text library??
0 x

User avatar
Orest
New User
Posts: 4
Joined: 31 Aug 2018, 14:40

Re: Cool Little Script in JS, Hope you enjoy!

Post by Orest » 20 Mar 2019, 19:49

Indeed.
0 x

Post Reply