1 of 21

IIC2026

Visualización de Información

Alessio Bellino

2 of 21

Interacción y Sonificación�Plotly.js / Tone.js / WebAudioFont

Código

Demo

3 of 21

Equipo de Acompañamiento y Orientación Estudiantil

Dirección de Pregrado, Escuela de Ingeniería UC

orientaciondipre.ing@uc.cl

4 of 21

Salud estudiantil: En Campus San Joaquín: En oficinas de Salud y Bienestar Estudiantil, ubicadas en el 3° piso del Hall Universitario. 

https://saludestudiantil.uc.cl/

​

​

5 of 21

Recordar formulario

6 of 21

Plotly.js: Sonidos e interacción

Ya hemos visto algo.

7 of 21

Tenacity – Editar Audio

¿Dónde encontrar sonidos?

​

​

Tenacity (tenacityaudio.org)

8 of 21

Mapeando Altura Visual a Altura Sonora

9 of 21

Mapeando Altura Visual a Altura Sonora

10 of 21

Mapeando Altura Visual a Altura Sonora

Ejemplo malo! No bueno para entrega 2

11 of 21

Midi

Do central

12 of 21

Juntando Tonos, Iconos sonoros y Voz

13 of 21

Uso de Sound Fonts

surikov/webaudiofont

Ejemplo malo! No bueno para entrega 2

14 of 21

Uso de Sound Fonts / Filtrado

HTML select tag (w3schools.com)

Ejemplo malo! No bueno para entrega 2

15 of 21

Uso de Sound Fonts / Filtrado 2

Double input range slider (codepen.io)

Ejemplo malo! No bueno para entrega 2

16 of 21

Sound Fonts Disponibles

surikov/webaudiofont

Catálogo de instrumentos con códigos de ejemplos

17 of 21

Reasumiendo estrategias para sonificar

  • Uso de iconos sonoros (por ejemplo, sonidos evocativos de terremotos, puertas, etc.) y/o earcons (sonidos evocativos más abstractos).
    • Utilizando audios MP3 disponibles públicamente (YouTube, freesound.org , etc.) con HTMLAudioElement.
  • Uso de tonos sintetizados mapeados con los datos.
    • Utilizando Tone.js.
  • Uso de diferentes instrumentos (flauta, piano, etc.).
    • Utilizando soundfonts, por ejemplo, WebAudioFont.
  • Voz
  • Combinar estrategias

18 of 21

Diferentes contextos

  • Uso de iconos sonoros (por ejemplo, sonidos evocativos de terremotos, puertas, etc.) y/o earcons (sonidos evocativos más abstractos).
    • Utilizando audios MP3 disponibles públicamente (YouTube, freesound.org , etc.) con HTMLAudioElement.
  • Uso de tonos sintetizados mapeados con los datos.
    • Utilizando Tone.js.
  • Uso de diferentes instrumentos (flauta, piano, etc.).
    • Utilizando soundfonts, por ejemplo, WebAudioFont.
  • Voz
  • Combinar estrategias

Emocionar, Amplificar cognición, Discapacidad visual

19 of 21

Jueves 30 de abril

20 of 21

Actividad: Diseñar con el Oído

Objetivo: Recibirán un escenario con un problema real. Su misión es diseñar un sistema sonoro para comunicar datos sin pantalla. Elegir un escenario entre estos

​

🛠️ No necesitas ser músico. Solo piensa en el sonido como lenguaje:

  • Tono (grave o agudo)
  • Ritmo (rápido o lento)
  • Timbre (tipo de sonido: campana, voz, zumbido, etc.)

​

🕒 Al final, compartirán sus ideas con la clase.

💡 ¿Se entiende? ¿Es útil? ¿Podría usarse en la vida real?

Actividad 16.2 - Hoja de trabajo

21 of 21

IIC2026

Visualización de Información

Alessio Bellino