Skip to main content

​
Overview

LoFi Engine is a cross-platform desktop application that generates procedural LoFi music in real-time. The application combines modern web technologies with native desktop capabilities to deliver a rich, customizable audio experience.

​
Tech Stack

The project is built with the following technologies:

Frontend

  • Svelte 3.54 - Reactive UI framework
  • TypeScript 4.9 - Type-safe JavaScript
  • Vite 4.2 - Fast build tool and dev server

Desktop

  • Tauri 2.6 - Lightweight native shell
  • Rust - Native backend runtime

Audio

  • Tone.js 14.7 - Web Audio framework
  • Web Audio API - Low-level audio processing

Package Manager

  • pnpm - Fast, efficient package management

​
Project Structure

The codebase is organized into clear, functional modules: 
lofi-engine/
├── src/
│   ├── lib/
│   │   ├── engine/              # Music generation core
│   │   │   ├── Chords/          # Chord progression system
│   │   │   ├── Drums/           # Drum pattern generation
│   │   │   └── Piano/           # Piano sample playback
│   │   ├── components/          # UI components
│   │   │   ├── Controls/        # Audio effect controls
│   │   │   ├── InfoBox/         # Help and shortcuts
│   │   │   ├── TopBar/          # Window controls
│   │   │   ├── TrackList/       # Ambient track list
│   │   │   └── Visualizer/      # Audio visualizer
│   │   └── locales/             # Internationalization
│   └── App.svelte               # Root component
├── src-tauri/                   # Tauri native code
├── public/                      # Static assets
└── vite.config.ts              # Build configuration

​
Key Directories

Contains the procedural music generation system:
  • Chords/ - Musical theory and chord progression logic
  • Drums/ - Drum pattern synthesis (Kick, Hat, Snare, Noise)
  • Piano/ - Piano sample management and playback
Svelte UI components organized by feature:
  • Controls/ - Effect controls (Rain, Thunder, CampFire, Jungle)
  • Settings/ - Volume, background, Auto DJ configuration
  • TopBar/ - Platform-specific window controls
  • TrackList/ - Ambient track selection UI
Native desktop functionality:
  • Window management
  • File system access
  • System tray integration
  • Native menus

​
Architecture Layers

​
Audio Engine Layer

The audio engine (src/lib/engine/) is the core of LoFi Engine. It generates music procedurally using Tone.js:
1

Chord Progression Generation

Generate harmonic structure using music theory rulesSee: src/lib/engine/Chords/ChordProgression.ts:5
2

Instrument Synthesis

Create drum patterns and piano voicingsSee: src/lib/engine/Drums/, src/lib/engine/Piano/
3

Audio Processing

Apply filters, effects, and stereo wideningSee: src/lib/engine/Piano/Piano.ts:4
4

Playback

Schedule and play audio samples in real-time

​
UI Layer

The UI layer is built with Svelte components that provide:
  • Real-time audio controls
  • Visual feedback (waveform visualization)
  • Ambient sound mixing
  • Customizable backgrounds
  • Keyboard shortcut support

​
Native Layer

Tauri provides the native desktop functionality:
  • Cross-platform window management (Linux, macOS, Windows)
  • Native system integration
  • Offline operation
  • Small bundle size (~10MB)

​
Build Configuration

The Vite configuration (vite.config.ts) is optimized for Tauri:
vite.config.ts
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import sveltePreprocess from "svelte-preprocess";

export default defineConfig(async () => ({
  base: "./",
  plugins: [
    svelte({
      preprocess: [
        sveltePreprocess({
          typescript: true,
        }),
      ],
    }),
  ],
  server: {
    port: 1420,
    strictPort: true,
  },
  build: {
    target: process.env.TAURI_PLATFORM == "windows" ? "chrome105" : "safari13",
    minify: !process.env.TAURI_DEBUG ? "esbuild" : false,
    sourcemap: !!process.env.TAURI_DEBUG,
  },
}));
The fixed port (1420) is required by Tauri for communication between the web frontend and native backend.

​
Key Features

​
Procedural Generation

Music is generated on-the-fly using music theory principles:
  • Major scale harmonization
  • Weighted chord progressions
  • Dynamic voicing generation
  • Randomized patterns for variety

​
Effects Pipeline

Audio effects are implemented using Tone.js nodes: 
// Example from Piano.ts
const lpf = new Tone.Filter(1000, "lowpass");
const sw = new Tone.StereoWidener(0.5);
sampler.chain(lpf, sw, Tone.Master);

​
Ambient Soundscapes

The Auto DJ system automatically manages soundscapes:
  • Music: Beat and chords only
  • Atmosphere: Music + weather/nature effects
  • World: Full immersion with environmental sounds
  • Manual: Full user control

​
Performance Considerations

Small Bundle Size

Tauri apps are ~10MB compared to 100MB+ Electron apps

Low CPU Usage

Efficient audio scheduling with Web Audio API

Fast Startup

Native binary with minimal initialization

Offline First

All audio generation happens client-side

​
Cross-Platform Support

LoFi Engine runs on:
  • Linux (AppImage, deb, rpm)
  • macOS (dmg, app bundle)
  • Windows (msi, exe)
  • Web (browser deployment at lofi-engine.vercel.app)
Mobile support (iOS, Android) is planned for future releases.

​
Next Steps

Music Generation

Learn how the procedural music system works

Development Setup

Set up your local development environment

Build docs developers (and LLMs) love

Get started for freeTalk to us