Today, I wanted to try something new, something I’d been thinking about for a while. I decided to create a simple text reader. I’ve named it “little angel reader”. Sounds cute, right?
Getting Started
First, I needed a basic HTML structure. Nothing fancy, just a textarea for the text input, a button to trigger the reading, and maybe a place to display, you know if something goes wrong.
So, I opened up my code editor and quickly put together this:
<textarea id="textToRead"></textarea>
<button id="readButton">Read Text</button>
<div id="message"></div>
Simple enough. Now, I have a place to paste text, and a button that should, eventually, make it read aloud.
The JavaScript Brains
The real magic happens with JavaScript. I needed to use the SpeechSynthesis API, I thought the name was so long at first! It’s built into modern browsers, so no need to downloading anything extra.
I added a script tag to my HTML and started writing some JavaScript:
<script>
const textToRead = *("textToRead");
const readButton = *("readButton");
const messageDiv = *("message");
*("click", () => {
speakText();
function speakText() {
//all logic goes here.
</script>
Okay, so I grabbed references to my HTML elements and added a click event listener to the button. when click the button, the speakText function run.
Now, let’s make it actually speak:
function speakText() {
const text = *;
if (*() === "") {
* = "Hey, enter some text first!";
return;
const utterance = new SpeechSynthesisUtterance(text);
*(utterance);
What I did here,I got the text from the textarea. Checked if it’s empty,and show message if it is. If there’s text, I created a new SpeechSynthesisUtterance object with the text, and then use to make the browser read it out loud.
First Test and Adjustments
I saved my file, opened it in the browser, typed in some text, and clicked the button. It worked, I can hear the voice clearly.!
I played around with different texts, I found the default voice and speed are a bit off for me. So, back to the code!
const utterance = new SpeechSynthesisUtterance(text);
* = *()[2]; // Choose a different voice
* = 1.2; // Make it a bit faster
*(utterance);
You can get a list of available voices using . I picked the third one. And I also increased the reading rate a little.
Final Touches and Wrap-up
After a few more tests, I was pretty happy with how it turned out. It’s a super simple text reader, but it does the job.
If you want to try this too, remember that the SpeechSynthesis API might behave slightly differently across browsers.
That’s all for today’s little project! I had fun building this, and I hope you enjoyed reading about it, or maybe even trying it out yourself!
