Javascript Speech Synthesis - Voicenator
close
Javascript Speech Synthesis - Voicenator

Javascript Speech Synthesis - Voicenator

Javascript Speech Synthesis - Voicenator

Do you know what is speech synthesizer I think you haven't hear this word before but from now you will be familiar with this word.

Speech synthesizer is a technique or program that allows you to input a text and a computer will automatically synthesise it or read it.

You just have to enter your text and your computer will read it aloud.

To make the stool for you just have to select the language of men or women define its pitch and enter a text which you want to synthesise and then click the button which is provided right after that textbox.

How do you do friends today we are going to design Javascript Speech Synthesis. As you know the HTML markup is necessary for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.


Save It As index.html :

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Javascript Speech Synthesis - Voicenator</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Works best in Chrome! -->
<div class="voiceinator">
<h1>Javascript Speech Synthesis - Voicenator</h1>
<select name="voice" id="voices">
<option value="">Select A Voice</option>
</select>
<label for="rate">Rate:</label>
<input name="rate" type="range" min="0" max="3" value="1" step="0.1">
<label for="pitch">Pitch:</label>
<input name="pitch" type="range" min="0" max="2" step="0.1">
<textarea name="text" placeholder="Start typing...">Hello! I love JavaScript. </textarea>
<button id="stop">Stop</button>
<button id="speak">Speak</button>
</div>
<script
src="js/index.js"></script>
</body>
</html>


Our HTML markup was quit simple and easy you can see it above. Now it's turn for CSS.
Without CSS our this script (Javascript Speech Synthesis) will never look angelic. So here we are, our HTML markup is ready now we have to customize our HTML and it can be done using CSS.


So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new folder called css and put this file to that folder.


Save It As style.css :

@import url("https://fonts.googleapis.com/css?family=PT+Sans");

html {
  font-size: 10px;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: "PT Sans", sans-serif;
  background-color: #d5d9e5;
  color: #292b2c;
  display: flex;
  min-height: 100vh;
  align-items: center;
}

.voiceinator {
  padding: 2rem;
  width: 50rem;
  margin: 0 auto;
  border-radius: 1rem;
  position: relative;
  background: #fff;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
}

h1 {
  width: calc(100% + 4rem);
  margin: 0 0 2rem -2rem;
  padding: .5rem;
  text-align: center;
  font-size: 4rem;
  font-weight: 100;
  font-family: "PT Sans", sans-serif;

}

.voiceinator input,
.voiceinator button,
.voiceinator select,
.voiceinator textarea {
  width: 100%;
  display: block;
  margin: 10px 0;
  padding: 10px;
  font-size: 2rem;
  background: #fbfbfc;
  outline: 0;
  font-family: "PT Sans", sans-serif;
  border: 1px solid #c8c7cb;
  border-radius: 2px;
}

label {
  font-size: 2rem;
}

textarea {
  height: 20rem;
}

.voiceinator button {
  background: #72a3da;
  color: #fff;
  border: 0;
  width: 49%;
  float: left;
  font-family: "PT Sans", sans-serif;
  margin-bottom: 0;
  font-size: 2rem;
  cursor: pointer;
  position: relative;
}

.voiceinator button:active {
  top: 2px;
}

.voiceinator button:nth-of-type(1) {
  margin-right: 2%;
}

input[type=range] {
  -webkit-appearance: none;
  border: 1px solid transparent;
  padding-top: 8px;
  background: #fff;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 5px;
  background: #e1e1e3;
  border: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #72a3da;
  margin-top: -4px;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

input[type=range]::-moz-range-track {
  height: 5px;
  background: #e1e1e3;
  border: none;
}

input[type=range]::-moz-range-thumb {
  border: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #72a3da;
}

input[type=range]:-moz-focusring {
  outline: 1px solid #dcdde2;
  outline-offset: -1px;
}

.voiceinator select {
  display: inline-block;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  outline: none;
  background: #fbfbfc url("data:image/svg+xml;utf8,") right 5px center no-repeat;
  padding: 10px 40px 10px 10px;
}

select::-ms-expand {
  display: none;
}


You can make the customisation in CSS code as you want.
So we have written HTML markup and customised it and now we will add some functionality in this project (Javascript Speech Synthesis).


To make this project (Javascript Speech Synthesis) work properly for that we will use JavaScript.


So here is a JavaScript for our project (Javascript Speech Synthesis) and also save it with the filename as provided. Make a new folder called js and put this file to that folder.


Save It As index.js :

const msg = new SpeechSynthesisUtterance();
let voices = [];
const voicesDropdown = document.querySelector('[name="voice"]');
const options = document.querySelectorAll('[type="range"], [name="text"]');
const speakButton = document.querySelector('#speak');
const stopButton = document.querySelector('#stop');
msg.text = document.querySelector('[name="text"]').value;

function populateVoices() {
  voices = this.getVoices();
  voicesDropdown.innerHTML = voices
    .filter(voice => voice.lang.includes('en'))
    .map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
    .join('');
}

function setVoice() {
  msg.voice = voices.find(voice => voice.name === this.value);
  toggle();
}

function toggle(startOver = true) {
  speechSynthesis.cancel();

  if(startOver) {
    speechSynthesis.speak(msg);
  }
}

function setOption() {
  console.log(this.name, this.value);
  msg[this.name] = this.value;
  toggle();
}

speechSynthesis.addEventListener('voiceschanged', populateVoices);
voicesDropdown.addEventListener('change', setVoice);
options.forEach(option => option.addEventListener('change', setOption));
speakButton.addEventListener('click', toggle);
stopButton.addEventListener('click', () => toggle(false));

This speech synthesizer app will work using speech recognition or speech synthesizer API and it will work best in Google Chrome.


Result :

So here we are, We have done and our project Javascript Speech Synthesis is ready now you can save all the files as provided.
Like CSS files in css folder and JavaScript files in a JS folder name. Below is folder tree of the files and folders of this project.


  • Javascript Speech Synthesis
    • css
      • style.css
    • js
      • index.js
    • index.html


Download Project (Javascript Speech Synthesis) File :

Javascript Speech Synthesis.zip
File Size 3.6 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.


That's it guys if you face any difficulty while running this project you can simply write a comment below I will try to answer it as soon as possible and keep visiting this site for more this kind of tutorials.


Thank you !



Disqus Codes

No comments

Notifications

Disqus Logo