Cómo utilizar la API de reconocimiento de voz (convertir voz en texto) en Cordova

Aprende a convertir voz en texto con la API de reconocimiento de voz en Cordova.

En el mundo del desarrollo web, existe una API realmente útil (aunque experimental) que permite convertir voz en texto fácilmente. Estamos hablando de la API SpeechRecognition, esta interfaz de la API Web Speech es la interfaz del controlador para el servicio de reconocimiento que también maneja el SpeechRecognitionEvent enviado desde el servicio de reconocimiento.

Sin embargo, esta API solo está disponible en Google Chrome (que deja fuera iOS), y como si eso no fuera suficiente, esta API tampoco está disponible en la WebView de Android. Eso descarta completamente el uso de esta API en su aplicación Cordova. Por tanto, la única opción es utilizar el servicio de reconocimiento de voz nativo del dispositivo.

En este artículo, aprenderá a utilizar la interfaz de reconocimiento de voz nativa del dispositivo dentro de su Proyecto Cordova a través de un complemento de código abierto.

Requisitos

Para usar la API de reconocimiento de voz, necesitará un complemento Cordova que maneje el código nativo del Reconocedor de voz. En este caso, vamos a utilizar el complemento cordova-plugin-speechrecognition. Este complemento le permite utilizar fácilmente el reconocimiento de voz nativo de su dispositivo.

Este complemento es compatible con las plataformas Android e iOS. Para instalar el complemento en su proyecto, ejecute el siguiente comando en la terminal:

cordova plugin add cordova-plugin-speechrecognition

Una vez que el complemento esté instalado en su proyecto, la window.plugins.speechRecognitionvariable estará disponible en su proyecto. Lea más sobre el complemento en su repositorio oficial de Github aquí . El complemento en sí tiene los siguientes requisitos:

cordova-android v5.0.0
Nivel 14 de API de Android
<android:launchMode>no debe ser singleInstance. Puede ser singleTask, standard, singleTop.
Permiso RECORD_AUDIO
Conexión a Internet (obviamente)

Métodos

El complemento ofrece 6 métodos para manejar el reconocimiento de voz:

1. isRecognitionAvailable

Este método le permite comprobar si el reconocimiento de voz se puede utilizar en su dispositivo o no. La primera devolución de llamada (éxito) recibe un booleano con este valor:

window.plugins.speechRecognition.isRecognitionAvailable(function(available){
    if(available){
        // You can use the speechRecognition
    }
}, function(err){
    console.error(err);
});

2. hasPermission

Este método verifica si la aplicación tiene los permisos para el uso del micrófono:

window.plugins.speechRecognition.hasPermission(function (isGranted){
    if(isGranted){
        // Do other things as the initialization here
    }else{
        // You need to request the permissions
    }
}, function(err){
    console.log(err);
});

3. requestPermission

Puede solicitar el permiso para el micrófono con este método fácilmente:

window.plugins.speechRecognition.requestPermission(function (){
    // Requested
}, function (err){
    // Opps, nope
});

4. getSupportedLanguages

Este método recupera todos los idiomas disponibles en el dispositivo en un formato de matriz:

window.plugins.speechRecognition.getSupportedLanguages(function(data){
    console.log(data); // ["es-ES","de-DE","id-ID" ........ ]
}, function(err){
    console.error(err);
});

5. startListening

Este método inicializa el reconocimiento de voz. Espera como tercer parámetro un objeto con las opciones:

language{String} utilizó el idioma para el reconocimiento (predeterminado "en-US")
matches{Number} número de coincidencias devueltas (predeterminado 5, en iOS: número máximo de coincidencias)
prompt{String} muestra el indicador de la ventana emergente del oyente (predeterminado "", solo Android)
showPopup{Boolean} muestra la ventana emergente del oyente con un mensaje (predeterminado true, solo Android)
showPartial{Boolean} Permitir que se devuelvan resultados parciales (predeterminado false, solo iOS)

Existe una diferencia entre las plataformas Android e iOS. En Android, el reconocimiento de voz se detiene cuando el hablante termina de hablar (al final de la oración). En iOS, el usuario debe detener manualmente el proceso de reconocimiento llamando al método stopListening ():

var settings = {
    lang: "en-US",
    showPopup: true
};

window.plugins.speechRecognition.startListening(function(result){
    console.log(result);
    // By default just 5 options
    // ["Hello","Hallou", "Hellou" ...]
}, function(err){
    console.log(err);
}, settings);

6. stopListening

Este método detiene el reconocimiento, pero solo está disponible para iOS:

window.plugins.speechRecognition.stopListening(function(){
    // No more recognition
}, function(err){
    console.log(err);
});

Uso

La forma correcta de utilizar el reconocimiento de voz es la siguiente:

Debe verificar si el reconocimiento de voz es compatible.
Si es compatible, verifique los permisos.
Si no tiene permisos para usar el micrófono, solicítelos.
Una vez que tenga los permisos, inicialice Speech Recognizer.

Con los métodos disponibles del complemento, puede iniciar fácilmente el reconocimiento con el siguiente código (tenga en cuenta que debe cambiar las opciones):

// Handle results
function startRecognition(){
    window.plugins.speechRecognition.startListening(function(result){
        // Show results in the console
        console.log(result);
    }, function(err){
        console.error(err);
    }, {
        language: "en-US",
        showPopup: true
    });
}

// Verify if recognition is available
window.plugins.speechRecognition.isRecognitionAvailable(function(available){
    if(!available){
        console.log("Sorry, not available");
    }

    // 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){
                console.log(err);
            });
        }
    }, function(err){
        console.log(err);
    });
}, function(err){
    console.log(err);
});

Si trabaja con promesas, puede crear un miniobjeto que almacene las mismas funciones proporcionadas por el complemento pero con Promesas como se muestra en el siguiente ejemplo:

window["speechRecognition"] = {
    hasPermission: function(){
        return new Promise(function(resolve, reject){
            window.plugins.speechRecognition.hasPermission(function (isGranted){
                resolve(isGranted);
            }, function(err){
                reject(err);
            });
        });
    },
    requestPermission: function(){
        return new Promise(function(resolve, reject){
            window.plugins.speechRecognition.requestPermission(function (){
                resolve();
            }, function (err){
                reject();
            });
        });
    },
    startRecognition: function(settings){
        return new Promise(function(resolve, reject){
            window.plugins.speechRecognition.startListening(function(result){
                resolve(result);
            }, function(err){
                reject(err);
            }, settings);
        });
    },
    getSupportedLanguages: function(){
        return new Promise(function(resolve, reject){
            window.plugins.speechRecognition.getSupportedLanguages(function(result){
                resolve(result);
            }, function(err){
                reject(err);
            });
        });
    },
    isRecognitionAvailable: function(){
        return new Promise(function(resolve, reject){
            window.plugins.speechRecognition.isRecognitionAvailable(function(available){
                resolve(available);
            }, function(err){
                reject(err);
            });
        });
    },
    stopListening: function(){
        return new Promise(function(resolve, reject){
            window.plugins.speechRecognition.stopListening(function(){
                resolve();
            }, function(err){
                reject(err);
            });
        });
    }
};

Esto crearía la variable speechRecognition en la ventana que puede usar de la siguiente manera:

window.speechRecognition.isRecognitionAvailable().then(function(available){
    if(available){
        return window.speechRecognition.hasPermission();
    }
}).then(function(hasPermission){

    function startRecognition(){
        return window.speechRecognition.startRecognition({
            language:"en-US",
            showPopup: true
        }).then(function(data){
            console.log("Results",data);
        }).catch(function(err){
            console.error(err);
        });
    }


    if(!hasPermission){
        window.speechRecognition.requestPermission().then(function(){
            startRecognition();
        }).catch(function(err){
            console.error("Cannot get permission", err);
        });
    }else{
        startRecognition();
    }
}).catch(function(err){
    console.error(err);
});

Bastante fácil, ¿no?

Comandos de voz

Puede usar una biblioteca de comandos de voz como Artyom.js para procesar los comandos de voz (aunque las API webkitSpeechRecognition y speechSynthesis no están disponibles, puede usar el procesador de comandos):

artyom.addCommands([
    {
        indexes: ["Hello","Hi"],
        action: function(){
            console.log("Hello, how are you?");
        }
    },
    {
        indexes: ["Translate * in Spanish"],
        smart: true,
        action: function(i, wildcard){
            console.log("I cannot translate" + wildcard);
        }
    },
]);

// Inicie el reconocimiento y diga "hola"
window.plugins.speechRecognition.startListening(function (result) {

    // The hello command should be triggered
    result.forEach(function(option){
        if(artyom.simulateInstruction(option)){
            console.log("Matched : " + option, result);
            return;
        }
    });

}, function (err) {
    reject(err);
}, {
    language: "en-US",
    showPopup: true
});

Lamentablemente, el reconocimiento nativo no admite el reconocimiento continuo (al menos no en Android, sino en iOS), solo podrá usar un sentimiento de "Ok Google ..." en su proyecto.

Que te diviertas ❤️!