Web App Design 2023

Realax

A multi ambient audio player

UI/UX Design Web Development Howler.js

Client

Think Heavy

Timeline

1 month

Role

Lead Designer

Deliverables

project brief, Prototype demo, Front-end codebase

Overview

Realax was made to replace the endless alternative attempts at ambient noise generation. No monthly subscriptions or paywalls, no mid-ambient ad rolls, no short loops that break immersion. Guided by the philosophy of yūgen—the quiet depth and subtle beauty found in things that can’t be fully explained, only felt.

This project was built to be simple: no interruptions, just continuous sound that feels natural.

The Challenge

User Pain Points

  • Finding long form field samples.
  • Lack of variety in tracks.
  • short, looping tracks that break immersion.
  • Alternatives use ads or interruptions, destroying flow.

Application Goals

  • Audio that feels real, with natural variation and spatial depth
  • Design sounds that evolve subtly over time—avoiding artificial repetition

Key Features

A web-based ambient soundscape generator featuring 100+ themed environments (nature, meditation, urban, fantasy) that creates seamless, continuously-evolving audio experiences. The system uses an intelligent overlapping playback algorithm to eliminate audible loop points, paired with an automatic volume modulation system that simulates natural environmental variation. Users can customize multi-layered soundscapes for meditation, focus work, or relaxation.

  • Overlapping Audio Engine The core innovation uses paired audio files (A/B variants) that overlap by 1/3 of their duration. When Sound A plays, Sound B starts 1/3 into A's duration, creating a crossfade effect. Both sounds loop independently, creating an infinite, seamless audio stream with no detectable loop points. This mimics how natural environments have continuous, non-repetitive sound patterns.
  • Meander Mode (Dynamic Volume Automation) Automatically adjusts individual sound volumes every 10 seconds, randomly selecting active sounds and smoothly transitioning them between 10-90% volume over time. Uses a 0.5% change-per-100ms rate to ensure imperceptible transitions. This creates the illusion of natural environmental shifts (wind gusting, rain intensifying, distant sounds approaching) without user intervention.
  • Gradual Scene Activation Instead of abrupt starts, the "Start" button sequentially activates all selected sounds over 5 seconds, evenly spacing each activation. This prevents jarring audio onset and mimics natural immersion into an environment, reducing cognitive load during meditation or focus sessions.
  • Meditation Bell Timer Configurable interval timer (1, 5, or 10 minutes) that plays a gentle bell sound with live countdown display. Designed for structured meditation practices, mindfulness intervals, or Pomodoro-style work sessions. Runs independently from ambient soundscapes.
  • Themed Environment System 100+ curated sound categories with matching background images (Canyons, Bamboo Gardens, Oceanfronts, etc.), each containing 5-10 layered sound pairs. Categories span natural environments, cultural soundscapes, binaural/therapeutic tones, and atmospheric drones. Users select categories via dropdown to instantly rebuild the mixing interface.
Realax interface detail
~60sec
Average audio file length
360
loops/hour
0%
Perceptible loop points

AUDIO FLIGHT RECORDER FEATURE

An in-browser recording system that captures the live-mixed output of the ambient engine for post-session analysis and archival. Unlike screen recording or system audio capture, this implementation taps directly into the audio processing pipeline to create pristine, isolated recordings of the generative soundscape as it evolves over time. Technical Implementation Uses the Web Audio API's MediaStreamDestination node connected to Howler.js's global masterGain output. This creates a virtual "tap point" that captures the final mixed audio stream — including all active overlapping loops, volume modulations from Meander mode, and meditation bell triggers — before it reaches the speakers. The MediaRecorder API then encodes this stream to .webm format in real-time, storing chunks in browser memory until export.

  • Lossless Internal Capture: Records only the application's audio output without microphone bleed, system notifications, or background noise
  • Extended Duration Support: Designed for multi-hour or overnight recordings to analyze long-term pattern evolution and randomization behavior
  • Synchronized Event Logging: Parallel .log.txt file timestamps every sound activation, deactivation, volume change, and Meander adjustment with millisecond precision
  • Non-destructive Monitoring: Recording runs passively without affecting playback performance or audio quality
Realax audio flight recorder feature
Next Project

Coming Soon

View Case Study →