Skip to content
Related Articles

Related Articles

How to convert speech into text using JavaScript ?
  • Difficulty Level : Expert
  • Last Updated : 05 Jan, 2021

In this article, we will learn to convert speech into text using HTML and JavaScript. 

Approach: We added a content editable “div” by which we make any HTML element editable.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<div class="words" contenteditable>
    <p id="p"></p>
</div>

chevron_right


We use the SpeechRecognition object to convert the speech into text and then display the text on the screen.

We also added WebKit Speech Recognition to perform speech recognition in Google chrome and Apple safari.



Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


InterimResults results should be returned true and the default value of this is false. So set interimResults= true

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

recognition.interimResults = true;

chevron_right


Use appendChild() method to append a node as the last child of a node.

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

const words=document.querySelector('.words');
words.appendChild(p);

chevron_right


Add eventListener, in this event listener, map() method is used to create a new array with the results of calling a function for every array element. 

Note: This method does not change the original array. 

Use join() method to return array as a string.

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

recognition.addEventListener('result', e => {
    const transcript = Array.from(e.results)
        .map(result => result[0])
        .map(result => result.transcript)
        .join('')
  
    document.getElementById("p").innerHTML = transcript;
    console.log(transcript);
});

chevron_right


Final Code:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <title>Speech to Text</title>
</head>
  
<body>
    <div class="words" contenteditable>
        <p id="p"></p>
    </div>
  
    <script>
        var speech = true;
        window.SpeechRecognition = window.SpeechRecognition
                        || window.webkitSpeechRecognition;
  
        const recognition = new SpeechRecognition();
        recognition.interimResults = true;
        const words = document.querySelector('.words');
        words.appendChild(p);
  
        recognition.addEventListener('result', e => {
            const transcript = Array.from(e.results)
                .map(result => result[0])
                .map(result => result.transcript)
                .join('')
  
            document.getElementById("p").innerHTML = transcript;
            console.log(transcript);
        });
          
        if (speech == true) {
            recognition.start();
            recognition.addEventListener('end', recognition.start);
        }
    </script>
</body>
  
</html>

chevron_right


Output: 

If the user tells “Hello World” after running the file, it shows the following on the screen.

Hello World

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :