Skip to content
Projects

Armonía Viva

In development

I built a catalogue of 15 modes you can hear in the browser, plus a 3D Tonnetz showing why two chords sound close.

Music theory you can hear: scales, chords and progressions playing in the browser, with a 3D Tonnetz that shows why two chords sound close.

Technology

  • Frontend
  • Data viz

Sector

  • Music & culture

Approach

A non-trivial domain: real-time audio, music theory and graphs in a single SPA.

Architecture

Visual, playable music theory: everything runs in the browser, with a theory engine, audio and an on-demand 3D galaxy.

  • PC Windows
  • Hostinger
  • Visitor's browser
clic · tecladoHTTPS GETHTML + JS + CSSimport() lazyTonal: acordesplayChord()soundfont HTTPSsetMood()setMood()sube dist/entorno de trabajo · buildBuild localVite 5 · tsc -b · npm runbuildpersona · navegadorVisitanteestudiante · músico ·curiosohosting · archivos estáticosHosting estáticodist/ · assets/ con hash ·data/ · tutorial/navegador · react 18 + typescriptApp Armonía VivaReact · Tailwind · Mapa Modal· Constructor de Acordes ·ReactiveAmbientnavegador · chunk bajo demandaLa Galaxia 3Dthree · react-three-fiber ·drei · Galaxy.tsxnavegador · módulo sin interfazMotor de teoríasrc/engine · Tonal 6 ·TypeScriptnavegador · web audioCapa de audiosrc/engine/audio.ts · Tone.js15 · smplrnavegador · estado en memoriaEstado globalZustand · useAppStore.tsexterno · cdnCDN de soundfontsacoustic_grand_piano vía smplrC4 · nivel 2 (contenedores) · tráfico ambiente = llamadas reales · clic en una caja para el detallelínea continua = HTTP/SQL · punteada = adaptador elegido por configuración · caja punteada = existe fuera del proyecto
open in a new tab ↗

Flows you can replay

  1. Una visita
  2. Tocar un acorde
  3. Abrir la galaxia