Speech to Voice in Website using Javascript

Speech to Voice in Website using Javascript

W3C Community introduced the Web Speech API specification. Its a wonderful feature to introduce voice enabled commands on your website which works in Chrome Browser.

Convert Speech to Text

Below code just convert voice speech to text that you can use to make any search on your website or to navigate to another link on your website. Also you can make simple Bot on your website using this feature.

window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;

console.log(window.SpeechRecognition);

if ('SpeechRecognition' in window) {

    const recognition = new window.SpeechRecognition();

    recognition.onresult = (event) => {

        let speechToText = event.results[0][0].transcript;

        console.log("speech text", speechToText);

    }

    recognition.start();

    console.log('Ready to receive a command.');

} else {

    alert("speaking not working");

    // speech recognition API not supported

}

Below code is used to output speech on Chrome browser.
speechSynthesis.getVoices(); method is used to get voices from various countries accents.

var m = 'Hi How are you?';

if ('speechSynthesis' in window) {

    const msg = new SpeechSynthesisUtterance(m);

    const voices = window.speechSynthesis.getVoices();

    // msg.voice = voices[9];

    //msg.voice = voices[4];

    console.log("speaking: " + m);

}