Construye una UI controlada por voz

Feb 2, 2026
Cómo

Hemos visto muchas API nuevas agregadas a la web en los últimos años que realmente han habilitado el contenido web que tenga el mismo tipo de funcionalidad que las aplicaciones han tenido durante algún tiempo. Una API relativamente nueva es la API del reconocimiento de voz, que probablemente puede adivinar, le permite usar su texto como entrada en la página. Requiere un clic para iniciar el servicio y nuevamente para detenerse.

Un gran caso para esto podría estar permitiendo la accesibilidad entre sus usuarios, lo que le da la entrada de voz como una alternativa a hacer clic. Si su análisis muestra que tiene mucha navegación móvil, entonces piense cuánto más fácil sería hablar en su teléfono que usar el teclado.

Ha habido predicciones de que las interfaces basadas en pantalla pueden comenzar a desaparecer dentro de los diez años. Al principio, esto podría sonar como ciencia ficción, pero a medida que los usuarios se ponen cada vez más cómodos con el habla como aportan a través de los gustos de Alexa y Siri, entonces representa la razón de que esto se volverá a ser generalizado como un método de entrada. El tutorial aquí le permitirá acelerar la entrada de voz y luego usará que para salir de las revisiones de productos en una sitio de comercio electrónico .

[dieciséis] Descargar los archivos

[dieciséis] Para este tutorial.
  • 8 consejos para diseñar interfaces de voz.

01. Inicia el proyecto.

Build a voice controlled UI: Start the project

No se preocupe por CSS, ya que ya está escrito [Imagen: Web Designer]

Desde la carpeta Archivos del proyecto, abra la carpeta 'Inicio' en su Código IDE y abra el archivo 'Speech.html' para editar. Todos los CSS para el proyecto se escriben, ya que no es el foco de la API del habla, así que agregue el enlace que se muestra aquí para obtener el tipo de tipografía NOO Serif y vincular el archivo CSS. 

 & lt; link href = "https://fonts.googleapis.com/css?family=noto+serif" rel = "stylesheet" & gt;
& lt; link rel = "stylesheet" href = "css / style.css" & gt;

02. Añadir el contenido

Los primeros elementos de esto serán tener una envoltura en la que mantener todo nuestro contenido en pantalla. El primer elemento aquí será un mensaje oculto que le indique al usuario si la API del habla es compatible con el navegador. Esto solo se verá si no lo es. Luego, un encabezado le dice al usuario que los elementos de formulario que siguen se utilizarán para su mensaje. 

 & lt; div id = "wrapper" & gt;
& lt; span id = "no compatible" clase = "Soporte oculto" y GT; API del habla no es compatible y lt; / span & gt;
& lt; H2 & GT; Su mensaje: & lt; / h2 & gt;

03. Elegir los resultados.

Cuando se utiliza la API del habla, hay dos formas de mostrar el contenido. En uno, se muestra el texto cuando el usuario ha dejado de hablar y se apaga el botón 'Escuchar'. El otro muestra las palabras en la pantalla como se habla. Este primer botón de radio permite que se muestre el resultado final del habla. 

 & lt; div id = "typofinput" & gt;
& lt; span & gt; Resultados: & lt; / span & gt;
& lt; etiqueta & gt;
& lt; Tipo de entrada = Nombre de radio = Valor de tipo de reconocimiento = Final & GT; Discurso final & lt; / Label & GT;

04. Radio dos

Aquí se agrega el segundo botón de radio y este le permite al usuario seleccionar el texto que se mostrará a medida que hablan. Estos botones de radio serán recogidos por el JavaScript más tarde y se utilizarán para controlar la entrada de voz, pero por ahora, esto le permite al usuario tener una interfaz para controlar eso. 

 & lt; etiqueta & gt;
& lt; Tipo de entrada = Nombre de radio = Valor de tipo de reconocimiento = Interim Checked & GT; Como usted habla & lt; / Label & GT;
& lt; / DIV & GT;

05. Muestra el texto

Build a voice controlled UI: Display the text

El discurso del usuario terminará en el área de texto 'Transcripción' [Imagen: Diseñador web]

El texto que el usuario habla en la página deberá mostrarse en la pantalla. Aquí se agrega el área de texto que tiene el ID de 'Transcripción': esto será dirigido para que el discurso del usuario termine aquí. También hay un botón claro para eliminar el texto. 

 & lt; textarea id = "Transcripción" readonly & gt;
& lt; / textarea & gt;
& lt; br / & gt;
& lt; botón ID = "Borrar-all" clase = "botón" & gt; Clear Text & Lt; / Button & GT;

06. La última interfaz.

Build a voice controlled UI: The last interface

Al hacer clic en el botón de voz, comienza y detiene la detección de voz [Imagen: Diseñador web]

Los elementos de la interfaz final se agregan a la pantalla ahora. El botón del habla permite y deshabilita el habla, por lo que debe hacerse hacer clic antes de hablar. Haciendo clic de nuevo la detiene. Como esta es una interacción relativamente nueva, el registro debajo le dirá a los usuarios qué hacer. 

 & lt; DIV Class = "Button-Wrapper" & GT;
    & lt; div id = "SpeechButton" Class = "Start" & GT; / DIV & GT;
  & lt; / DIV & GT;
  & lt; div id = "log" & gt; haz clic para empezar a hablar & lt; / DIV & GT;
& lt; / DIV & GT;

07. Añadir javascript

Ahora agregue las etiquetas de script antes de la etiqueta del cuerpo de cierre. Aquí es donde todo el JavaScript irá. Las dos primeras líneas tienen los elementos de la página con la ID de coincidencia y almacenarlos en una variable. La transcripción es el resultado del texto del discurso. El registro actualizará al usuario con cómo usarlo. 

 & lt; script & gt;
VAR TRANSCRIPCIÓN = DOCUMENTO.GETELEMENTBYID ('Transcripción');
var log = document.getelementbyid ('registro');
& lt; / script & gt;

08. Resultados variables

Usando las siguientes variables, más elementos de interfaz se almacenan en caché en ellos. El botón de voz se convertirá en un palanca, dejando que los usuarios encendieran y desactiven los usuarios., Monitoreado por una variable booleana, verdadera / falsa. El botón Borrar todo eliminará los resultados de voz insatisfactorios. 

 VAR START = DOCUMENT.GETELEMENTBYID ('SpeechButton');
var claro = document.getelementbyid ('claro-all');
var hablando = falso;

09. ¿Es compatible?

Lo primero que nuestro código lo hará es averiguar si esta función de voz es compatible con el navegador del usuario. Si este resultado regresa como NULL, la instrucción SIF emite el mensaje oculto, mientras se toma alejarse simultáneamente el botón de inicio de la interfaz para detener la entrada de voz. 

 Window.SpeechRecognition = Window.SPECHEETRECOGNITION ||
Ventana.WebkitsPeechRecognition ||
nulo;
if (window.speechrecognition === null) {
document.getelementbyid ('no compatible'). classlist.reemove ('oculto');
start.claslist.add ('oculto');
} else {

10. Comience el reconocimiento.

El reconocimiento de voz se inicia como el 'de lo contrario' para el reconocimiento de voz disponible. La entrada continua se inicia, ya que es el valor predeterminado en los botones de radio. La función 'onResult' manejará los resultados de la entrada del habla. Esto se agregará al campo de texto de la transcripción. 

 VAR Reconocedor = nueva ventana.
Reconocimiento de voz();
Reconocedor. Continuo = verdadero;
Reconocer.onResult = Función (evento) {
Transcription.TextContent = '';
para (var i = event.resultindex; i & lt; evento.
resultados.length; i ++) {

11. ¿Final o interino?

La declaración de Si ahora comprueba si el usuario desea mostrar el texto a medida que están hablando (interino) o solo después de que terminen hablando (final). Notará que si es interino, cada palabra se agrega al texto con el '+ =', mientras que la final simplemente vuelve todo el texto allí. 

 IF (Event.Results [I] .ISPINAL) {
Transcription.TextContent = Event.Results [I] 
 .Transcripción;
} demás {
Transcription.TextContent + = event.Results [I] 
 .Transcripción;
}
}
};

12. Errores de manejo

Al igual que con la mayoría de las API de JavaScript, hay un controlador de errores que le permitirá decidir qué hacer con cualquier problema que pueda surgir. Estos se lanzan al 'Registro' DIV para dar feedback al usuario, ya que es esencial que sean conscientes de lo que podría estar sucediendo con la interfaz. 

 Reconocer.onError = Función (evento) {
log.innerhtml = 'Error de reconocimiento:' +
evento.message + '& lt; br / & gt;' + log.innerhtml;
};

13. ¡Empieza a hablar!

El escuchador de eventos aquí se inicia cuando el usuario hace clic en el botón para comenzar a hablar. Si el usuario no está hablando, entonces el botón cambia de color para mostrar hablar, la variable para hablar se establece en verdadero y se revisa el botón de radio 'interino' para ver si esta es la opción del usuario para la entrada. 

 start.addeventlistener ('clic', función () {
Si (! habla) {
Hablando = verdadero;
start.classlist.toggle ('Stop');
Reconocedor.interimresults = Documento.
QuerySelector ('Entrada [Nombre = "Reconocimiento
"] [Valor =" Interim "] ''). Comprobado

14. Tomar la entrada

La declaración 'Intentar y captura' ahora comienza el reconocimiento de voz y le dice al usuario que deben comenzar a hablar y que cuando terminen, 'haga clic nuevamente para detener'. La captura recogerá el error y lanzará eso en el DIV de 'Registro' para que el usuario pueda entender lo que podría estar incorrecto. 

 prueba {
reconocer.start ();
log.innerhtml = 'comienza a hablar ahora
& lt; br / & gt; haz clic para detener ';
} catch (ex) {
log.innerhtml = 'Error de reconocimiento:
& lt; br / & gt; ' + ex.Message;
}

15. Haga clic para detener

Ahora, cuando el usuario hace clic para dejar de hablar, se detiene el reconocimiento de voz. El botón se cambia de nuevo a verde de rojo mientras habla. La interfaz de usuario se actualiza de modo que se informa al usuario que el servicio se ha detenido. La variable de habla se establece en FALSE, lista para que el usuario vuelva a hablar. 

} else {
reconocer.stop ();
start.classlist.toggle ('Stop');
log.innerhtml = 'Reconocimiento detenido
& lt; br / & gt; haz clic para hablar ';
Hablando = falso;
}
});

16. Borrar el texto.

Build a voice controlled UI: Clear the text

El botón claro elimina el habla interpretada incorrectamente [imagen: diseñador web]

El código final para esta sección es solo un botón claro para eliminar el texto de entrada de voz en caso de que se interprete erróneamente. Guarde el archivo y pruebe esto en su navegador. Podrá hacer clic en el botón para hablar en la computadora y ver los resultados. 

 Clear.AddeventListener ('clic', Función () {Transcription.TextContent = '';
});
}

17. Añadir Propósito

Ahora, como tiene un ejemplo de trabajo, debe haber algún propósito para la interfaz, así que vamos a hacer esto para que los usuarios puedan ingresar revisiones. Guarde la página y luego seleccione Guardar como, con el nuevo nombre de 'Reviews.HTML'. Agregue los siguientes elementos HTML justo después del & lt; DIV id = "Wrapper" & GT; línea. 

 & lt; H1 & GT; Comentarios de productos y LT; / H1 & GT;
& lt; div id = "Reviews" & GT; / DIV & GT;

18. PRESENTACIÓN TOTAL

Build a voice controlled UI: Total submission

El botón Enviar envía un discurso ingresado [Imagen: Diseñador web]

El código anterior mantendrá las revisiones. El usuario deberá enviar su entrada de voz, así que agregue el botón de envío inmediatamente después del botón 'Borrar texto', que estará alrededor de la línea 28 en su código. Luego, puede moverse hacia el JavaScript para el siguiente paso. 

 & lt; Botón ID = "Enviar" Clase = "Botón" & GT; Presentar la revisión & lt; / Button & GT;

19. Nuevos elementos de interfaz.

En la parte superior de su Javascript, agregue las nuevas variables para mantener las referencias a los nuevos elementos de la interfaz que acaba de agregarse. Estos le proporcionarán una forma de enviar y mostrar los resultados en la pantalla dentro de la sección 'Comentarios' de la página. 

 var someta = document.getelementbyid ('someter');
var revisión = document.getelementbyid ('reviews');

20. Enviar la entrada

Ahora, el código aquí se encargará cuando el usuario hace clic en el botón Enviar, colóquelo a la derecha antes del código de botón 'Borrar', que debería estar alrededor de la línea 88 en su código. Primero, se crea una etiqueta de párrafo y se agrega posteriormente la entrada de voz en esto. Esto se agregará entonces a la sección 'Revisión'. 

 someter.addeventlistener ('click', función () {
Sea P = Document.CreateEnement ('P');
var textNode = document.createtextNode
(Transcripción.Value);
P.Appendchild (TextNode);
revisión.appendchild (P);
Deja hoy = nueva fecha ();
Sea S = Document.CreateEnement ('Pequeño');

21. PRESENTACIÓN FINAL

Build a voice controlled UI: Final submission

Si desea almacenar un discurso enviado, tendrá que usar una base de datos [Imagen: Web Designer]

La fecha se agrega de modo que la revisión se proporcione a tiempo en el documento. Finalmente, se agrega una regla horizontal para mostrar dónde finaliza cada revisión, entonces el texto se borra listo para la nueva entrada. Guarda la página y prueba esto. Verá que ahora puede enviar su discurso a la página como revisiones. Para la persistencia, deberías usar una base de datos para almacenar estos resultados. 

 TextNode = document.createtextNode (hoy);
S.Appendchild (TextNode);
revisión.appendchild (s);
Let HR = Document.CreateEnement ('HR');
revisión.appendchild (hr);
Transcription.TextContent = '';
});

[dieciséis] Este artículo se publicó originalmente en la emisión 286 de la revista Creative Web Design Design

[dieciséis] Diseñador web [dieciséis] . [dieciséis] Comprar emito 286 aquí [dieciséis] o [dieciséis] Suscríbete al diseñador web aquí [dieciséis] .

Artículos relacionados:

  • 14 de las mejores API de JavaScript
  • Construir un chatbot de Ai-Powered
  • 5 Tendencias de UX emergentes en 2019

Cómo - Artículos más populares

Cómo pintar un castillo con SketchUp

Cómo Feb 2, 2026

[dieciséis] Hay un rango de Técnicas de arte Eso puede ayudar con su pintura digital, pero no se está negando esa creaci�..

Cómo construir diseños complejos usando CSS

Cómo Feb 2, 2026

[dieciséis] El diseño para la web siempre ha sido limitado, nunca ha habido nada realmente dedicado a hacer que el contenido sea fác..

Diseñe un sitio receptivo con dimensionamiento basado en EM

Cómo Feb 2, 2026

Probablemente haya escuchado que debe usar unidades relativas para el tamaño de la fuente. Esta es una buena regla para el diseño web accesible; Si el usuario cambia el tamaño de fuente pr..

Descargar archivos para 3D World 232

Cómo Feb 2, 2026

[dieciséis] Para descargar los archivos adjuntos para el número 3D del mundo 3D, simplemente haga clic en el enlace a continuación, ..

Cómo mezclar el color de la sombra en la pintura

Cómo Feb 2, 2026

[dieciséis] Algunas personas encuentran mezcla para las sombras difíciles, a menudo tratando de mezclar un color completamente nuevo...

Haz un cartel de una plantilla en Photoshop

Cómo Feb 2, 2026

Adobe está lanzando una nueva serie de tutoriales de video que hoy se llama hacerlo ahora, lo que tiene como objetivo esbozar cómo crear proyectos de diseño específicos usando varios ..

Cómo usar las formas de mezcla para animar los caracteres

Cómo Feb 2, 2026

Mientras aparezca tu Modelos 3d El uso de huesos puede ser muy eficaz, a veces ese método no es adecuado, y las expresiones faciales son una de esas veces. En ca..

Combina habilidades tradicionales y digitales para crear una cubierta cómica

Cómo Feb 2, 2026

[dieciséis] Durante años me intimidaron trabajando digitalmente. Algo sobre la punta de plástico en una superficie plástica se sint..

Categorías