Learn how to implement text to speech in JavaScript using Speech Synthesis API. Follow our step-by-step guide and add this exciting feature to your website!
Table of Contents
Welcome to our guide on how to convert text to speech in JavaScript using the Speech Synthesis API. Text-to-speech technology has become increasingly popular, and implementing it on your website can improve the user experience and accessibility for users with hearing impairments or learning disabilities. In this guide, we will cover everything you need to know to add this exciting feature to your website. We'll start with an introduction to text-to-speech and its importance, followed by an overview of the Speech Synthesis API and its features and limitations.
The Speech Synthesis API is a web browser API that enables developers to generate speech from the text on a webpage. The API provides a range of settings that can be used to customize the speech output, such as voice, pitch, rate, and volume.
One of the key features of the Speech Synthesis API is that it is easy to use and requires only a few lines of code to get started. It is also supported by most modern web browsers, making it a reliable choice for adding text to speech functionality to a website.
However, there are some limitations to the Speech Synthesis API. For example, the available voices and languages depend on the user's operating system and browser. Additionally, the quality of the speech output can vary depending on the voice used, and some voices may not sound natural or be easy to understand.
Despite these limitations, the Speech Synthesis API remains a powerful tool for adding text to speech functionality to a website, and it can greatly enhance the user experience for many users.
When creating an application, you may want to enable text-to-speech features for accessibility, convenience, or some other reason. In this tutorial, we'll learn how to create a very simple JavaScript text-to-speech application using JavaScript's built-in Web Speech API.
Watch the full tutorial on my YouTube Channel: Watch Here.
Let's start making an amazing text-to-speech converter Using HTML, CSS, and JavaScript step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our text to speech converter.
The first line of the code, , declares the document type as HTML. This line is required for all HTML documents.
The html tag wraps around the entire document, and the lang attribute specifies the language of the document, in this case, English.
The head section contains meta information about the document, including the character encoding, which is set to UTF-8, and the viewport, which defines how the website should be displayed on different devices. It also includes a title tag which sets the title of the document, which appears on the tab of the browser.
In the head section, there is a link to an external stylesheet, which is used to define the visual styling of the document, and a script tag that includes an external JavaScript file. The type attribute in the script tag is set to "module" to indicate that the script uses ES6 modules.
The body section is where the actual content of the web page is contained. In this case, it consists of a div element with a class of "container" that wraps around a label and a textarea element. The label tag is used to associate a label with an input element, and the textarea is where the user can enter the text they want to be spoken. There is also a button element with an id attribute of "speak" that triggers the text-to-speech functionality when clicked.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our text to speech converter using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the text to speech converter is in place, the next step is to add styling to the text to speech converter using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our text to speech converter.
The first section, *{}, is a universal selector that applies to all elements on the webpage. It sets the box-sizing property to border-box, which includes any padding and border in the element's total width and height, and sets the margin of all elements to 0, removing any default margin.
The body selector sets the display property to flex, which creates a flexible container for the page's content. The justify-content and align-items properties are set to center, which horizontally and vertically centers the content in the container. The min-height property is set to 100vh, which makes the container take up the entire viewport height.
The .container selector applies styles to a specific div element with a class of "container". It sets the background-color to #4FBDBA, which is a light blue color. The display property is set to grid, which allows the container to be laid out in a grid structure. The gap property sets the gap between grid items to 20 pixels. The width is set to 500 pixels, and the max-width property uses a calc() function to set the maximum width to be the width of the viewport minus 40 pixels. The padding property sets the padding inside the container, while the border-radius property sets the rounded corners of the container. The font-size property sets the size of the text inside the container.
The #text selector applies styles to a specific textarea element with an id of "text". It sets the display property to block, which makes the element take up the entire width of its container. The height is set to 100 pixels, while the border-radius property sets the rounded corners of the element. The font-size property sets the size of the text inside the element, while the border property sets the border around the element. The resize property is set to none, which disables resizing of the element by the user. The padding property sets the padding inside the element, while the outline property sets a visible border around the element when it is in focus.
The button selector applies styles to all button elements. It sets the padding inside the button, while the background property sets the background color of the button. The color property sets the color of the text inside the button, while the border-radius property sets the rounded corners of the button. The cursor property sets the type of cursor that appears when the button is hovered over. The border property sets the border around the button, while the font-size and font-weight properties set the size and weight of the text inside the button.
This will give our text to speech converter an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
*{
box-sizing: border-box;
margin: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container{
background-color: #4FBDBA;
display: grid;
gap: 20px;
width: 500px;
max-width: calc(100vw - 40px);
padding: 30px;
border-radius: 10px;
font-size: 1.2rem;
}
#text{
display: block;
height: 100px;
border-radius: .5rem;
font-size: 1.5rem;
border: none;
resize: none;
padding: 8px 10px;
outline: 2px solid rgba(120,120,120,0.623);
}
button{
padding: 10px;
background: #072227;
color: #fff;
border-radius: .5rem;
cursor: pointer;
border: none;
font-size: 1rem;
font-weight: bold;
} Step 3 (JavaScript Code):
Finally, we need to create a speechSynthesis function in JavaScript.
The code uses the Document Object Model (DOM) to select and manipulate HTML elements, and it uses the Web Speech API to synthesize speech from text.
The first line of the code uses the getElementById method to select an HTML element with an id of "text". The textEL variable is then assigned to this element.
The second line of the code uses the getElementById method to select an HTML element with an id of "speak". The speakEL variable is then assigned to this element.
The third line of the code uses the addEventListener method to add a click event listener to the speakEL element. The speakText function is passed as the event handler for this listener. This means that when the "speak" button is clicked, the speakText function will be executed.
The speakText function first calls the cancel method on the window.speechSynthesis object. This stops any speech that is currently being synthesized.
The function then retrieves the text that has been entered into the textEL element by accessing its value property. This text is then used to create a new SpeechSynthesisUtterance object, which is a type of speech request.
The speak method of the window.speechSynthesis object is then called with the utterance object as a parameter. This causes the Web Speech API to synthesize speech from the text in the utterance object and speak it through the device's speakers.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
const textEL = document.getElementById('text');
const speakEL = document.getElementById('speak');
speakEL.addEventListener('click', speakText);
function speakText() {
// stop any speaking in progress
window.speechSynthesis.cancel();
const text = textEL.value;
const utterance = new SpeechSynthesisUtterance(text);
window.speechSynthesis.speak(utterance);
}Final Output:
Conclusion:
In conclusion, adding text to speech functionality to a website can greatly improve the user experience for users with hearing impairments, learning disabilities, or anyone who prefers to listen to content instead of reading it. With the Speech Synthesis API, implementing this feature is simple and straightforward, making it accessible to developers of all skill levels.
By following the steps outlined in this guide, you can add text to speech functionality to your website and customize it to fit your users' needs. Remember to test your implementation thoroughly to ensure that it works correctly and provides a high-quality user experience.
Overall, the Speech Synthesis API is a powerful tool that can greatly enhance the accessibility and usability of your website. We hope that this guide has been helpful and that you can use these tips to create a more inclusive and accessible online experience for your users.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
