There are so many ways to recognize speech from microphone directly. From all of them, we can do speech recognition using browser API easily that is implemented by JavaScript. Its really very easier to use in your website. Follow the bellow steps, hope you will also implement this in your website. It can recognize different languages, you will find a option in voice.js file that is line number 9 “var lang=’EN'”. Just change and use your language code, it will work perfectly. So, lets start.
Step-1 : Create a HTML page using the bellow code”
Here, I have used bootstrap and font-awesome library to make it beautiful. You can skip according to your needs.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Speech Recognition Using Browser API</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#jacos-menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">LOGO</a>
</div>
<div id="jacos-menu" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><button class="btn btn-warning">Speech to Text Convert</button></a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<div class="container-fluid">
<div class="main-content bg-white">
<div class="row border-between">
<div class="col-sm-6">
<h4>Speech Recognition</h4><hr>
<div class="panel panel-default text-center">
<div class="panel-body">
<button class="btn btn-danger btn-start">
<i class="fa fa-microphone"></i> Start</button>
<button class="btn btn-success btn-end">
<i class="fa fa-stop-circle-o"></i> Stop</button>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<i style="font-size:18px; display:none;" class="text-start fa fa-spinner fa-spin fa-3x fa-fw text-danger"></i>
<i style="font-size:16px;" class="text-stop fa fa-stop text-success"></i>
<span id="recog-text"></span>
</div>
</div>
</div>
</div>
<div style="position: absolute;top:0;left:0;z-index: -99" id="canvas"></div>
</div>
</div>
<script src="voice.js"></script>
</body>
</html>
Step-2 : Create a CSS file named style.css using the following code
body{
background-color: #E7E7E7;
}
.full-body{z-index: 99;}
.bg-white{
background-color: white;
}
.navbar-custom{
background: white;
margin-bottom: 10px;
border-bottom: 4px solid #8BC34A;
}
.navbar-brand{
font-size: 3em;
margin-top:8px;
}
.main-content{
border: 1px solid gainsboro;
box-shadow: 0px 0px 3px 1px gainsboro;
padding:15px;
position: relative;
}
.border-between > [class*='col-']:before {
background: #e3e3e3;
bottom: 0;
content: " ";
left: 0;
position: absolute;
width: 2px;
top: 0;
}
.border-between > [class*='col-']:first-child:before {display: none;}
.border-between > [class*='col-']{min-height: 450px;}
.navbar-toggle {
background-color: #8BC34A;
border: 1px solid #8BC34A;
}
.icon-bar{background-color: white;}
Step-3 : Create a Javascript file named voice.js using the following code
var voice_flg = true;
var voice_tr = null;
var rec;
var status=1;
function voice2text(callback) {
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList;
var grammar = '#JSGF V1.0;'
var lang = 'EN';
rec = new SpeechRecognition();
var speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
rec.grammars = speechRecognitionList;
rec.lang = lang;
rec.interimResults = false; // 暫定結果
rec.interimResults = true; // 暫定結果
rec.continuous = true; // 認識継続
rec.onresult = function(event) {
callback(event);
};
rec.onspeechend = function() {
rec.stop();
};
rec.onend = function() {
rec.start();
}
rec.onerror = function(event) {
console.log('Speech recognition error detected: ' + event.error);
}
rec.onnomatch = function(event) {
console.log(event);
console.log('onnomatch');
}
console.log(rec);
// recognition start
rec.start();
}
$().ready(function() {
$(".btn-start").click(function(){
status=1;
voice2text(add_record_callback);
$(this).attr("disabled","disabled");
$(".btn-end").removeAttr("disabled");
})
$(".btn-end").click(function(){
status=0;
$(this).attr("disabled","disabled");
$(".btn-start").removeAttr("disabled");
})
});
function reset_voice() {
rec.stop();
// rec.start();
}
function add_record_callback(data) {
if(status==1){
var last = data.results.length - 1;
var command = data.results[last][0].transcript.trim();
if (data.results[last].isFinal) {
voice_tr = null;
voice_flg = true;
$("#recog-text").text(command);
$("i.text-start").hide();
$("i.text-stop").show();
console.log(command);
console.log("voice end-------------------");
} else {
if (voice_flg) {
// first
console.log("voice start -------------------");
$("i.text-start").show();
$("i.text-stop").hide();
} else {
// interimResults continue
$("#recog-text").text(command);
console.log(command);
}
}
}
}
Leave a Comment
You must be logged in to post a comment.