1 of 20

IIC2026

Visualización de Información

Alessio Bellino

2 of 20

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

Código

Demo

3 of 20

Equipo de Acompañamiento y Orientación Estudiantil

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

orientaciondipre.ing@uc.cl

4 of 20

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 20

Recordar formulario

6 of 20

Plotly.js: Sonidos e interacción

Ya hemos visto algo.

7 of 20

Tenacity – Editar Audio

¿Dónde encontrar sonidos?

​

​

Tenacity (tenacityaudio.org)

8 of 20

Mapeando Altura Visual a Altura Sonora

9 of 20

Mapeando Altura Visual a Altura Sonora

10 of 20

Mapeando Altura Visual a Altura Sonora

11 of 20

Midi

Do central

12 of 20

Juntando Tonos, Iconos sonoros y Voz

13 of 20

Uso de Sound Fonts

surikov/webaudiofont

14 of 20

Uso de Sound Fonts / Filtrado

HTML select tag (w3schools.com)

15 of 20

Uso de Sound Fonts / Filtrado 2

Double input range slider (codepen.io)

16 of 20

Sound Fonts Disponibles

surikov/webaudiofont

Catálogo de instrumentos con códigos de ejemplos

17 of 20

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 20

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 20

Martes 7 octubre

20 of 20

IIC2026

Visualización de Información

Alessio Bellino