Jquery Convert Speech To Text Example

Apr 19, 2021 . Admin

Hi Dev,

In this blog, I will learn you how to convert speech to text in jquery. we will show example of convert speech to text in jquery. you can easliy convert speech to text in jquery.i will describe convert speech to text in jquery. I will use window.webkitSpeechRecognition to Convert Speech To Text In Jquery.

Here, I will give you full example for simply convert speech using jquery as bellow.

Example

/example/index.php

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"/>
</head>
<body class="bg-dark">
<div class="container">
    <div class="row">
        <div class="col-md-8 offset-2">
            <div class="card mt-4">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-12">
                            <h5>Speech to Text in Javascript</h5>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <textarea name="" readonly id="textbox" rows="6" class="form-control">
                                </textarea>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <button id="start-btn" class="btn btn-success btn-block">Start</button>
                            <button id="create" class="btn btn-danger btn-block" style="display: none">End</button>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="col-md-12">
                            <p id="instration">Press Start Voice Recognition</p>
                            <a download="info.txt" id="downloadlink" style="display: none">Download</a>  
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</body>
</html>

example/script.js

<script >
    var SpeechRecogntion = window.webkitSpeechRecognition;

    var recognition = new window.SpeechRecogntion();

    var textbox = $('#textbox');

    var instration = $('#instration');

    var content = '';

    recognition.continuous = true

    recognition.onstart = function (){
        instration.text('Voice Recognition is on')
    }

    recognition.onspeechend = function (){
        instration.text('No Activity');
    }

    recognition.onerror = function (event){
        instration.text('Try Again');
        console.log(event);
    }

    recognition.onresult = function(event) {
        var current = event.resultIndex;
        var transcript = event.results[current][0].transcript;
        var confidence = event.results[current][0].confidence;
        console.log(transcript);
         content += transcript;
        $('#textbox').val(content);
    };
                  

    $('#start-btn').click(function(event) {
        if(content.length){
            content += ''
        }
        $('#textbox').val('welcome to nicesnippets.com');
        $('#downloadlink').css('display','none');
        $('#create').css('display','block');
        $(this).css('display','none');
        recognition.start()
    });

     
    var textFile = null,  
    makeTextFile = function (text) {  
    var data = new Blob([text], {type: 'text/plain'});  

    // If we are replacing a previously generated file we need to  
    // manually revoke the object URL to avoid memory leaks.  
    if (textFile !== null) {  
      window.URL.revokeObjectURL(textFile);  
    }  

    textFile = window.URL.createObjectURL(data);  

    return textFile;  
    };  


    var create = document.getElementById('create'),  
    textbox = document.getElementById('textbox');  

    create.addEventListener('click', function () {  
        var link = document.getElementById('downloadlink');  
        link.href = makeTextFile(textbox.value);  
        link.style.display = 'block';  
        $('#start-btn').css('display','block');
        $('#create').css('display','none');
        recognition.stop()
        content = '';
        $('#instration').text('Press Start Voice Recognition');
    }, false);  
</script >

After, I will create info.txt file..

Now we are ready to run our example

OutPut