Implementación de Efecto de Máquina de Escribir con Sonido Activado por Usuario

En este tutorial, exploraremos cómo crear un fascinante efecto de máquina de escribir utilizando CSS y JavaScript. Este efecto se activará cuando un usuario sitúe el puntero del ratón (hover) encima de la imagen de una postal. Para mejorar aún más la experiencia, utilizaremos JavaScript para reproducir un sonido de escritura en la página y lo sincronizaremos con las letras a medida que aparezcan.

Es importante notar que este efecto está pensado principalmente para pantallas de escritorio. La implementación de su funcionalidad en pantallas móviles o táctiles está más allá del alcance directo de este ejercicio, aunque al final del tutorial se propondrán dos maneras de optimizarlo para escenarios responsivos.

Demostración del Efecto de Máquina de Escribir con JavaScript

¡Revisa la demostración final! Haz clic en el botón de sonido para activar el audio y coloca el puntero del ratón sobre cada postal para que veas el efecto en acción.

Recursos Necesarios para el Proyecto

Para este ejercicio, necesitaremos algunos elementos clave. Aquí detallamos los recursos utilizados:

• Cuatro imágenes de Unsplash.
• Un ícono de sonido de iconmonstr.
• Una fuente de máquina de escribir personalizada (web font) de Envato Elements, como "Merchant Ledger | Paquete de fuentes".

Como miembro Pro de CodePen, los archivos pueden ser subidos directamente al Asset Manager. Si necesitas más fuentes de máquina de escribir, Envato Elements tiene una enorme colección de fuentes con estilos de máquina de escribir para ayudarte a personalizar este proyecto.

Estructura HTML Base

La estructura HTML constará de varios elementos principales para soportar el efecto:

• Un elemento div que contendrá un título y un botón. La clase del botón determinará si se reproducirá un sonido cada vez que situemos el puntero del ratón sobre una imagen. De manera predeterminada, el sonido no se reproduce. Para activarlo, tendremos que hacer clic en el botón.
• Un elemento div que contendrá cuatro imágenes junto con su texto asociado. De manera predeterminada, todos los textos serán invisibles. Cada uno de ellos aparecerá en cuanto coloquemos el puntero del ratón sobre la imagen asociada. Lo ideal es que estos textos sean cortos.
• Un elemento audio que se encargará de integrar el sonido en la página. Aunque es opcional, se le dará el atributo preload="auto" para informar a los navegadores que el audio se debe cargar al cargar la página, mejorando la experiencia del usuario al tener el sonido listo para su reproducción.

Estilización con CSS

A continuación, abordaremos los aspectos más importantes de nuestros estilos. En pro de la simplicidad, y dado que JavaScript es nuestro objetivo principal, no cubriremos aquí los estilos de restablecimiento (reset).

• Usaremos CSS Grid para crear el diseño de los dos divs de envoltura, facilitando la organización de los elementos.
• Usaremos el pseudoelemento ::before del botón de conmutación (sonido) para indicar que el sonido está apagado inicialmente.
• El texto de las imágenes serán elementos posicionados de forma absoluta y serán invisibles por defecto. Dependiendo de la imagen, el texto aparecerá en su parte superior o inferior.
• Todos los caracteres de cada texto aparecerán secuencialmente en la imagen flotante. Esto se logrará gracias a la propiedad transition-delay que les añadiremos mediante JavaScript. Sin embargo, deberán desaparecer simultáneamente cuando quitemos el puntero del ratón de la imagen.
• Agregaremos un espacio de 4 px a los span vacíos (caracteres) de cada texto. Hasta el momento, nuestro marcado no contiene span, pero pronto los generaremos a través de JavaScript.

Manipulación del DOM con JavaScript

Modificando el Marcado de los Textos

Para mayor seguridad, quizás debas ejecutar estas acciones al cargar la página (escucha el evento load). Primero, llamaremos a la función generateCharactersMarkup() y le pasaremos el elemento figure correspondiente.

Encontraremos el texto de la imagen y crearemos un bucle a través de sus caracteres. Envolveremos cada carácter alrededor de un elemento span. Comprobaremos si el carácter es el primero o es igual al espacio. Si este no es el caso, recibirá la propiedad transition-delay. El valor de esta propiedad especificará la cantidad de tiempo de espera antes de mostrar el carácter objetivo. En nuestro ejemplo, cada transición se producirá después de 150 ms del inicio de la anterior. En tus proyectos, puedes ajustar este número mediante la variable sec.

Después de ejecutar la función, el marcado se verá modificado para incluir los span. Observa que el primer carácter y los espacios no reciben un estilo en línea.

Naturalmente, en vez de generar este marcado mediante programación, podríamos haberlo añadido de manera predeterminada en nuestro HTML. Pero esto tendría dos desventajas: en primer lugar, se abultaría el HTML; en segundo lugar, se dificultaría su mantenimiento en caso de que se requiera algún cambio.

Control de Reproducción de Sonido con JavaScript

En este punto, pongamos el sonido en el bucle. Recuerda que estará desactivado (off) de forma predeterminada. Su estado será controlado por la clase CSS btn-sound-off y la bandera JavaScript sound. Cada vez que hagamos clic en el botón, los dos se actualizarán. Por ejemplo, si el sonido está activado, el botón no contendrá esta clase y el valor de esta bandera será true.

Sincronización del Sonido con la Animación

Cuando el sonido está activado, debería reproducirse al colocar el puntero sobre la imagen. ¿Pero por cuánto tiempo? Eso es lo que debemos considerar. Pues bien, nuestro archivo de audio de demostración es bastante largo, unos 24 segundos. Obviamente, no queremos reproducirlo todo. Solo una pequeña parte hasta que finalice el efecto de la transición.

Para hacerlo de esta manera, primero tenemos que calcular la duración de este efecto. Teniendo eso en cuenta, a continuación inicializaremos un temporizador que reproducirá el sonido durante este período de tiempo. Para entenderlo mejor, revisemos el efecto de la primera imagen. Si revisas la consola de tu navegador, notarás que tu último carácter tiene un retraso de 2.4 segundos. Eso significa que el efecto total durará 2.4 segundos (no contamos la duración de la transición, pues es casi cero).

Para mantener la sincronización entre el efecto de la transición y el tiempo de reproducción del audio, reproduciremos los primeros 2.4 segundos del audio y luego lo pausaremos. Para esta implementación, utilizaremos el evento mouseenter.

Por otra parte, el sonido debería hacer una pausa y volver a su posición inicial al quitar el puntero del ratón. Para esta implementación, usaremos el evento mouseleave.

Consideraciones Adicionales y Optimización

Hemos cubierto muchas cosas en la implementación de este genial efecto de escritura al colocar el puntero del ratón, haciéndolo más realista al sincronizarlo con el sonido de una antigua máquina de escribir.

Dispositivos Móviles y Táctiles

Como lo comentamos en la introducción, este efecto no está optimizado para dispositivos móviles/táctiles. Existen varias maneras de abordarlo:

• Desactivar el efecto en estas interfaces: Por ejemplo, escribir algún código para la detección de pantallas táctiles y, en ese caso, mostrar el texto de manera predeterminada.
• Capturar los eventos de toque: Si deseas mantener el efecto para todos los dispositivos, asegúrate de capturar los eventos de toque (touch events).
• Desacoplar de eventos del ratón: Dependiendo de tus necesidades, puedes desacoplar el efecto de los eventos del ratón y mantenerlo independiente o como parte de otros eventos como el de scroll.

Limitaciones del Diseño

Por último, ten presente que este efecto podría no funcionar en todas las circunstancias sin una personalización adicional. Por ejemplo, como se comentó anteriormente, el texto de las imágenes no debe ser largo y dividido en varias líneas. Textos concisos y de una sola línea son ideales para mantener la fluidez y el impacto visual deseado.

tags: #como #desbloquear #reproduccion #automatica #con #sonido