Seguro que tienes instalada más de una aplicación en tu móvil que cuenta con el reconocimiento de voz y es que esta funcionalidad cada vez esta más presente en el mercado de las aplicaciones. Ya sea para buscar algún sitio desde google, traducir una frase en el traductor o simplemente interactuar con algún asistente como siri, utilizamos esta funcionalidad.
Al igual que una aplicación nativa, Ionic junto con cordova nos proove de esta funcionalidad y en cuanto tengamos instalada esta librería ¡Tendremos en cuestión de minutos nuestra aplicación reconociendo nuestra voz!
Para comenzar a utilizar el reconocimiento, instalaremos el siguiente plugin con estos dos comandos:
ionic cordova plugin add cordova-plugin-speechrecognition
npm install --save @ionic-native/speech-recognitionComo siempre, importaremos nuestro plugin en el artchive app.modules.ts de nuestro proyecto:
...
import { SpeechRecognition } from '@ionic-native/speech-recognition';
@NgModule({
declarations: [
...
],
imports: [
...
],
bootstrap: [IonicApp],
entryComponents: [
...
],
providers: [
...
SpeechRecognition,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
Y ahora en el archivo .ts (En mi caso home.ts) de la página dónde queramos utilizar el reconocimiento de voz, añadiremos este código:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SpeechRecognition } from '@ionic-native/speech-recognition';
//Importamos el plugin
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
message:string; //Aqui guardaremos el mensaje que nuestro dispositivo a detectado
constructor(
public navCtrl: NavController,
private speechRecognition: SpeechRecognition //Inicializamos el objeto en nuestro contructor
) {
}
//Cada vez que se inicie nuestra vista, se ejecutara la funcion getPermision()
ionViewDidLoad(){
this.getPermission();
}
//Esta función es la encargada de activar el reconocimiento de voz
startListening(){
let options = {
language: "es-ES",//fijamos el lenguage
matches: 1,//Nos devuelve la primera opción de lo que ha escuchado
//si ponemos otra cantidad, nos dará una variante de la palabra/frase que le hemos dicho
}
this.speechRecognition.startListening(options).subscribe(matches=>{
this.message = matches[0]; //Guarda la primera frase que ha interpretado en nuestra variable
})
}
getPermission(){
//comprueba que la aplicación tiene permiso, de no ser así nos la pide
this.speechRecognition.hasPermission().
then((hasPermission:boolean)=>{
if(!hasPermission){
this.speechRecognition.requestPermission();
}
})
}
}
Una vez hecho esto, en el html de nuestra página añadiremos:
-Un boton para iniciar la escucha y además cambiará de color si nuestra variable es un color.
-Un h2 donde aparecerá nuestro mensaje.
<ion-header>
<ion-navbar>
<ion-title>
Reconocimiento de voz
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="startListening()" [style.background-color]="message">Iniciar escucha</button>
<!--Con style.background-color, le estamos indicando que sea del color que nuestra variable le indique-->
<h2>Tu mensaje: {{message}}</h2>
</ion-content>
Recordar que debemos ejecutar la aplicación en un dispositivo/emulador, ya que necesitamos de la funcionalidad de un dispositivo móvil para poder hacer la escucha.
Si probamos nuestra aplicación y le decimos «RED» nos mostrará el mensaje «red» y cambiará nuestro botón a ese color.
