Krypton Solid

Mejora de la experiencia del usuario con la API Web Speech

Mejora de la experiencia del usuario con la API Web Speech

Es un momento emocionante para las API web, y uno a tener en cuenta es la API Web Speech. Permite que los sitios web y las aplicaciones web no solo le hablen, sino que también lo escuchen. Todavía es temprano, pero esta funcionalidad está configurada para abrir una amplia gama de casos de uso. Yo diría que es bastante asombroso.

En este artículo, veremos la tecnología y su uso propuesto, así como algunos excelentes ejemplos de cómo se puede utilizar para mejorar la experiencia del usuario.

Descargo de responsabilidad: Esta tecnología es bastante de vanguardia, y la especificación se encuentra actualmente con el W3C como un «borrador del editor no oficial» (al 6 de junio de 2014). La probabilidad de que el uso difiera ligeramente de los fragmentos de código de este artículo es alta. Comprobando la especificación y probar a fondo antes de publicar el código siempre es una buena idea.

Credito de imagen: Sebastián Schöld

Síntesis de voz

La API se divide en dos partes. Para empezar, veamos la parte de síntesis de voz, la parte que te habla. Si su sitio web tiene algún contenido textual, ya sea el cuerpo del texto, entradas de formularios, alt etiquetas, etc. – podría ejecutar algunas funciones encantadoras y el dispositivo diría las palabras al usuario.

Veamos algunos de los códigos necesarios para que esto suceda. Primero, crearía una nueva instancia del SpeechSynthesisUtterance interfaz. Luego, debe especificar el texto que se va a pronunciar. Luego, agregaría esta instancia a una cola, que le dice al navegador qué hablar y cuándo.

A continuación, he envuelto todo esto en una función para que llamemos, llamada speak, con el texto que queremos hablado como parámetro.

function speak(textToSpeak) {
   // Create a new instance of SpeechSynthesisUtterance
   var newUtterance = new SpeechSynthesisUtterance();

   // Set the text
   newUtterance.text = textToSpeak;

   // Add this text to the utterance queue
   window.speechSynthesis.speak(newUtterance);
}

Todo lo que tenemos que hacer ahora es llamar a esta función y pasar algunas palabras para que se digan:

speak('Welcome to Smashing Magazine');

Se incluye más funcionalidad en SpeechSynthesisUtterance. Puede detener, iniciar y pausar la cola, así como establecer el idioma, la tasa y la voz para cada enunciado. Detener, iniciar o pausar un enunciado desencadena un evento al que puede engancharse, al igual que cambiar la voz. ¡Mucho para jugar!

Por el momento, la síntesis de voz solo es compatible con Chrome y Safari (tanto en computadoras de escritorio como en dispositivos móviles). Además, las voces disponibles a través de la API dependen en gran medida del sistema operativo. Google tiene su propio conjunto de voces predeterminadas para Chrome, disponible en Mac OS X, Windows y Ubuntu. Sin embargo, las voces de Mac OS X también están disponibles y, por lo tanto, son las mismas que en Safari en OSX. Puede ver fácilmente qué voces están disponibles en la consola de Herramientas para desarrolladores:

window.speechSynthesis.getVoices();

Consejo: si estás en OS X, mira la voz «Zarvox».

Reconocimiento de voz

La otra parte de la API Web Speech es el reconocimiento de voz, que permite al usuario hablar por el micrófono del dispositivo y que el sitio web o la aplicación web reconozcan su voz.

Repasemos algo de código. Esta vez, crearemos una nueva instancia del SpeechRecognition interfaz. Debido a que esta parte solo es compatible con Chrome, tendremos que incluir el webkit prefijo.

var newRecognition = webkitSpeechRecognition();

SpeechRecognition viene con bastantes atributos. Uno que probablemente cambiemos es continuous, cuyo estado predeterminado de false significa que el navegador dejará de escuchar después de una pausa en el habla. Si desea que su sitio web o aplicación web siga escuchando, establezca el atributo en true:

newRecognition.continuous = true;

Para iniciar y detener el reconocimiento de voz, llame al start() y stop() métodos:

// start recognition
newRecognition.start();

// stop recognition
newRecognition.stop();

Nuevamente, podemos conectarnos a muchos eventos, como soundstart, speechstart, result y error. tengo preparó una demostración que muestra cómo acceder a las palabras detectadas, desde el result método de evento. El código continúa haciendo coincidir las palabras pronunciadas con una navegación simple, activando el enlace apropiado si se detecta.

Usos

Dictado

Por el momento, el uso más común de Speech API es como mecanismo de dictado o lectura. Es decir, el usuario habla por el micrófono y el dispositivo traduce el discurso en texto (como demostrado por el equipo de desarrollo de Chrome), o el usuario pasa texto para que lo lea el dispositivo.

Tener un dispositivo que diga cierta información definitivamente tiene sus ventajas. Imagina que tu espejo te dice cómo será el clima a primera hora de la mañana.

Muchos fabricantes de automóviles han instalado capacidades de conversión de texto a voz durante los últimos años. Imagine, en un futuro no muy lejano, que se le lea la lista de lectura de su navegador mientras conduce.

Control de voz

El dictado podría convertirse fácilmente en control por voz, como vimos con la demostración de reconocimiento anterior, que podría modificarse para permitir la navegación por un sitio web. Agréguelo a los televisores habilitados para la web y podríamos estar viviendo en el 2015 de Regreso al futuro 2.

Tengo la suerte de trabajar con algunos colegas muy talentosos, uno de los cuales creó una aplicación de puntuación de tenis. Me encantó descubrir que podía controlar la aplicación con su voz, pronunciando la partitura en voz alta mientras jugaba.

Traducción

La traducción se vería muy diferente cuando se realizara en tiempo real. Alguien podría conversar en un idioma y el dispositivo de otra persona hablaría lo que se dice en su propio idioma. Conéctalo a un auricular Bluetooth y come tu corazón Arthur Dent. Nos estamos acercando un poco más a que cada uno tenga el suyo. Pez babel.

Limitaciones

La capacidad sin conexión necesita más consideración. Tal como está, Chrome envía el audio grabado a sus servidores y devuelve el resultado. Por lo tanto, se necesita una conexión a Internet para que funcione, no lo ideal.

Conclusión

Sin embargo, sigue siendo emocionante y la tecnología se está abriendo. Espero con ansias el día en que buscar el control remoto sea cosa del pasado, y puedo decirle al televisor que transmita la última película de Sin City.

¿Realmente usaríamos la web para esto? ¿Por qué no? Ya es universal. Puede llevar la web y su discurso a donde quiera que vaya.

Me he encontrado con cierta resistencia al hablar de esta API. Las personas no pueden ver la necesidad de hacerlo con la web o se sentirían incómodos hablando con su dispositivo, ambas vistas válidas. Sin embargo, espero haberte inspirado a al menos intentarlo y pensar en ello la próxima vez que estés construyendo algo. Empiece el discurso de bienvenida: puede que sea justo lo que está escuchando.

Otras lecturas en SmashingMag:

Deja un comentario