Text to Speech

By ThemePackNet
mofizul21 · Jan 26, 2017 · 1391cc1 · 1391cc1
1 parent 44b4812
commit 1391cc1
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 0 deletions.
diff --git a/Text to Speech Converter/index.html b/Text to Speech Converter/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Text to speech converter in JS</title>
+		<meta name="themepack.net">
+		<link rel="stylesheet" href="style.css">
+	</head>
+	<body>
+		<div class="container">
+			<h3>Text to speech converter in JS</h3>
+			<textarea id="myText">Hello, this is Mofizul from themepack.net. Today we are learning the text to speech converter in JS</textarea>
+			<label>
+				<span>Voice</span>
+				<select id="voiceOptions"></select>
+			</label>
+			<label>
+				<span>Volume</span>
+				<input type="range" id="volumeSlider" min="0" max="1" value="0.5" step="0.1" />
+			</label>
+			<label>
+				<span>rate</span>
+				<input type="range" id="rateSlider" min="0" max="1" value="0.5" step="0.1" />
+			</label>
+			<label>
+				<span>Pitch</span>
+				<input type="range" id="pitchSlider" min="0" max="2" value="0.5" step="0.1" />
+			</label>
+			<div class="button" onclick="speak();">Speak</div>
+		</div>
+		<script src="main.js"></script>
+
+	</body>
+</html>
diff --git a/Text to Speech Converter/main.js b/Text to Speech Converter/main.js
@@ -0,0 +1,41 @@
+function checkCompatibilty () {
+				if(!('speechSynthesis' in window)){
+					alert('Your browser is not supported. If google chrome, please upgrade!!');
+				}
+			};
+
+			checkCompatibilty();
+
+			var voiceOptions = document.getElementById('voiceOptions');
+			var volumeSlider = document.getElementById('volumeSlider');
+			var rateSlider = document.getElementById('rateSlider');
+			var pitchSlider = document.getElementById('pitchSlider');
+			var myText = document.getElementById('myText');
+
+			var voiceMap = [];
+
+			function loadVoices () {
+				var voices = speechSynthesis.getVoices();
+				for (var i = 0; i < voices.length; i++) {
+					var voice = voices[i];
+					var option = document.createElement('option');
+					option.value = voice.name;
+					option.innerHTML = voice.name;
+					voiceOptions.appendChild(option);
+					voiceMap[voice.name] = voice;
+				};
+			};
+
+			window.speechSynthesis.onvoiceschanged = function(e){
+				loadVoices();
+			};
+
+			function speak () {
+				var msg = new SpeechSynthesisUtterance();
+				msg.volume = volumeSlider.value;
+				msg.voice = voiceMap[voiceOptions.value];
+				msg.rate = rateSlider.value;
+				msg.Pitch = pitchSlider.value;
+				msg.text = myText.value;
+				window.speechSynthesis.speak(msg);
+			};
diff --git a/Text to Speech Converter/style.css b/Text to Speech Converter/style.css
@@ -0,0 +1,44 @@
+body{
+				background: #f6f6f6;
+			}
+			.container{
+				background: #f6f6f6;
+				position: absolute;
+				top:50%;
+				left:50%;
+				transform: translateX(-50%) translateY(-50%);
+				width: 400px;
+				padding:20px;
+				box-shadow: 0 0 10px 0 #ccc;
+			}
+			.container textarea{
+				width: 390px;
+				height: 100px;
+				resize: none;
+				outline: none;
+				border: 1px solid #ccc;
+			}
+			.container label{
+				display: block;
+				width: 400px;
+			}
+			.container label span{
+				width: 100px;
+				margin-top: 20px;
+				display: inline-block;
+			}
+			.container label select, .container label input{
+				width: 290px;
+			}
+			.button{
+				display: inline-block;
+				background: #f6f6f6;
+				padding: 10px 20px;
+				color: #000;
+				border: 1px solid #ccc;
+				cursor: pointer;
+				margin-top: 20px;
+			}
+			.button:hover{
+				box-shadow: 4px 4px 10px 0 #ccc;
+			}