 compilation.jpg)
Description
A developer's journey through code. I build, I break, and I write about it. Explore articles on modern software development, programming tips, and more.
Text to speech converter with multiple voices using JavaScript
Published in: 2024-01-03 16:46:42 Author: SunshineIHCTS Section: JavaScript
Creating interactive and engaging applications is a constant pursuit for web developers. One of such fascinating projects I am presenting to you today is a Text-to-Speech (TTS) converter with multiple voices using JavaScript, which can add a dynamic and personalized touch to user experiences in your website if such feature is implemented. In this article, I will walk you through the code created I have created to help you understand how to develope this feature-rich Text-to-Speech (TTS) converter using JavaScript.
Within my code, I have implemented the architecture for a Text-to-Speech converter featuring multiple voices using JavaScript within an HTML framework. The styling is accomplished through CSS, while the functionality is managed using JavaScript. The primary files include index.html, style.css, and script.js. You have the flexibility to name your HTML, CSS, and JavaScript files as desired; just ensure proper linking for seamless runtime execution. Without further delay, let us commence building the Text-to-Speech converter with multiple voices using JavaScript.
HTML Structure:
<!-- Developed by SunshineIHCTS || visit sunshineihcts.com for more -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text to speech converter with multiple voice using JavaScript - SunshineIHCTS</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="hero">
<h1>Text to speech converter with multiple voices</h1>
<textarea placeholder="Write here to convert to speech"></textarea>
<div class="row">
<select></select>
<button><i class="fa fa-play"></i> Convert</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
The HTML structure is simple and intuitive, featuring a heading, a textarea for user input, a dropdown to select different voices, and a button to initiate the conversion. The use of semantic HTML elements such as <h1>, <textarea>, <select>, and <button> enhances accessibility and readability. Additionally, the inclusion of FontAwesome icons adds a visual appeal to the button.
CSS Styling:
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
.hero {
width: 100%;
min-height: 100vh;
background: linear-gradient(45deg, #076268, #302D02);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
}
.hero h1 {
font-size: 30px;
font-weight: 500;
margin-top: -50px;
margin-bottom: 50px;
}
textarea {
width: 600px;
height: 250px;
background-color: #383503cb;
font-size: 15px;
border-color: #076268;
padding: 20px;
border-radius: 10px;
resize: none;
margin-bottom: 39px;
color: #fff;
}
textarea::placeholder {
font-size: 13px;
}
.row {
width: 600px;
display: flex;
align-items: center;
gap: 20px;
}
button {
background-color: #302D02;
color: #fff;
font-size: 13px;
padding: 10px;
cursor: pointer;
border: 0;
border-radius: 35px;
text-align: center;
}
select {
flex: 1;
color: #fff;
background-color: #302D02;
height: 50%;
padding: 10px;
cursor: pointer;
border: 0;
border-radius: 35px;
text-align: center;
appearance: none;
}
The CSS styling focuses on creating a visually appealing and responsive user interface. The hero section, styled with a gradient background, provides an aesthetic backdrop. The textarea, styled with a transparent background and rounded corners, encourages user interaction. The use of a distinct color palette and well-defined styles for buttons and dropdowns enhances the overall user experience.
JavaScript Implementation:
let speech = new SpeechSynthesisUtterance();
let voices = [];
let voiceSelect = document.querySelector("select");
window.speechSynthesis.onvoiceschanged = () => {
voices = window.speechSynthesis.getVoices();
speech.voice = voices[0];
/* Display the voices in the dropdown */
voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)));
};
document.querySelector("button").addEventListener("click", () =>{
speech.text = document.querySelector("textarea").value;
window.speechSynthesis.speak(speech);
});
The core functionality of the Text to speech (TTS) converter with multiple voices is implemented in JavaScript. The code initializes a SpeechSynthesisUtterance object (`speech`) and an array (`voices`) to store available voices. The onvoiceschanged event listener is employed to populate the dropdown with available voices when the voices change, ensuring the user has access to the latest voice options their devices.
Fetching and Displaying Voices:
The window.speechSynthesis.getVoices() method retrieves an array of available voices, and these voices are then assigned to the `voices` array. The default voice is set to the first voice in the array (`voices[0]`), and the dropdown options are dynamically created based on the available voices. This approach ensures that users can select from a variety of voices for their TTS experience.
User Interaction:
User interaction is handled through an event listener attached to the convert button. When the button is clicked, the content of the textarea is assigned to the `text` property of the `speech` object. Subsequently, the `window.speechSynthesis.speak(speech)` method is called to initiate the text-to-speech (TTS) conversion using the specified voice and input text. I have provided the source code for free, you can download and extract the .zip file or watch the video below to see how to run the code after downloading.
This text-to-Speech converter with multiple voices is a well-crafted and user-friendly application. The combination of HTML for structure, CSS for styling, and JavaScript for functionality showcases the power of these web technologies when seamlessly integrated. This project not only provides a practical tool for users but also serves as a learning resource for developers interested in exploring the capabilities of the Web Speech API.
By creating a clear and concise user interface, fetching and displaying available voices, and enabling user interaction, this project exemplifies best practices in web development. Developers can further expand on this foundation by incorporating additional features such as pitch and rate adjustments, language selection, and improved error handling.
You may like:
Copyright © 2018 - 2026 SunshineIHCTS | All rights reserved. Powered by 
Comments section
You need to be logged in to comment, Login or Register.Approved comments:
No comments yet! be the first to comment