logo
De vez en cuando, todos los profesionales se encuentran con un desafío tan grande, tan ridículo, que simplemente no pueden evitarlo. Solo tienen que ir a por ello. Es como la historia de David y Goliat … si David simplemente estuviera aburrido y Goliat no estuviera amenazando a toda su nación. En cuanto a mí, estoy a punto de discutir por poner sonidos en un sitio web y discutir cómo hacerlo bien.
Sí, lo sé … Soy una de las personas que “nunca reproducirán automáticamente sonidos en su sitio”. Aun así, aquí estamos. Y no voy a hacer trampa hablando de videos incrustados, podcasts o envoltorios de Soundcloud. Tampoco voy a hablar de música de fondo o incluso de sonidos ambientales de fondo, porque todos ellos siguen siendo malvados, en mi opinión.
Incluso buscar ejemplos sobre sitios con sonido bien hecho es casi imposible, porque todos los resultados de búsqueda son ejemplos centrados en la música o artículos sobre cómo nunca, jamás, debe usar el sonido.
Pero por mucho que me duela admitirlo, hay están casos para agregar sonido a sus sitios web y aplicaciones … en ocasiones … en casos muy específicos … mire, no me haré responsable de los clientes que pueda perder, ¿de acuerdo? Este es un ejercicio intelectual, y no hace falta decir que hagas lo que hagas, debería haber una forma de apagarlo para siempre.
El caso para agregar sonido
Notificaciones y alertas
Pocas cosas te hacen saber que debes prestar atención como un ruido bastante agudo. Los maestros tienen sus uñas en la pizarra, los teléfonos tienen sus tonos de llamada y los gatos y los bebés usan sonidos de tono muy similar específicamente para volvernos locos / obtener lo que necesitan de usted. Los diseñadores de interfaces y productos hicieron uso de este principio mucho antes de que existieran las computadoras personales. Es efectivo.
Creo que estos solo son aceptables para conversaciones de chat o para notificaciones que los usuarios soliciten específicamente. Cuando está esperando información y necesita prestar atención en el momento en que llega, es posible que se agradezca un sonido de alerta.
Los ejemplos incluyen todo, desde Facebook Messenger y Slack, hasta agregadores de noticias y aplicaciones de citas de todo tipo.
Alertas de éxito
Un patrón que podríamos usar un poco más en nuestro diseño web y de aplicaciones es en realidad un poco de sonido para decirle a la gente que las cosas salieron bien. Aquellos de nosotros, los jugadores, al menos, a menudo tenemos buenos recuerdos de la música de la victoria que sonaba cada vez que ganaba una batalla o completaba un nivel. Si puede encontrar un sonido corto de «éxito» que evoca nostalgia y un golpe de dopamina en lugar de simplemente molestar a la gente, es posible que tenga un ganador.
Mejora de la accesibilidad
Los sonidos de alerta están muy bien, pero ¿qué pasa con el uso del poder del audio para ayudar a las personas con, digamos, problemas de visión? Claro, hay lectores de pantalla y demás, pero si sabe que una gran parte de su base de usuarios tiene problemas de visión, podría considerar darles señales de audio opcionales para facilitar las cosas.
Piense en los sonidos de “clic” en los botones, un tono que cambia de tono cuando usa hacer clic y arrastrar en un control deslizante, una sensación general de retroalimentación háptica que generalmente puede estar representada por una animación. Para las personas con problemas de visión, el sonido es una forma muy útil de esqueuomorfismo.
Experimentos artísticos
Y luego, por supuesto, tenemos el tipo de cosas que podrían estar en la sección «experimental» de su cartera, o en su perfil de CodePen. Aquí hay un sitio lleno de ellos: Laboratorio de música de Chrome.
Consejos generales para implementar el sonido
Realmente tocando los sonidos
JavaScript es la única forma de hacerlo. Claro, puede incrustar un sonido con HTML5, pero eso solo le proporcionará un reproductor de audio. Si está tratando de integrar el sonido en su interfaz de usuario de una manera más funcional, JS es la única forma de hacerlo. Quiero decir, claro, técnicamente todavía tenemos Silverlight, pero ¿quién volverá a usar complementos?
Si nunca antes ha agregado sonido intencionalmente a su propia página, o simplemente no está tan familiarizado con JS, aquí está cómo reproducir un sonido al hacer clic. Bueno, eso está muy bien, pero ¿qué pasa si sus usuarios tienen problemas para encontrar los botones para hacer clic en ellos en primer lugar? Es posible que desee ver este tutorial de CSS-Tricks sobre cómo reproducir sonido cuando alguien se desplaza sobre un elemento.
Todavía tienes que intentar no molestar a la gente
Siempre, siempre, siempre brinde a las personas una forma de apagar los sonidos, para siempre. La siguiente pregunta es, por supuesto, si debería tener el sonido activado de forma predeterminada. ¿Mi voto? No … bueno, en la mayoría de los casos. Nuevamente, si espera tener muchas personas con discapacidad visual en su sitio, debe podría considere hacer que los sonidos se reproduzcan de forma predeterminada, y poner un gran «¡Puede apagar estos sonidos, por favor no huya!» observe el frente y el centro.
Y por último…
Los archivos de sonido pueden, dependiendo de su calidad, afectar a las personas con mucha fuerza, justo en el ancho de banda. Utilice una CDN para su ancho de banda y almacene en caché todos los archivos de sonido por el bien del ancho de banda de sus usuarios. A continuación, eche un vistazo a Hojas de estilo auditivoy piense bien cómo se presenta su sitio a los lectores de pantalla.
¿Y mirarías eso? Estoy casi convencido de que el sonido en Internet es una buena idea. Probablemente debería parar ahora.
