hear-on-out
A generative ambient music application that transforms real-time weather and air quality data into dynamic, evolving soundscapes.
Overview
hear-on-out uses your geolocation to fetch current weather and air quality data, then generates ambient music that responds to environmental conditions. Audio parameters are derived from weather at page load and the soundscape evolves continuously — refresh to respond to updated weather data.
Features
Weather-Reactive Generative Music
6 mood-based chord progressions (bright, dreamy, melancholic, tense, warm, ethereal) selected by a comfort score across temperature, humidity, cloud cover, wind, and precipitation. Chord order is randomised on each playback start.
Instruments
- Ambient Pad: Cloud-reactive presence and detune. Clear sky = loud, tight (10 cents). Overcast = quiet, diffuse (60 cents). Envelope varies by day/night.
- Main Arpeggio: Temperature-reactive speed and volume. Pattern shape varies by condition: ascending, descending (hot), sparse (cold), randomised (stormy), probabilistic (foggy). Fires in irregular phrase bursts and silences; occasionally fades out entirely for longer sectional breathing.
- Ping: High-register melodic voice wandering freely through the progression's scale tones. Fires in irregular bursts and silences, independent of BPM. Denser in hot/extreme weather, sparser in cold. Per-step volume variation (±6 dB).
- Bass: Root note two octaves below the chord. Occasional skipped beats for rhythmic breathing.
Weather → Audio
| Parameter | Mapping |
|---|---|
| BPM | Temperature (5 at 0°C → 30 at 30°C) |
| Reverb wet | Humidity (0.3–1.0) |
| Delay time / feedback | Wind speed |
| Filter cutoff | Temperature — pad brightness (400 Hz → 8 kHz) |
| Filter resonance | Wind speed |
| Pad volume | Cloud cover (clear = −8 dB, overcast = −22 dB) |
| Pad detune spread | Cloud cover (clear = 10 cents, overcast = 60 cents) |
Continuous Evolution
- Chord shuffle: Progression order randomised each playback
- Parameter drift: Filter and reverb breathe around weather baselines on a 20s cycle
- Arp burst/silence: Phrase-level gaps in the arpeggio, wall-clock timed, temperature-scaled
- Arp dropout: Occasional full-section fade-out and return (15% drop / 75% recover per 25s)
- Ping burst/silence: Irregular firing bursts and silences, wall-clock timed
Air Quality Monitor
Geiger-counter style noise that scales with PM2.5, PM10, and dust levels — 6s intervals for clean air, 0.3s for heavy pollution.
Audio Visualization
Real-time FFT-reactive particle system (p5.js). Desktop: 40 particles at 30fps with connection lines. Mobile: 15 particles at 20fps, no connections.
Technologies
- SvelteKit / Svelte 5 runes
- Tone.js — synthesis and effects
- p5.js — visualisation
- Tailwind CSS v4
- Open-Meteo API — weather and air quality
Setup
npm install
npm run dev # development server
npm run build # production build
Geolocation
Requires HTTPS in production (localhost works without). Falls back to manual coordinate entry. Development server uses @vitejs/plugin-basic-ssl.
Mobile
Screen Wake Lock prevents sleep during playback (Chrome/Edge 84+, Safari 16.4+). Audio context recovers automatically after screen wake. Firefox does not support Wake Lock.
Project Structure
src/
├── lib/
│ ├── audio/
│ │ ├── instruments/
│ │ ├── audio-effects.ts
│ │ ├── chord-progressions.ts
│ │ └── weather-mood.ts
│ ├── components/
│ │ └── AudioVisualization.svelte
│ └── generators/
│ ├── weather/WeatherGen.svelte
│ └── air-quality/AirQualityGen.svelte
└── routes/
├── +page.svelte
└── on-out/+page.svelte
License
MIT