Hello Reader!, This blog is an example of a simple “Text to Speech” application. It allows the user to input text into a textarea and then click a button to hear the text spoken aloud in Hindi.
The HTML includes the necessary elements for the application, such as the textarea for input and the button to trigger the text-to-speech functionality. The CSS styles the page, creating a clean and visually appealing interface.
The JavaScript code is what makes the text-to-speech functionality possible. It uses the Web Speech API to create a new SpeechSynthesisUtterance object, which is responsible for converting text to speech. The code sets the language and voice for the utterance, and then adds an event listener to handle any errors that may occur during the speech synthesis process.
Overall, this code is a great example of how web developers can utilize the Web Speech API to create powerful and useful applications for users.
Video Tutorial of Text To Speech Converter
To see a live demonstration of the Text To Speech Converter, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
You may like this:
- Colorful Rain Animation Effects
- Draggable Slider Tab
- Random Color Palette Generator
- Sticky Navbar With Parallax Effect
- Word Counter
- Working Google Search Engine
Text To Speech Converter
HTML:
Create a new file with the name “index.html” and add the provided code to it. Ensure the file has a “.html” extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text To Speech</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<h1>Text to Speech</h1>
<h3>Enter Text</h3>
<textarea id="text"></textarea>
<button id="speak">Speak</button>
</div>
</body>
</html>
This is the basic structure of a web page for a “Text to Speech” application. It includes HTML tags such as <html>, <head>, <meta>, and <body>. The head section includes character encoding and a title, while the body section has a container with a header, a text area for input, and a button to initiate speech. There is also a link to an external CSS file to provide styling to the page. The functionality of the application is not included in this code.
CSS:
Create a new CSS file name “style.css” and copy the provide code into it. Ensure that the file has a “.css” extension.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Poppins;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #94d2bd;
}
.container{
text-align: center;
padding: 20px;
background: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, .3);
border-radius: 10px;
}
h1{
margin-bottom: 20px;
letter-spacing: 1px;
}
h3{
font-weight: 500;
text-align: left;
font-size: 18px;
margin-bottom: 10px;
}
textarea{
width: 100%;
height: 200px;
margin-bottom: 20px;
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 5px;
resize: none;
outline: none;
}
button{
background: #94d2bd;
color: #fff;
padding: 10px 50px;
border: none;
outline: none;
font-size: 16px;
cursor: pointer;
letter-spacing: 1px;
border-radius: 5px;
box-shadow: 2px 5px 5px rgba(0, 0, 0, .1);
}
This is the CSS styling code for the “Text to Speech” application. It includes a general style setting for all elements, setting the margin and padding to 0, using the border-box model, and specifying the font family as “Poppins”. The body is set to a flex display, with the container centered both horizontally and vertically using justify-content and align-items properties. The container has a text alignment center, a padding of 20px, a white background, a 20px box-shadow, and a 10px border radius. The header h1 has a 20px margin-bottom and 1px letter-spacing.
The h3 has a font-weight of 500, a font-size of 18px, and a 10px margin-bottom. The text area has a width of 100%, a 200px height, a 20px margin-bottom, a 10px padding, a font-size of 16px, a 2px solid border, and a 5px border radius. The button has a background color of #94d2bd, a white color, a 10px padding on top and bottom, a 50px padding on the sides, no border or outline, a font size of 16px, a pointer cursor, a 1px letter-spacing, a 5px border radius, and a box shadow of 2px 5px 5px rgba(0, 0, 0, .1).
JavaScript:
In between the <body></body> tags, you can include JavaScript code by enclosing it within <script> tags.
const text = document.getElementById('text');
const speakButton = document.getElementById('speak');
let speechSynthesis = window.speechSynthesis;
let utterance = new SpeechSynthesisUtterance();
utterance.lang = 'hi-IN';
utterance.voice = speechSynthesis.getVoices().find(voice => voice.lang === 'hi-IN');
speakButton.addEventListener('click', () =>{
if(speechSynthesis.speaking){
speechSynthesis.cancel();
}
utterance.text = text.value;
speechSynthesis.speak(utterance);
});
utterance.addEventListener('error', () =>{
console.error('Speech Synthesis error');
});
This section of the code sets up an event listener for the “Speak” button that triggers text-to-speech functionality. It first selects the “text” textarea and the “speak” button using their IDs. It then creates a new SpeechSynthesisUtterance object and sets the language and voice to be used (in this case, the language is set to Hindi and the voice is selected based on the language). When the “Speak” button is clicked, the code checks if speech is already being generated, and if so, cancels it. The text value is then assigned to the utterance object and speech is generated using speechSynthesis.speak(utterance). If an error occurs during speech synthesis, an error message is printed to the console.
Conclusion:
This is a web page that allows users to enter text and convert it to speech using the device’s text-to-speech capabilities. The page has a container with a header, a text area for entering text, and a button to initiate the speech synthesis. The script uses the Web Speech API to synthesize speech and allows the user to select the language. The CSS provides styling for the elements on the page, including a responsive layout, a form-like design, and a soft color scheme.
