Text-to-Speech App

Inspiration

I really wanted to make a tool that can turn written text into spoken words right in the browser. This can be really helpful for people who need it for accessibility or for people who want to learn languages or even just for people who want to listen to something instead of reading it. The Text-to-Speech App can make it easier for people to get the information they need.

What the Text-to-Speech App does

The Text-to-Speech App lets users do the following things:

• Convert any text into speech using the Text-to-Speech App.

• Choose from the voices on their device using the Text-to-Speech App.

*. Stop speech playback instantly using the Text-to-Speech App.

• Read paragraphs smoothly using the Text-to-Speech App.

• Use an responsive interface that works across modern browsers using the Text-to-Speech App.

How I built the Text-to-Speech App

I built the Text-to-Speech App using the following things:

• HTML5

• CSS3

• Vanilla JavaScript

• Web Speech API which is also known as SpeechSynthesis

The browsers built-in Speech Synthesis API handles voice generation for the Text-to-Speech App while JavaScript manages voice loading, playback controls and user interactions for the Text-to-Speech App.

Challenges I ran into

One of the challenges I faced was handling voice availability across different browsers for the Text-to-Speech App. Since available voices load asynchronously and differ between operating systems I had to make sure the voice list updated correctly and the Text-to-Speech App remained stable regardless of the users environment.

Another challenge was creating an user experience when starting, stopping and changing speech without interruptions for the Text-to-Speech App.

Accomplishments that I am proud of

I built a fully functional Text-to-Speech App without using external libraries.

I created an easy-to-use interface for the Text-to-Speech App.

I successfully integrated multiple system voices through the Web Speech API for the Text-to-Speech App.

I made the Text-to-Speech App lightweight. Fast since everything runs locally in the browser.

What I learned

This project helped me better understand the following things:

The Web Speech API

Browser compatibility considerations

JavaScript event handling

Building interactive browser applications without frameworks

What is next for the Text-to-Speech App

Future improvements for the Text-to-Speech App include:

• Uploading PDF and TXT files to the Text-to-Speech App.

• Downloading generated speech as audio from the Text-to-Speech App.

• Word-by-word highlighting while reading using the Text-to-Speech App.

• pitch, rate and volume controls for the Text-to-Speech App.

• Dark mode for the Text-to-Speech App.

• Keyboard shortcuts for the Text-to-Speech App.

• Support for languages and voice filtering for the Text-, to-Speech App.