Text To Speech using Web API

Published On - June 20, 2023

yawhuat News, Tutorial

Ok, here you can learn to implement simple text-to-speech using javascript Webapi. Let’s look at an easy example of how we can implement this simple API

By the way, Webapi is free. Do not expect it to be like https://www.synthesia.io/. If you are looking for the more advance version where you can create text-to-speech along with video, you may visit Synthesia.

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65″ crossorigin=”anonymous”>
    <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js” integrity=”sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4″ crossorigin=”anonymous”></script>
    <title>storybooks</title>
</head>
<body>
    <div class=”container pt-3″>
        <img src=”dog and the man.jpg” style=’width:50%; float:left; padding:20px’>
        <br>
        <p id=”story”>
Deep in the heart of a dense forest, hidden away from the bustling world, lived a man named Ahmad. He had chosen a life of solitude, far removed from the chaos and noise of civilization. As the days passed by, Ahmad earned his keep as a skilled hunter, relying on the forest’s abundant resources to sustain himself.
One serene day, as Ahmad roamed the woods in search of his next prey, he heard a shrill, desperate scream echoing from the nearby river. His curiosity piqued, he followed the sound, his heart pounding with anticipation. There, by the riverbank, he discovered a dog, trapped and injured, whimpering in pain. Without a moment’s hesitation, Ahmad’s nervousness dissipated, replaced by an overwhelming desire to help the poor creature.
Gently, he scooped the wounded dog into his arms and carried it back to his humble abode. With utmost care, Ahmad tended to the dog’s injuries, nursing it back to health. Days turned into weeks, and the dog’s condition improved gradually, finding solace and companionship in Ahmad’s kind presence.
One fateful morning, as the sun began to set, Ahmad realized it was time to release the dog back into the wild. With a heavy heart, he bid his furry friend farewell, knowing it was the right thing to do. As the dog trotted away, Ahmad watched, a mix of sadness and satisfaction etched across his face.
That night, as Ahmad lay sleeping in his wooden hut, dreaming of the forests he called home, he was abruptly awakened by the pungent scent of smoke. Panic flooded his senses as he realized his sanctuary was engulfed in flames. Frantically, he attempted to escape, only to find the door stubbornly jammed, trapping him inside.
Ahmad’s heart raced, and his mind filled with despair. Feeling trapped and helpless, he shouted for assistance, his voice carrying into the stillness of the night. Just as hope began to fade, an unexpected symphony of barks shattered the silence. The dog he had rescued, accompanied by a pack of village dogs, had heard Ahmad’s cries for help and rallied nearby villagers to his aid.
With unwavering determination, the villagers fought the raging flames and managed to break down the door. Amidst the chaos, Ahmad emerged, covered in soot and grateful tears. He embraced the villagers, his heart brimming with gratitude, but it was the dog who had orchestrated this miraculous rescue.
In the aftermath of the fire, Ahmad stood among the charred remains of his once-beloved hut, reflecting on the fragility of life and the bonds that transcend species. The dog, his savior, looked up at him with eyes filled with loyalty and love. In that moment, Ahmad realized the immense power of compassion and the interconnectedness of all living beings.
From that day forward, Ahmad’s solitude was no longer a choice, for he had discovered a newfound sense of community and purpose. Together, he and the dog roamed the forest, bringing hope and kindness to those they encountered. And whenever Ahmad gazed into the starry night sky, he whispered a silent thank you to the dog who had not only saved his life but had also reminded him of the profound beauty of friendship.
        </p>
    </div>
<div class=”container p-3″>
    <button id=”readtext” class=”btn btn-success”>Read</button>
</div>
</body>
<script>
    const synth = window.speechSynthesis;
    let story = document.getElementById(‘story’);
    story = story.innerHTML;
    const readtext = document.getElementById(‘readtext’);
    readtext.addEventListener(‘click’,()=>{
        const readstory = new SpeechSynthesisUtterance(story);
        synth.speak(readstory);
    });
</script>
</html>

 

Let me explain how it works

  • We first need to create a id for the paragraph id=”story”. Just to inform the javascript to grab the text from this id
  • const synth = window.speechSynthesis this is to initialised the speech Synthesis
  •  let story = document.getElementById(‘story’);  and story = story.innerHTML; this is to grab the paragraph of text from the id =’story’
  • const readtext = document.getElementById(‘readtext’); and readtext.addEventListener  to create action for trigger button
  • Finally
    const readstory = new SpeechSynthesisUtterance(story);
            synth.speak(readstory);

    These will create a new object and use the class from speechsynthesisutterance.

  • synth.speak(readstory); To read out