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.speechRecognition
variable 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 sersingleInstance
. Puede sersingleTask
,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 (predeterminado5
, 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 (predeterminadotrue
, solo Android)showPartial
{Boolean} Permitir que se devuelvan resultados parciales (predeterminadofalse
, 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 ❤️!
Conviertete en un programador más sociable