- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Text to Voice conversion using Web Speech API of Google Chrome
Nowadays, the audiobook is more preferred by readers to reading books as they can grab knowledge while doing any work by listening to it. Also, some website adds the audio of the article in every article, so if users don’t want to read the article, they can listne to it.
To convert normal text to voice, we require to use the web speech api of Google Chrome. In this tutorial, we will learn to use the web speech API of Google Chrome to convert text to voice.
Syntax
Users can follow the syntax below to use the web speech API of Google Chrome for the text to voice conversion.
var synth = window.speechSynthesis; var speechOBj = new SpeechSynthesisUtterance(text); synth.speak(speechOBj);
In the above syntax, we have initialized the SpeechSynthesisUtterance() object and passed the text to speak as a parameter. After that, we have used the speak() method to speak the text.
Example 1
The example below demonstrates the basic use of the Google Chrome web speech API to convert text to voice. We have used the ‘textarea’ tag of the HTML to take the text input from the user.
In JavaScript, we access the text from the ‘textarea’ input field. After that, whenever users click the submit button, we initialize the new object of the SpeechSynthesisUtterance with the text value of the ‘textarea’ input field. Furthermore, we use the speak() method to convert text to voice which users can observe in the output.
<html>
<body>
<h3>Text to voice conversion using the Web speech API of Google Chrome</h3>
<div class = "container">
<textarea name = "text" id = "text" cols = "30" rows = "10"> Add text to Speak. </textarea>
<br> <br>
<button id = "speak"> Speak Text </button>
</div>
<script>
// Writing a javascript code to use web speech api to text to voice conversion
var synth = window.speechSynthesis;
var speak = document.getElementById("speak");
speak.addEventListener("click", () => {
var text = document.getElementById("text").value;
var speechOBj = new SpeechSynthesisUtterance(text);
synth.speak(speechOBj);
});
</script>
</body>
</html>
Example 2
The example below demonstrates the advanced use of the Google Chrome web speech API. Here, whenever the user clicks the button, it invokes the textToVoice() function, which converts text to voice. Also, it adds the rate and pitch value to the voice.
Furthermore, the setVoices() function sets all available voices of different regions in the dropdown menu options. Users can select any voice from the dropdown and change the voice.
Next, we have added the resume, pause, and cancel buttons to perform respective operations.
<html>
<head>
<style>
textarea {
border: 2px solid green;
width: 500px;
}
.controls {
margin-top: 10px;
}
</style>
</head>
<body>
<h3>Converting the text to voice using the <i> Web speech API </i> of Google Chrome.</h3>
<div class = "container">
<textarea name = "text" id = "text" cols = "30" rows = "10"> Add text to Speak. </textarea>
<div class = "controls">
<label for = "voice-select"> Voice </label>
<select name = "voice" id = "voice-select"> </select>
<br> <br>
<label for = "rate-select"> Rate </label>
<input type = "range" name = "rate" id = "rate-select" min = "0" max = "1" step = "0.1" value = "1">
<span id = "rate-value"> 10 </span>
<br> <br>
<label for = "pitch-select"> Pitch </label>
<input type = "range" name = "pitch" id = "pitch-select" min = "0" max = "2" step = "0.1" value = "1">
<span id = "pitch-value"> 10 </span>
<br> <br>
<button id = "btn">
Speak
</button>
<button id = "pause"> Pause </button>
<button id = "resume"> Resume </button>
<button id = "cancel"> Cancel </button>
</div>
<script>
// Accessing values
const textarea = document.getElementById('text');
const voice_select = document.getElementById('voice-select');
const rateSelect = document.getElementById('rate-select');
const pitchSelect = document.getElementById('pitch-select');
const rateval = document.getElementById('rate-value');
const pitchval = document.getElementById('pitch-value');
let button = document.getElementById('btn');
let pause = document.getElementById('pause');
let resume = document.getElementById('resume');
let cancel = document.getElementById('cancel');
// Initialize speech API
const speeachSynth = window.speechSynthesis;
let AllVoices = [];
function setVoices() {
AllVoices = speeachSynth.getVoices();
var string_op = "";
AllVoices.forEach(voice => {
var option = voice.name + ' - ' + voice.lang + ' - ';
var new_option = "<option data-name='" + voice.name +
"' data-lang='" + voice.lang + "'>" + option
+ "</option>
";
string_op += new_option;
});
voice_select.innerHTML = string_op;
}
speeachSynth.onvoiceschanged = function () {
setVoices();
};
function textToVoice() {
if (textarea.value !== '') {
// Creating a new speech object
const textToSpeak = new SpeechSynthesisUtterance(textarea.value);
//If there is an error while speaking, this function
textToSpeak.error = e => {
console.error('Error occurred...');
};
//Select voice from the dropdown
const id = voice_select.selectedIndex;
const selectedVoice =
voice_select.selectedOptions[0].getAttribute('data-name');
// set voice
AllVoices.forEach(voice => {
if (voice.name === selectedVoice) {
textToSpeak.voice = voice;
}
});
// select rate and pitch value
textToSpeak.rate = rateSelect.value;
textToSpeak.pitch = pitchSelect.value;
// speak the text
speeachSynth.speak(textToSpeak);
}
};
// update the values of rate and pitch
rateSelect.addEventListener('change', event => rateval.innerHTML
= (Number.parseFloat(rateSelect.value) * 10) + "");
pitchSelect.addEventListener('change', evt => pitchval.innerHTML
= (Number.parseFloat(pitchSelect.value) * 10) + "");
// call the textToVoice function when the button is clicked
button.addEventListener('click', e => {
e.preventDefault();
textToVoice();
});
// pause the speech
pause.addEventListener('click', e => {
e.preventDefault();
speeachSynth.pause();
});
// resume the speech
resume.addEventListener('click', e => {
e.preventDefault();
speeachSynth.resume();
});
// cancel the speech
cancel.addEventListener('click', e => {
e.preventDefault();
speeachSynth.cancel();
});
</script>
</body>
</html>
Users learned to convert the text to voice using the web speech API of Google Chrome. In the first example, we have seen the basic use of the web speech API, and in the second example, we have seen the advance use of the web speech API.
561 Views
