🦜 JS Text To Voice

As you know Web Speech API enables you to incorporate voice data into web apps. The Web Speech API has two parts:
SpeechSynthesis (Text-to-Speech), and
SpeechRecognition (Asynchronous Speech Recognition).

Using Speech Synthesis Utterance you can create a super simple Html Css and Javascript 'Text To Voice' Web App,

For the HTML part, you just need an input field and a button, like this

<div class="container">
        <div class="box">
            <h1>🦜 Text To Voice</h1>
            <input class="text" type="text" placeholder="Text To Voice">
            <button class="play">Play</button>
        </div>
    </div>

For the javascrit part you just need to instantiate a new SpeechSynthesisUtterance interface of the Web Speech API that represents a speech request, then you need to add the content the speech service should read and information about how to read it (e.g. language, pitch, text and volume, like this

let utter = new SpeechSynthesisUtterance();
utter.text = 'Hello World';
utter.volume = 0.5; // From 0 to 1
// utter.lang = 'us-EN';
utter.voice = voices[33]; // 33 english voice, 53 it

Now to transform the text into voice 🎤, you can use speechSynthesis speak method, like this;

window.speechSynthesis.speak(utter);

Finally, through the use of events, you can create a nice user experience!

 // START EVENT LISTENER
       utter.addEventListener('start',()=>{
        if(window.speechSynthesis.speaking){
            play.classList.add('active');
        }
        });

This is a super fast video guide.
👋