Speech Synthesis API

23 Aug 2020

Speech Synthesis

//
Comments0
/
Tags, ,

The Web Speech Synthesis API adds to JavaScript:

Voice recognition (speech to text)

Speech synthesis (text to speech)

Here we will talk about Speech synthesis (text to speech)

Let’s start with a basic code:

Step 1: Write this Javascript code in an HTML file

var message = new SpeechSynthesisUtterance('Hello World');

window.speechSynthesis.speak(message);


Step 2: Open the file in chrome

Let’s alter some of the settings and see what happens:

Step 3: Write this Javascript code in an HTML file

var message = new SpeechSynthesisUtterance();

var voices = window.speechSynthesis.getVoices();

message.voice = voices[10]; // Note: some voices don't support altering params

message.voiceURI = 'native';

message.volume = 1; // 0 to 1

message.rate = 1; // 0.1 to 10

message.pitch = 2; //0 to 2

message.text = 'Hello World';

message.lang = 'en-US';

message.onend = function(e) {

 console.log('Finished in ' + event.elapsedTime + ' seconds.');

};

speechSynthesis.speak(message);


Step 4: Open the file in chrome

Detection if the browser supports

Web browsers may support each portion of the Web Speech API separately it is better feature detect each feature separately, Like here we detect if the browser supports Speech Synthesis:

if ('speechSynthesis' in window) {

 // Synthesis support. Make your web apps talk!
}

Here is my code for your reference:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Speech Synthesis</title>

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script>
        var playtext = function() {
            if ('speechSynthesis' in window) {
                // Synthesis support. Make your web apps talk!
                var message = new SpeechSynthesisUtterance();
                var voices = window.speechSynthesis.getVoices();
                message.voice = voices[22]; // Note: some voices don't support altering params
                message.voiceURI = 'native';
                message.volume = 1; // 0 to 1
                message.rate = 1; // 0.1 to 10
                message.pitch = 2; //0 to 2
                message.text = document.getElementById("textToPlay").value;
                message.lang = 'en-US';
                message.onend = function(e) {
                    console.log('Finished in ' + event.elapsedTime + ' seconds.');
                };
                speechSynthesis.speak(message);
            }
        }
    </script>
</head>

<body>

    <div class="container">
        <h1>Text to Speech App using Speech Synthesis</h1>
        <div class="jumbotron">
            Enter Text to Play:<br/>
            <textarea id="textToPlay" cols="50" rows="10">Hello World!</textarea>
            <br/>
            <button onclick​="playtext()">Play</button>
        </div>
    </div>

</body>
</html>

Try it yourself and Explore endless creative ideas for your applications.

Leave a Reply

/home/b0eee662nkt0/public_html/wp-content/themes/clevercourse/single.php