7.6 KiB
7.6 KiB
hear-on-out
A generative ambient music application that transforms real-time weather and air quality data into dynamic soundscapes.
Overview
hear-on-out uses your geolocation to fetch current weather and air quality data, then generates unique ambient music that responds to environmental conditions in real-time. Every parameter of the audio - from tempo to reverb to note patterns - is affected by the weather around you.
Features
Weather-Reactive Generative Music
Chord Progressions
- 6 distinct mood-based progressions (bright, dreamy, melancholic, tense, warm, ethereal)
- Intelligent selection based on weather comfort scoring
- Smooth transitions between progressions
Instruments
- Ambient Pad: Lush detuned fat oscillator (3 voices, 30 cent spread) with day/night reactive envelopes for rich, warm soundscapes
- Main Arpeggio: Temperature-reactive note patterns with variable speed (1n → 8n) and volume, bypasses filter for clarity
- Ping Arpeggio: High-pitched reverse arpeggios that intensify with weather extremity, speed scales with temperature (1n → 16n)
- Bass Synth: Root note foundation with randomized release times for subtle variation
Dynamic Audio Parameters
- BPM: Scales linearly with temperature (5 BPM at 0°C → 30 BPM at 30°C)
- Reverb: Wet signal responds to humidity (more humid = more reverb)
- Delay: Time and feedback react to wind speed (faster wind = shorter delay, more feedback)
- Filter: Applied only to ambient pad, cutoff frequency brightens with temperature (0°C = 400Hz dark, 30°C = 8000Hz bright)
- Resonance: Increases with wind speed for sharper filtering
Air Quality Monitor
- Geiger-counter style noise bursts that trigger based on pollution levels
- Higher pollution = more frequent bursts (6s intervals for clean air → 0.3s for heavy pollution)
- Spacious reverb (30s decay) for atmospheric depth
- Monitors PM2.5, PM10, and dust particles
Audio Visualization
- Real-time particle system using p5.js
- Desktop: 40 particles at 30fps with connection lines
- Mobile: 15 particles at 20fps, no connections (performance optimized)
- FFT analysis for bass, mid, and treble frequency detection
- Particles react to audio levels with dynamic size and movement
- Adaptive sizing: 400x400px (desktop) or 280x280px (mobile)
- Automatic pause during scrolling to prevent audio interference on mobile
Technologies
- SvelteKit - Web framework with Svelte 5 runes
- Tone.js - Web Audio API wrapper for synthesis and effects
- p5.js - Creative coding for visualizations
- Tailwind CSS v4 - Styling with black/white monochrome theme
- Open-Meteo API - Weather and air quality data
Performance Optimizations
The application includes several optimizations for smooth performance:
Desktop Optimizations:
- 40 particles with 30fps rendering
- Audio-reactive displacement updates every 3rd frame
- Particle connections drawn every other frame with limited neighbor checking
- Tab visibility detection: Visualization pauses when tab is not focused
- Efficient audio routing: Arpeggios bypass filter for cleaner CPU usage
Mobile-Specific Optimizations:
- Reduced particle count: 15 particles (vs 40 on desktop)
- Lower framerate: 20fps (vs 30fps on desktop)
- Disabled connection lines: Removes expensive O(n²) calculations
- Smaller canvas: 280x280px visualizations (vs 400x400px on desktop)
- Scroll handling: Visualization pauses during scrolling to prevent audio stuttering
- Less frequent updates: Displacement updates every 5th frame (vs 3rd on desktop)
- Screen Wake Lock API: Prevents screen sleep during audio playback
- Screen sleep recovery: Audio context automatically resumes after device wakes up
- Visibility API: Properly handles audio context suspension/resumption
Mobile Performance Note: Running both generators simultaneously on mobile devices may cause performance issues. For optimal experience on mobile, consider running one generator at a time.
Setup
# Install dependencies
npm install
# Run development server
npm run dev
# Build for production
npm run build
How It Works
- Location Input: User can either:
- Grant browser geolocation permissions (automatic location detection)
- Manually enter latitude/longitude coordinates
- Data Fetch: Current weather and air quality data retrieved from Open-Meteo API
- Weather Comfort Scoring: Algorithm calculates comfort based on temperature, humidity, cloud cover, wind, and precipitation
- Progression Selection: Chooses appropriate chord progression based on weather mood
- Audio Generation: All instruments and effects dynamically adjust to conditions
- Real-time Updates: Audio parameters smoothly transition as weather changes
Geolocation & Browser Compatibility
The app supports two methods for location input:
Automatic Geolocation:
- Requires HTTPS in production (localhost works without HTTPS)
- User must grant browser permission when prompted
- May not work on some mobile browsers or restrictive browser settings
Manual Coordinate Entry:
- Fallback option for when geolocation is unavailable
- Accepts latitude (-90 to 90) and longitude (-180 to 180)
- Works on all devices and browsers
- Useful for exploring weather from different locations
Production Requirements:
- Must be served over HTTPS for geolocation to work
- Development server uses
@vitejs/plugin-basic-sslfor local HTTPS
Mobile Experience
The application is optimized for mobile devices with several performance enhancements:
Audio Playback:
- Screen Wake Lock: Prevents screen from sleeping while audio is playing
- Automatically requested when playback starts
- Released when playback stops or app is closed
- Supported on Chrome/Edge 84+, Safari 16.4+, Opera 70+
- Gracefully degrades on unsupported browsers (Firefox)
- Automatic audio context recovery after screen sleep/wake
- Handles browser audio suspension gracefully
- Transport automatically restarts when app becomes visible
Visual Performance:
- Adaptive particle count and framerate based on device
- Visualization pauses during scrolling to prevent stuttering
- Smaller canvas size for reduced GPU load
Known Limitations:
- Running both generators simultaneously may impact performance on lower-end devices
- Some mobile browsers may require user interaction to start audio playback
- Audio may briefly pause during heavy scrolling or multitasking
- Wake Lock not supported on Firefox (audio may stop when screen locks)
Project Structure
src/
├── lib/
│ ├── audio/
│ │ ├── instruments/ # Modular synth instruments
│ │ ├── audio-effects.ts # Shared audio effects
│ │ ├── chord-progressions.ts
│ │ └── weather-mood.ts # Comfort scoring & progression selection
│ ├── components/
│ │ └── AudioVisualization.svelte
│ └── generators/
│ ├── weather/WeatherGen.svelte
│ └── air-quality/AirQualityGen.svelte
└── routes/
├── +page.svelte # Geolocation entry point
└── on-out/+page.svelte # Audio generators
Weather Mood Mapping
| Conditions | Progression | Characteristics |
|---|---|---|
| Stormy/Extreme | Tense | Dissonant, unsettling |
| Very Hot (30°C+) | Warm | Energetic, bright |
| Cold/Rainy | Melancholic | Somber, introspective |
| Foggy/Misty | Ethereal | Spacious, mysterious |
| Pleasant Day | Bright | Uplifting, major tonality |
| Pleasant Night | Dreamy | Calm, flowing |
License
MIT