Web Speech API to Listen a Blog Post

Published October 25, 2022

The SpeechSynthesisUtterance would enable users to listen to a blog post (text) rather than read it. This interface of the Web Speech API represents a speech request.

    var msg = new SpeechSynthesisUtterance('Learning Web Speech API');
    speechSynthesis.speak(msg);

It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.) Not all browsers support this API, although most modern browsers do.

    if ( 'speechSynthesis' in window ) {
        var msg = new SpeechSynthesisUtterance('Learning Web Speech API');
        speechSynthesis.speak(msg);
    }

Example

<!DOCTYPE html>
<html>
<head>
    <title>Web Speech API to Listen a Blog Post - By WebMasterCampus.com</title>
</head>
<body>
    <button onclick="read()">Read Words</button>

</body>

<script>
    function speak(message, language='en-us'){
        const msg = new SpeechSynthesisUtterance(message);
        msg.lang = language;
        speechSynthesis.speak(msg);

    }

    function read(){
        speak("This message read by Javascript");
        speak("Speech Synthesis Utterance");
        speak("Thank you for learning");
    }

</script>
</html>