cordova-plugin-speechrecognition icon indicating copy to clipboard operation
cordova-plugin-speechrecognition copied to clipboard

Full example request - from click to text injection back to the page

Open JacekMarcinJ opened this issue 8 years ago • 8 comments

Hi I am fascinated with Cordova features. Now I want to add text recognition to my app. But current example is very unclear. I ask you to create simple but complete example (like those on Cordova home page) witch will show recognition process from click on button on web page to recognized text injection to some edit box. This will be great and will show strength both Cordova and yours. Maybe it is silly task, but challenge for beginner...

thank you and best regards Jacek

JacekMarcinJ avatar Mar 01 '17 14:03 JacekMarcinJ

Requesting the same... an example code would be really useful. :-)

ragcsalo avatar Aug 09 '17 08:08 ragcsalo

Hi @JacekMarcinJ , @ragcsalo , as requested PFB sample code which works well and good for me, I have customized the speech recognition options to match the first result after user stops speaking. Add it to your index.js file and do a build. Note: It won't work in emulator , so test it once you built the app.

Add it to your config.xml

var app = {

// Application Constructor

initialize : function() {

	document.addEventListener('deviceready', this.onDeviceReady.bind(this),
			false);

},

// deviceready Event Handler

//

// Bind any cordova events here. Common events are:

// 'pause', 'resume', etc.

onDeviceReady : function() {

	this.receivedEvent('deviceready');

	window.plugins.speechRecognition
			.isRecognitionAvailable(
					function(available) {

						if (!available) {

							alert('Sorry, your device is not compatible for me.');

						}

						// Check if has permission to use the microphone

						window.plugins.speechRecognition
								.hasPermission(
										function(isGranted) {

											if (isGranted) {

												startRecognition();

											} else {

												// Request the permission

												window.plugins.speechRecognition
														.requestPermission(
																function() {

																	// Request
																	// accepted,
																	// start
																	// recognition

																 startRecognition();

																},
																function(
																		err) {

																	alert('Sorry, your device is not compatible for me.');

																});

											}

										},
										function(err) {

											alert('Sorry, your device is not compatible for me.');

										});

					}, function(err) {

						// alert('speech recognition not available');

					});

},

// Update DOM on a Received Event

receivedEvent : function(id) {

	/*
	 * var parentElement = document.getElementById(id);
	 * 
	 * var listeningElement = parentElement.querySelector('.listening');
	 * 
	 * var receivedElement = parentElement.querySelector('.received');
	 * 
	 * 
	 * 
	 * listeningElement.setAttribute('style', 'display:none;');
	 * 
	 * receivedElement.setAttribute('style', 'display:block;');
	 * 
	 * 
	 * 
	 * console.log('Received Event: ' + id);
	 */

}

};

app.initialize();

function startRecognition() {

startListening();

}

function startListening() {

window.plugins.speechRecognition.startListening(function(result) {
	alert('alert result : '+result[0]);
	

}, function(err) {

	// alert('result after readung voice data : '+err);
	alert("Hi, I didn't get anything from you..", true);

}, {

	language : "en-US",

	matches : 1,

	showPopup : true,

	showPartial : false

});

}

LoganathanNN94 avatar Mar 14 '18 07:03 LoganathanNN94

Thanks @LoganathanNN94 :-) In the meantime I successfully developed my speech recognition app (magic trick). I also could mute the sound at the beginning of recognition. :-) Now it works totally "invisible". The only thing I couldn't manage is to continue the recognition after the screen is locked... Do you have any idea how to do it?

ragcsalo avatar Mar 14 '18 07:03 ragcsalo

Hi @ragcsalo , For this case, we can make a loop out to make this plugin continuously listening by calling startListening() method. Once if it recognizes any voice input available, it will enter into your success block where you can read the voice input as text and break the loop.

Hope this could solve your request.

LoganathanNN94 avatar Mar 14 '18 07:03 LoganathanNN94

@LoganathanNN94 my bad... I forgot this already is working in my app :-) I thought the recognition stops when I lock the screen, but it doesn't. :-D Maybe I will also post a small example to GitHub. :-) Thanks for the help anyway!

ragcsalo avatar Mar 14 '18 07:03 ragcsalo

@ragcsalo , I think then we can close this thread :) .

LoganathanNN94 avatar Mar 14 '18 08:03 LoganathanNN94

@JacekMarcinJ has opened it... :-)

ragcsalo avatar Mar 14 '18 08:03 ragcsalo

Thanks @LoganathanNN94 :-) In the meantime I successfully developed my speech recognition app (magic trick). I also could mute the sound at the beginning of recognition. :-) Now it works totally "invisible". The only thing I couldn't manage is to continue the recognition after the screen is locked... Do you have any idea how to do it?

@ragcsalo how could you mute the sound in the initial and end of speech recognition.?

jeesoncherukattil avatar Aug 09 '19 04:08 jeesoncherukattil