# morpheu5/soundrise-app architecture

> Architecture diagram of the GitHub repository morpheu5/soundrise-app, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/morpheu5/soundrise-app
- Repository: https://github.com/morpheu5/soundrise-app
- Video tour (about a minute): https://gitdiagram.com/morpheu5/soundrise-app/video

## Overview

SoundRise is a browser-based speech-therapy learning application. A user opens the play experience, starts microphone listening, and receives live visual feedback derived from voice pitch, intensity, and Italian-vowel estimates; the sun’s position, size, and color communicate those results. The main stages are capture, signal analysis and vowel classification, event-based UI updates, and visual rendering. The home and about pages introduce the product and explain its visual mappings. Detector internals are only partially sampled, so the graph shows documented analysis roles without asserting uncertain processing details.

Main entry points: [`src/pages/play/page.tsx`](https://github.com/morpheu5/soundrise-app/blob/main/src/pages/play/page.tsx) (Play Page), [`src/classes/Listener.ts`](https://github.com/morpheu5/soundrise-app/blob/main/src/classes/Listener.ts) (Audio Listener), [`src/root.tsx`](https://github.com/morpheu5/soundrise-app/blob/main/src/root.tsx) (Page Router), [`src/pages/about/page.tsx`](https://github.com/morpheu5/soundrise-app/blob/main/src/pages/about/page.tsx) (About Guide)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["User Experience"]
  node_router["Page Router<br/>[root.tsx]"]
  node_home["Home Page<br/>[App.tsx]"]
  node_about["About Guide<br/>[page.tsx]"]
  node_play["Play Page<br/>[page.tsx]"]
  node_header["Navigation<br/>[Header.tsx]"]
end

subgraph group_capture["Audio Capture"]
  node_listener["Audio Listener<br/>[Listener.ts]"]
end

subgraph group_analysis["Voice Analysis"]
  node_formant["Formant Detector"]
  node_ml_detector["ML Vowel Detector"]
  node_dimensions["Voice Mapping<br/>[setDimsValue.ts]"]
  node_types["Shared Voice Types<br/>[soundrise-types.ts]"]
end

subgraph group_feedback["Visual Feedback"]
  node_sun_awake["Awake Sun<br/>[SunAwake.tsx]"]
  node_sun_sleep["Sleeping Sun<br/>[SunSleep.tsx]"]
end

node_user(("Learner"))
node_microphone(("Browser Microphone"))
node_web_audio["Web Audio API"]
node_meyda["Meyda Features"]
node_brainjs["Brain.js Model"]

node_user -->|"opens app"| node_router
node_router -->|"routes home"| node_home
node_router -->|"routes about"| node_about
node_router -->|"routes play"| node_play
node_home -->|"renders"| node_header
node_home -->|"renders"| node_sun_awake
node_about -->|"renders"| node_header
node_about -->|"illustrates mappings"| node_sun_awake
node_about -->|"illustrates silence"| node_sun_sleep
node_play -->|"renders"| node_header
node_play -->|"starts listening"| node_listener
node_play -->|"selects detector"| node_listener
node_play -->|"renders feedback"| node_sun_awake
node_play -->|"renders silence"| node_sun_sleep
node_listener -->|"requests stream"| node_microphone
node_listener -->|"processes stream"| node_web_audio
node_listener -->|"requests vowel estimate"| node_formant
node_listener -->|"requests vowel estimate"| node_ml_detector
node_ml_detector -->|"extracts MFCC"| node_meyda
node_ml_detector -->|"runs model"| node_brainjs
node_listener -->|"maps pitch and volume"| node_dimensions
node_listener -->|"dispatches parameters"| node_play
node_play -->|"passes visual state"| node_sun_awake
node_play -->|"passes idle state"| node_sun_sleep

click node_router "https://github.com/morpheu5/soundrise-app/blob/main/src/root.tsx"
click node_home "https://github.com/morpheu5/soundrise-app/blob/main/src/App.tsx"
click node_about "https://github.com/morpheu5/soundrise-app/blob/main/src/pages/about/page.tsx"
click node_play "https://github.com/morpheu5/soundrise-app/blob/main/src/pages/play/page.tsx"
click node_header "https://github.com/morpheu5/soundrise-app/blob/main/src/components/Header.tsx"
click node_listener "https://github.com/morpheu5/soundrise-app/blob/main/src/classes/Listener.ts"
click node_formant "https://github.com/morpheu5/soundrise-app/blob/main/src/audio/formantVowelDetector.ts"
click node_ml_detector "https://github.com/morpheu5/soundrise-app/blob/main/src/audio/frigatoMLVowelDetector.ts"
click node_dimensions "https://github.com/morpheu5/soundrise-app/blob/main/src/audio/setDimsValue.ts"
click node_sun_awake "https://github.com/morpheu5/soundrise-app/blob/main/src/components/SunAwake.tsx"
click node_sun_sleep "https://github.com/morpheu5/soundrise-app/blob/main/src/components/SunSleep.tsx"
click node_types "https://github.com/morpheu5/soundrise-app/blob/main/src/soundrise-types.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_router,node_home,node_about,node_play,node_header,node_microphone toneBlue
class node_listener toneAmber
class node_formant,node_ml_detector,node_dimensions,node_types,node_web_audio toneMint
class node_sun_awake,node_sun_sleep toneRose
class node_user,node_meyda,node_brainjs toneIndigo
```

## Components

### User Experience

- [Page Router](https://github.com/morpheu5/soundrise-app/blob/main/src/root.tsx): `src/root.tsx`
- [Home Page](https://github.com/morpheu5/soundrise-app/blob/main/src/App.tsx): `src/App.tsx`
- [About Guide](https://github.com/morpheu5/soundrise-app/blob/main/src/pages/about/page.tsx): `src/pages/about/page.tsx`
- [Play Page](https://github.com/morpheu5/soundrise-app/blob/main/src/pages/play/page.tsx): `src/pages/play/page.tsx`
- [Navigation](https://github.com/morpheu5/soundrise-app/blob/main/src/components/Header.tsx): `src/components/Header.tsx`

### Audio Capture

- [Audio Listener](https://github.com/morpheu5/soundrise-app/blob/main/src/classes/Listener.ts): `src/classes/Listener.ts`

### Voice Analysis

- [Formant Detector](https://github.com/morpheu5/soundrise-app/blob/main/src/audio/formantVowelDetector.ts): `src/audio/formantVowelDetector.ts`
- [ML Vowel Detector](https://github.com/morpheu5/soundrise-app/blob/main/src/audio/frigatoMLVowelDetector.ts): `src/audio/frigatoMLVowelDetector.ts`
- [Voice Mapping](https://github.com/morpheu5/soundrise-app/blob/main/src/audio/setDimsValue.ts): `src/audio/setDimsValue.ts`
- [Shared Voice Types](https://github.com/morpheu5/soundrise-app/blob/main/src/soundrise-types.ts): `src/soundrise-types.ts`

### Visual Feedback

- [Awake Sun](https://github.com/morpheu5/soundrise-app/blob/main/src/components/SunAwake.tsx): `src/components/SunAwake.tsx`
- [Sleeping Sun](https://github.com/morpheu5/soundrise-app/blob/main/src/components/SunSleep.tsx): `src/components/SunSleep.tsx`

### Other components

- **Learner**
- **Browser Microphone**
- **Web Audio API**
- **Meyda Features**
- **Brain.js Model**

## Connections

- Learner → Page Router: opens app
- Page Router → Home Page: routes home
- Page Router → About Guide: routes about
- Page Router → Play Page: routes play
- Home Page → Navigation: renders
- Home Page → Awake Sun: renders
- About Guide → Navigation: renders
- About Guide → Awake Sun: illustrates mappings
- About Guide → Sleeping Sun: illustrates silence
- Play Page → Navigation: renders
- Play Page → Audio Listener: starts listening
- Play Page → Audio Listener: selects detector
- Play Page → Awake Sun: renders feedback
- Play Page → Sleeping Sun: renders silence
- Audio Listener → Browser Microphone: requests stream
- Audio Listener → Web Audio API: processes stream
- Audio Listener → Formant Detector: requests vowel estimate
- Audio Listener → ML Vowel Detector: requests vowel estimate
- ML Vowel Detector → Meyda Features: extracts MFCC
- ML Vowel Detector → Brain.js Model: runs model
- Audio Listener → Voice Mapping: maps pitch and volume
- Audio Listener → Play Page: dispatches parameters
- Play Page → Awake Sun: passes visual state
- Play Page → Sleeping Sun: passes idle state