Hear On Out - Weather data + generative ambient

2026-01-02

Hear On Out - Weather data + generative ambient

The Concept

hear-on-out starts with my love (read: need) for background noise while I work. I can’t concentrate in complete silence. For years I’ve been using either my music collection or a variety of online sources (asoftmurmur, mynoise) to have some sort of background auditory action going on at all times. Then comes the fact that I use my modular synthesizer for generative ambient to relax sometimes. So I thought I’d make my own with a twist.

The result is ambient background “music” that reacts to the way your weather feels.

How It Works

When you open hear-on-out, you’re prompted to share your location (or manually enter coordinates if you prefer privacy). The app fetches current weather data—temperature, humidity, wind speed, cloud cover, precipitation — and calculates a weather comfort index.

It considers the combination of factors. A warm day with light breeze and clear skies scores high for comfort. A freezing night with high winds and heavy rain scores low. These comfort scores determine the musical mood and chord progression. Then these parameters are fed to several intruments. The instruments are combined in two generators which “play” the instruments.

Six Musical Moods

Based on weather conditions, the app selects from six distinct chord progressions, each with its own emotional character:

  • Bright – Uplifting major tonality for pleasant daytime weather
  • Dreamy – Calm, flowing progressions for comfortable nights
  • Melancholic – Somber, introspective sounds for cold or rainy conditions
  • Tense – Dissonant, unsettling harmonies for stormy or extreme weather
  • Warm – Energetic, bright sounds for hot summer days
  • Ethereal – Spacious, mysterious tones for foggy or misty conditions

The Instruments

Tone.js performs horribly and I am facing multiple issue with getting it to work right on non-desktop browsers. But I couldn’t resist making it modular and combining several instruments to create the soundscape:

  1. Ambient Pad – The foundation of the sound. A lush, detuned synthesizer with three voices spread 30 cents apart creates the main textures. The pad’s envelope adjusts for day vs. night, with longer attack times at night for dreamy, slow-evolving tones.

  2. Main Arpeggio – Temperature-reactive note patterns that vary from slow whole notes (1n) to fast eighth notes (8n) based on temperature, and its volume increases as it gets warmer.

  3. Ping Arpeggio – High-pitched reverse arpeggios that become more prominent in extreme weather.

  4. Bass Synth – It’s simple root-note bass. I like bass.

Weather Generator

Every aspect of the generated music responds to environmental data:

Temperature drives the energy of the piece. Cold weather (0°C) results in a slow, contemplative 5 BPM, while hot weather (30°C) pushes the tempo to an active 30 BPM. The main arpeggio becomes more active in warmer weather, and a high-pitched “ping” arpeggio intensifies as conditions become more extreme—quiet and subtle in pleasant weather, loud and urgent in harsh conditions.

Humidity controls reverb depth. Dry air produces tighter, closer sounds, while humid conditions create lush, spacious reverb that makes the music feel vast and atmospheric.

Wind shapes the delay effect. Calm conditions produce short, subtle echoes, while high winds create longer delay times with increased feedback, adding movement and restlessness to the sound.

Cloud cover and precipitation influence filter brightness. Dark, overcast, or rainy weather produces muted tones with a low-pass filter set to 400Hz. Clear, bright weather opens the filter to 8000Hz, creating sparkle and clarity.

Air Quality Monitor Generator

Aside from weather, hear-on-out includes an air quality monitor that generates more abrasive noise bursts based on particulate pollution levels (PM2.5, PM10, and dust).

Clean air produces occasional, widely-spaced bursts (every 6 seconds). As pollution increases, the bursts become more frequent and agitated, creating an audible sense of urgency. At heavy pollution levels, bursts occur every 0.3 seconds with long reverb decay.

The Visuals

While the music plays, an audio-reactive particle visualization dances to the sound using p5.js. Particles, their size and movement, respond to bass, mid, and treble frequencies in the audio. On desktop, connection lines draw between nearby particles, creating a dynamic web of relationships that pulses with the music.

The visualization is somewhat optimized for mobile devices with reduced particle counts, lower framerates, and smart pause-during-scroll behavior to ensure smooth performance without audio stuttering.

A Unique-ish Experience Every Time

The app generates an ambient soundscape. It’s supposed to be background noise, not front-of-stage main attraction. This makes the changes in the sound rather subtle but you can play around with coordinates for different places in the world and see how it changes.

The audio parameters are calculated when you press play, setting them for the duration of your session. To hear how the weather has changed, simply refresh the page and the app will fetch new data and generate a fresh soundscape. I was considering adding live weather updates with polling but I’d rather keep it simple.

Why Ambient Music?

Ambient music, as pioneered by Brian Eno and others, is designed to be “as ignorable as it is interesting.” It doesn’t demand your attention, but rewards it when given. It creates atmosphere and mood without lyrics, narrative, or dramatic development.

hear-on-out embraces this philosophy while adding a conceptual layer: the music isn’t just ambient, it’s site-specific. It’s a sonic representation of the place and moment you’re experiencing it. It makes the invisible visible—or rather, audible.

Try It Yourself

https://hearonout.jawhng.xyz/ works on desktop and mobile browsers. Grant location access (or enter coordinates manually), press play, and let the weather sing.

TL;DR: hear-on-out is an open-source project built with SvelteKit, Tone.js, and p5.js. Weather and air quality data is provided by Open-Meteo API. It’s then used to concoct some weather-reactive background ambient. p5 handles the visuals. Tone.js handles the music.