Inicio Blog Cursos Foro

Reconocimiento de voz en Ionic


author_post
José Luis Guisado

Reconocimiento de Voz

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.

Reconocimiento de voz con Ionic

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!

Instalando reconocimiento de voz en ionic

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-recognition

Configuración del reconocimiento de voz en nuestro proyecto 

Como 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.

reconocimiento_de_voz_ionic

¡No te pierdas nuevas entradas! Sí­guenos en nuestras redes sociales

Preguntas relacionadas

No hay preguntas sobre este artículo.

¿Tienes alguna duda sobre el artículo? ¡Pregunta!