Web Speech API Insights

¡Hola, JS Nation! Estoy muy feliz de estar aquí con ustedes hoy. Les voy a mostrar cómo he creado mi propio karaoke gamificado en un navegador usando Web Speech API. Así que permítanme presentarme.

Hola, mi nombre es Anna y soy una desarrolladora frontend en la agencia Hattar. Paso la mayor parte de mi tiempo libre en mi blog, y estoy bastante interesada en la comunidad IndieWeb. De hecho, en el pasado, he escrito un caso para ello en Smash Magazine. Así que por favor échenle un vistazo y si están en el chat, por favor envíenme sus sitios web personales y blogs. Me encantaría leerlos.

Bien, antes de comenzar, debo mencionar una cosa en particular. No represento a ningún proveedor de navegadores. Y por eso, no he ido a karaoke en años ahora. Y en realidad pensé que recibiría más invitaciones después de dar esta charla varias veces, pero no ha sucedido. Y también, en realidad soy una gran fan de The Rasmus. No soy una fanática, solo una fan. Y la razón por la que menciono esto es que es la razón por la que esta charla incluso surgió en mi mente. Tenía un problema que necesitaba solucionar.

Así que cada vez que voy a karaoke, solo hay una canción de The Rasmus disponible. Siempre está en el chat en las sombras. Y simplemente no es mi favorita. Así que pop, seguro. Pero necesitaba más. Así que empecé a pensar, está bien, ¿y si tuviéramos más que solo letras en la pantalla? ¿Y si pudiéramos gamificar la experiencia? Porque sé que ganaría. Conozco todas las letras de memoria. Así que me propuse una aventura para crear mi experiencia de karaoke perfecta. Y spoiler, no salió tan bien como imaginé. Así que veamos por qué. Busqué reconocimiento de voz a texto, y todos los resultados que aparecieron eran de empresas privadas que ofrecen este tipo de API como un servicio por un costo. Pero sabemos que hay un reconocimiento de voz nativo del navegador, y es gratis. Así que pensé, no, no voy a gastar dinero en esto. Así que hablemos de Web Speech API, en particular, el reconocimiento de voz.

Así que la Web Speech API se divide en dos, el reconocimiento de voz y la conversión de voz a texto, y empieza a ser obvio cómo voy a usar el reconocimiento de voz aquí. Pero en realidad, una de las ideas principales fue creada para karaoke, pero fue para permitir a los desarrolladores usar el reconocimiento de voz como una entrada para formularios, dictado continuo, y control. De hecho, hay un borrador bastante antiguo que detalla cómo debería funcionar esta API en un campo de entrada. Es realmente antiguo, no todo fue implementado, pero sigue siendo una lectura muy interesante.

De hecho, puedes ver esta visión en vivo en una herramienta con la que muchos de nosotros estamos familiarizados. En Chrome, al usar Google Translate, puedes usar la función de micrófono para hablar en un campo de entrada y verlo traducido en texto. Pensé, genial, el código funciona en mi cabeza, así que veamos cuál es el soporte del navegador. Estaba bastante optimista. Fui a MDN, y parece que actualmente no es compatible con Firefox, y cualquier otro navegador aún requiere un prefijo de proveedor o un nombre diferente. Y pensé, está bien, un navegador menos, no es lo peor, sigamos. Incorrecto.

En realidad, este es un resultado más realista, en mi experiencia. Y resulta que la explicación es bastante simple. Esta cita de la página de MDN dice, en algunos navegadores como Chrome, usar el reconocimiento de voz en una página web implica un motor de reconocimiento basado en servidor. Tu audio se envía a un servicio web para el procesamiento de reconocimiento, por lo que no funcionará sin conexión. Correcto. Pensándolo bien, tiene sentido. Necesita acceso a muchos datos para entrenar. Así que los proveedores de navegadores que pertenecen a grandes corporaciones tienen más facilidad con toda la infraestructura necesaria, así como con esos datos para entrenar.

Y esta es una nota importante, los navegadores que usan Chrome no necesariamente tienen acceso al servicio de transcripción de Google. Es un servicio de pago de Google, que Chrome puede usar de forma gratuita. Nuevamente, sí, tiene sentido. Y al probarlo en Safari, se me presentó un popover que decía que los datos de voz de esta aplicación se enviarán a Apple para procesar tus solicitudes. Esto también ayudará a Apple a mejorar su tecnología de reconocimiento de voz. Muy bien. En este punto, me quedan solo dos navegadores. Pero estaba demasiado involucrado, así que no voy a rendirme. Pero tenía curiosidad, ¿qué está pasando en Firefox? Desafortunadamente, no pude estar en contacto con alguien que esté trabajando actualmente en esto, pero me señalaron un hilo esclarecedor que habla sobre sus preocupaciones sobre la privacidad y la implementación. Así que es un hilo realmente interesante. Realmente recomiendo echarle un vistazo, especialmente si tienes curiosidad por ver por qué algunos navegadores toman las decisiones que toman.

Y estaba probando cosas. Resulta que había otras peculiaridades que son bastante importantes. No puedes alimentar flujos a esta API, solo micrófono. Safari en móviles no permitirá el reconocimiento de voz una vez que esté instalado como un PWA. Además, en los teléfonos móviles, pueden emitir un sonido como un sonido de notificación cuando el micrófono se enciende y apaga, y verás por qué esto es importante.

Oh, querido. Pero veámoslo en acción. Trabajemos con lo que tenemos. Y una de las formas más fáciles de ver algo como esto en acción es buscar un bookmarklet. Así que decidí encontrar cosas hechas por otras personas, y de hecho encontré uno realmente interesante llamado Select and Listen. Y la forma en que esto funciona es que visitas una página web, cualquiera que sea, seleccionas el texto que quieres que te lea. Por ejemplo, voy a la página web de JS Nation. Seleccionaré este texto aquí. Y haré clic en mi bookmarklet Select and Listen. Y debería hacer algo.

Ana trabaja como desarrolladora front-end para la agencia Hector. Comenzó a programar como adolescente construyendo sitios de fans y ha estado trabajando como desarrolladora front-end durante los últimos 11 años. Correcto. Así que esta es la prueba de voz. Solo lee cosas. Y esta persona, cuando lo creó, tiene diferentes voces e idiomas también. Así que es realmente, realmente genial. Realmente disfruto eso. Así que decidí construir una pequeña demo, solo usando un par de palabras para ver el reconocimiento de voz en acción. Estaba como, déjame ver si detecta solo algunas cosas. Así que construí una demo. OK, pretendamos que estás en la cocina. Quieres cocinar algo. Tus manos están sucias y quieres tocar tu cosa para verificar la receta o las instrucciones y yendo de un lado a otro. Así que construí una pequeña demo tonta donde activo mi navegación por voz y pido que la página se desplace según lo que digo.

Vamos a intentarlo. Sin manos, mira. OK. Desplázate a los ingredientes. Desplázate hacia arriba. Desplázate hacia arriba. Desplázate hacia abajo. De vuelta a las instrucciones, por favor. Tienes que decir por favor. Desplázate hacia arriba. Desplázate hacia arriba. Muy bien. Genial. Genial. Tengo una demo. Solo quiero mostrar mi gato. Tengo una demo. Funciona. Capta lo que estoy diciendo y hace esas pequeñas instrucciones como desplazarse a una parte específica de la página o desplazarse hacia arriba y hacia abajo.

Genial. Creo que estamos listos para construir mi karaoke entonces. Comencemos simple. La forma en que imagino esto es que tendrá un botón de inicio y un botón de parada. Mostraremos nuestra transcripción si quiero solo para verificar que las cosas están funcionando como se espera. Cargaremos nuestro audio, cargaremos nuestras letras y cargaremos nuestro JavaScript. Haremos algo de estilo básico con gradientes y se verá algo así. Correcto. Lo bueno aquí es que no necesitas tener grandes habilidades de diseño porque cualquier cosa que hagas se verá mejor que tu bar local. Confía en mí. Iniciaremos nuestro reconocimiento de voz.

Pediremos mostrar los resultados intermedios. Nada demasiado sofisticado. Gran inglés, gran británico como idioma. Y lo añadiremos a nuestro documento. Captará lo que estamos diciendo, lo pondrá en un div oculto en este caso y lo almacenará y eso debería ser todo.

Correcto. Así que, esta es la parte divertida. El reconocimiento de voz realmente se detiene después de un tiempo. Y tiene sentido porque querrás que funcione constantemente y consuma recursos si no está sucediendo nada realmente. Bueno, ellos no lo saben, pero podría tener sentido. Así que, lo que la gente suele hacer es añadir un event listener que cuando el reconocimiento termina, podemos hacer que comience de nuevo. Y es un poco de trampa, pero ¿recuerdas cuando dije que la última peculiaridad era que en los móviles puede emitir sonidos cuando el micrófono se enciende y apaga? Esto es a lo que me refiero. Así que, en los teléfonos móviles, puede convertirse en una experiencia un poco molesta porque el micrófono se apaga automáticamente y estamos forzándolo a que se vuelva a encender. Así que, puedes escuchar sonidos de notificación del micrófono encendiéndose y apagándose. Es una peculiaridad a tener en cuenta, pero es lo que es.

Es gratis, estamos obteniendo lo que pagamos. Correcto. Sigamos adelante. Obviamente, idealmente, habría usado una canción de The Rasmus, pero el copyright no me lo permite. Así que, vamos por una canción infantil. Añadiremos nuestras letras de manera similar a cómo funcionan los subtítulos en las películas. Añades los segundos en que las líneas aparecen y desaparecen, y añades tu línea en particular. Así que, elegí twinkle twinkle little star porque es bastante corta. ¿Y cuál es la lógica? Correcto. Así que, cuando se inicia el reconocimiento de voz, la canción también comenzará. Verificaremos si el tiempo actual de la canción cae entre el inicio y el final de la línea de letra esperada. Si es así, añadamos una clase que muestre que es una línea de letra actual.

Esta es la lógica. Se traduce aproximadamente en esto. Iniciar reconocimiento de voz, iniciar canción, verificar el tiempo actual, añadir la clase CSS para mostrar que la letra está actualmente en progreso, y eso debería ser todo.

La misma lógica al revés. Si el tiempo actual es mayor que el tiempo final de una línea de letra, añadamos una clase que la marque como pasada. Una vez que esa línea está en el pasado, hagamos algunas verificaciones. No es muy sofisticado. De hecho, después de revisar nuestras transcripciones, principalmente necesitamos verificar si lo que dijiste, y en realidad lo que la computadora capturó coincide palabra por palabra. Y esto en realidad incluye hacer algunos if-elses conocidos. Todos dijeron un montón de cosas sofisticadas, pero dicho esto, todo lo demás es básicamente añadir y eliminar clases.

Correcto. Vamos a intentarlo. Primero, voy a leer las letras. Luego, voy a leer las letras con palabras ligeramente incorrectas para ver si mi coincidencia de errores funciona. Y luego, desafortunadamente, voy a cantar, y lo siento mucho de antemano. Lo siento mucho. Vamos a intentarlo. Veamos nuestra demostración. Me encanta. Bias. He añadido el botón de inicio y parada. También añadí el botón de cambio, que es algo que en realidad pensé que era bastante divertido de hacer.

Correcto. Vamos a intentarlo. Voy a leerlo primero. Twinkle, twinkle, little star.

How I wonder what you are. ¡Yay! Bien. He cambiado un poco las letras. Así que, veamos si esto coincide. Twinkle, twinkle, little coat. How I wonder if you will load. Up above the browser high. Like a bug in the sky. Twinkle, twinkle, little star. How I wonder what you are. ¡Yay! Correcto. Así que, no está tan mal. Como, lo detectó. Marcó high como estando en el orden correcto, y no me dio ningún color positivo porque no dije diamond y obtuvo bug en su lugar.

Vamos a intentarlo. Twinkle, twinkle, little star. How I wonder what you are. Up above the world so high. Like a diamond in the sky. Twinkle, twinkle, little star. How I wonder what you are. Up above the world so high. Ahí vamos. Correcto. Modelando mortificante, pero olvidemos eso. La animación amarilla, el texto en ejecución te atrapó. Entonces, ¿cuál es el veredicto? Hay potencial, pero no creo que estemos allí todavía. Pero me divertí. Y mira, hay muchas demostraciones y proyectos divertidos construidos alrededor de esta API. Tony Edwards hizo una masterclass fantástica llamada Beat Rhymes and Edit Tests, y en su masterclass quería ver si el Web Speech API podría ayudarlo a anotar las rimas que se le ocurren.

Similar a mí, Tony señaló que no era perfecto, pero fue un gran experimento, y realmente recomiendo ver esta charla. Si quieres aprender más, Stephanie Eccles construyó un conjunto divertido de chat para el 12 Days of Web Dev Challenge, y Wes Bowles, quien también estaba hablando en JS Nation, tiene un capítulo sobre la Web Speech API en su curso gratuito de JavaScript. Y hay muchos otros proyectos que utilizan esta tecnología.

Entonces, durante la pandemia, el subtitulador web se convirtió en una herramienta para muchas, muchas personas para usar en reuniones y conferencias en línea. Ha sido descontinuado, por lo que el código fuente está disponible en GitHub, así que échale un vistazo. Y también hay bastantes polyfills disponibles, implementaciones con WebRTC, y como se mencionó antes, muchas empresas privadas que te ofrecen reconocimiento de voz como servicio.

Entonces, ¿qué sigue? No lo sé. Pero realmente creo que es en eventos como estos donde estas APIs de navegador pueden crecer, si estamos interesados en ellas. Al final del día, las interfaces de voz no van a desaparecer. Mientras tanto, compartiré y apoyaré la actual llamada a la acción al hermano del reconocimiento de voz. Deberías buscar la increíble charla de Leone Watson, Designing Voice Interfaces, donde se presenta una llamada a la acción para apoyar CSS speech. No te arruinaré esta charla, así que realmente deberías verla. Y también hay proyectos como el Common Voice de Mozilla, donde puedes donar tu voz, y lo más importante, al menos desde tu acento, y también ofrecerte como voluntario para hacer algo de control de calidad.

Seamos realistas. ¿Vas a usar la Web Speech API en el trabajo? Probablemente no. Así que tal vez pienses, está bien, genial, lo que sea. ¿Cómo es esto útil para mi trabajo diario? Incluso para accesibilidad, lo más probable es que te pidan que agregues una de esas malditas barras de herramientas inaccesibles en su lugar. Pero si lo haces, enfócate en el diseño de interfaces de voz. Y aquí hay algunas cosas a considerar. Evita el contenido propuesto. Considera la retención y la velocidad al destino. Audita tu contenido para ver qué tan conversacional y hablado suena. Por ejemplo, las FAQs son un ejemplo fantástico de buen contenido amigable con la voz que es directo a la pregunta y respuesta. Audita cómo suena tu contenido en aislamiento. Cosas como haz clic aquí y leer más no suelen significar nada cuando se escuchan en aislamiento. Prueba cómo suena el habla sintetizada en diferentes dispositivos. Así que estate en tu portátil y tu móvil, considera qué indicaciones dirigen la conversación, y otro buen ejemplo es cuando usas tu teléfono y llamas a un servicio y te dan múltiples opciones y es tan difícil memorizar solo escuchando las opciones. No cubrí esto en mi demostración, pero considera la recuperación de errores. Sin tiempos de espera del habla, sin entender, y sin errores de coincidencia. Porque como yo, no todos van a tener un inglés nativo perfecto, que probablemente es con lo que se entrena el dato.

Hay libros fantásticos sobre este tema. Realmente recomiendo echarles un vistazo. Y entonces, ¿por qué esto? Mira lo que hicimos. Hicimos algunas demostraciones funcionales. Terminé pasando mucho tiempo leyendo y experimentando con la API del navegador, en este caso, la API de live speech, elementos de medios HTML. No lo parece, pero hubo mucho JavaScript involucrado en esto.

Terminé teniendo contenido para una charla, animaciones CSS, y simplemente pasé un gran momento. Y mi objetivo con esta charla era que puedas aprender construyendo cosas inútiles. Y solo recientemente me di permiso para construir cosas no productivas que no son para mi trabajo. Y en el pasado, me sentiría culpable si no hacía cosas productivas después del trabajo. Los proyectos paralelos no necesitan ser monetizados para ser válidos. No necesitan convertirse en paquetes NPM o proyectos de código abierto. Y si alguna vez piensas que tu idea no es lo suficientemente buena, ignora ese pensamiento. Aburrido está bien. Crea tu propio espacio seguro. Y me divertí mucho construyendo esto, y me sentí tan satisfecho después de que funcionara.

Así que, gracias.