Cómo agregar efectos de sonido a tus aplicaciones React

En este artículo, aprenda a incorporar efectos de sonido en sus aplicaciones React usando una pequeña biblioteca llamada uifx.

Los efectos de sonido no se usan mucho en las aplicaciones. Normalmente solo se ven en las aplicaciones de las grandes empresas tecnológicas, como:

• El teclado de iOS hace un sonido de golpeteo de madera.
• La aplicación iOS de Twitter emite un sonido de “bup” cuando la deslizas para actualizar
• “Hey Google” y “Hey Siri” tienen tonos de meme distintivos cuando invocas sus nombres

Creo que nos hemos acostumbrado tanto a estos "ruidos" que ya ni siquiera se consideran funciones interesantes. ¡Pero lo son! Imagínense si Apple de repente decidiera eliminar el sonido "tic-tac" de su teclado. Aquellos de nosotros que nos hemos acostumbrado a ese ruido familiar, probablemente sentiríamos algún tipo de extraña privación auditiva. Sin embargo, en el caso de las aplicaciones web, casi nunca vemos efectos de sonido (sfx) integrados en la interfaz de usuario y, francamente... casi no esperamos que estén allí.

Las aplicaciones de iOS y Android no son los únicos medios digitales que pueden expresarse mediante sonidos. La web puede... ¡y debería adoptar más los efectos de sonido!

Presentando UIfx

Me di cuenta de que había muchas bibliotecas de audio completas como SoundManager o Howler, pero ninguna de ellas estaba diseñada para efectos de sonido de interfaz de usuario que requieren una estrategia de "disparar y olvidar" para reproducir pequeños fragmentos de sonido... así que construí una biblioteca simple para esto llamada uifx:

import UIfx from 'uifx';import mp3File from './my-sounds/beep.mp3';const beep = new UIFx({asset: mp3File});button onClick={beep.play}Signup/button

Aquí se utiliza React, pero puedes usarlo en cualquier entorno de JavaScript que tenga la AudioAPI, ¡que es la mayoría de los navegadores modernos!

Uso básico

A continuación se muestra un ejemplo práctico en el que se utilizan efectos de sonido para proporcionar retroalimentación de audio sobre un input type="range"/elemento.

import React, { Component } from 'react';import UIfx from 'uifx'; import tickAudio from './my-sounds/tick.mp3';const tick = new UIfx({asset: tickAudio});export default class InputRange extends Component {  state = {    value: 0,  }  onChange = (event) = {    this.setState({ value: event.target.value });    tick.play();  }  render() {    return (      div        div{this.state.value}/div        input          type="range"          value={this.state.value}          onChange={this.onChange}        /      /div    )  }}

¿No te viene a la mente la imagen de una herramienta de relojero o algo así? ¡Qué interesante! ¡El audio añade una experiencia sensorial completamente nueva!

Reproducción con limitación

UIfxestá diseñado específicamente para reproducir archivos de audio pequeños en rápida sucesión. Sin embargo, a veces querrás reducir un poco la velocidad de reproducción para que no suene demasiado alocado ni sobrecargue los altavoces del usuario:

const tick = new UIfx({  asset: tickAudio,  throttleMs: 40})

Encontrar el equilibrio adecuado de retroalimentación en tiempo real es más un arte que una ciencia. Normalmente trato de ponerme en el lugar del usuario y preguntarme cuánta retroalimentación de audio instantánea quisiera, y ajusto la velocidad en consecuencia.

Cambiar el volumen de reproducción

De forma predeterminada, los sonidos se reproducirán a todo volumen. Para cambiar el volumen de un UIfxsonido, llame UIfx.setVolume()al método:

beep.setVolume(0.8).play();// or...beep.setVolume(0.8);beep.play();

Los argumentos válidos son 0.0→ 1.0para emular la AudioAPI. En la demostración que aparece a continuación, el volumen se modifica utilizando el input type="range"control deslizante anterior:

class ToastNotifications extends Component {  state = {    isToastVisible: false,    volume: 0.5,  }  sfx = {    beep: new UIfx({asset: beepAudio}),    tick: new UIfx({asset: tickAudio, throttleMs: 100}),    appear: new UIfx({asset: appearAudio}),    disappear: new UIfx({asset: disappearAudio})  }  onVolumeChange = (event) = {    this.setState(      { volume: event.target.value },      // "setState" cb to get updated volume        () = this.sfx.tick.setVolume(this.state.volume).play()    )  }  toggleToast = () = {    this.setState(      { isToastVisible: !this.state.isToastVisible },      () = {        this.state.isToastVisible  //   decide which sfx to play          ? this.sfx.appear.setVolume(this.state.volume).play()             : this.sfx.disappear.setVolume(this.state.volume).play()      }    )  }  render() {    return (      div        button onClick={this.toggleToast}          Toggle notification        /button        div          Volume: {this.state.volume}        /div        input          value={this.state.volume}          onChange={this.onVolumeChange}          min="0.0"          max="1.0"          step="0.01"          type="range"        /        Toast isVisible={this.state.isToastVisible}/      /div    )  }}

Si no desea que persistan los cambios de volumen, puede reproducir fácilmente a un volumen diferente pasando un argumento a UIfx.play():

const tick = new UIfx({  asset: tickMp3,  volume: 1.0});tick.play(0.25); // plays at 0.25 volumetick.play(); // plays at 1.0 volume

Conclusión

Los efectos de sonido en las aplicaciones web son un campo relativamente inexplorado. Mi esperanza es que esto uifxte ayude a crear aplicaciones que atraigan más a la gente, tanto visual como auditivamente. Pequeños detalles como este pueden llegar al corazón de las personas y brindar experiencias más enriquecedoras a tus usuarios.

¡ Échale un vistazo [uifx](https://github.com/wle8300/uifx)! ¡Me encantaría saber qué opinas!