Digital Echo Plex - Technical Documentation

Overview

This document provides detailed technical documentation for the Digital Echo Plex, a web-based implementation of the Echo Plex hardware looper. This implementation faithfully recreates the functionality of the original hardware while adding visual feedback and browser-based accessibility.

For a quick overview of the available loop functions, see Echoplex Functions.

Project Structure

digital_echoplex/
├── dist/                  # Built application ready for deployment
│   ├── index.html         # Main HTML file
│   ├── scripts/           # JavaScript files
│   │   └── bundle.js      # All JavaScript bundled into a single file
│   └── styles/            # CSS files
├── public/                # Static assets
│   ├── scripts/           # Original JavaScript files
│   └── styles/            # CSS files
└── src/                   # Source files
    ├── components/        # Astro components
    ├── lib/               # Core functionality
    │   ├── audio-engine.ts    # Audio processing engine
    │   ├── types.ts           # TypeScript type definitions
    │   └── advanced-functions.ts  # Advanced looping features
    └── pages/             # Astro pages

Core Features Implemented

1. Audio Recording and Playback

   • Full 120-second maximum recording time
   • Loop playback with variable speed and direction
   • Waveform visualization

2. Loop Manipulation

   • Record/Overdub/Insert modes
   • Multiply (extending loops)
   • Loop Windowing (defining sections within loops)
   • Reverse and Half-Speed functions

3. Control Modes

   • SWITCH/TOGGLE modes for buttons
   • Function button as modifier

• Multiple interface modes (Loop, Stutter, Delay, Expert)

Interface Modes

Mode	Behavior
LOOP	Standard looping.
STUTTER	Rapid retrigger using stutterLength.
DELAY	Adds delay with delayTime.
EXPERT	Enables both stutter and delay.

4. Parameters and Settings

   • Feedback control (default: maximum for true looper functionality)
   • Input/Output gain controls
   • Mix control
   • Quantization options

5. Persistence

   • Preset management
   • State saving between sessions

Problems Addressed and Solutions

1. Script Loading Issues

Problem: Initial implementation had issues with script loading order, resulting in "EchoplexAudioEngine is not defined" errors.

Solution:

• Bundled all JavaScript into a single file to ensure proper loading
• Made the EchoplexAudioEngine globally available
• Added explicit error handling for script loading failures
• Implemented a robust initialization sequence with clear user feedback

2. UI Overlay and Button Interactivity

Problem: Buttons were unresponsive due to an overlay blocking interaction.

Solution:

• Fixed CSS to remove opacity and pointer-events restrictions after power-on
• Added proper z-index to ensure buttons are clickable
• Ensured all interactive elements have proper event handling
• Added visual feedback for button states

3. Audio Feedback Loop

Problem: When feedback was set to maximum, the microphone would cause unwanted feedback loops when not actively recording.

Solution:

• Implemented a microphone monitoring toggle with two modes:
  • "Only While Recording" (default): Microphone only active during recording/overdubbing
  • "Always On": Microphone always active (for headphone users)
• Added logic to connect/disconnect the microphone input based on the selected mode
• Ensured this setting persists between sessions

4. Record Mode Behavior

Problem: The original implementation didn't correctly handle the SWITCH vs. TOGGLE record modes.

Solution:

• Implemented both SWITCH and TOGGLE modes for the Record button
• In SWITCH mode: Recording starts on first press, stops on second press
• In TOGGLE mode: Recording only happens while button is held down
• Added logic to wait for loop points in SWITCH mode when recording during playback

5. Timer Display

Problem: Users needed visual feedback about recording time and loop length.

Solution:

• Added a timer display showing current recording time and loop length
• Implemented visual warnings when approaching maximum recording time
• Added animation effects to indicate active recording

Potential Issues and Future Improvements

1. Browser Compatibility

Potential Issue: The Web Audio API has varying levels of support across browsers.

Mitigation:

• Added browser compatibility checks during initialization
• Provided clear error messages for unsupported browsers
• Used standard JavaScript instead of TypeScript for wider compatibility

Future Improvement:

• Add fallback modes for browsers with limited Web Audio support
• Implement a service worker for offline functionality

2. Mobile Device Support

Potential Issue: Touch interactions differ from mouse interactions, and mobile browsers have stricter audio context policies.

Mitigation:

• Added touch event handlers for all interactive elements
• Implemented explicit user interaction before audio context initialization
• Designed responsive layout that works on various screen sizes

Future Improvement:

• Add specific mobile-optimized layout
• Implement haptic feedback for touch interactions
• Add PWA capabilities for home screen installation

3. Audio Quality and Latency

Potential Issue: Web Audio API may have higher latency than dedicated hardware.

Mitigation:

• Optimized audio processing chain
• Used low-latency settings where available
• Implemented buffer management to reduce processing overhead

Future Improvement:

• Add WebAssembly (WASM) implementation for critical audio processing
• Implement advanced buffer management techniques
• Add option for quality vs. latency tradeoffs

4. Persistence Limitations

Potential Issue: Browser storage has limitations for saving audio data.

Mitigation:

• Focused on saving settings and metadata rather than audio buffers
• Implemented preset system for saving configurations
• Added export/import functionality for settings

Future Improvement:

• Add option to save audio to IndexedDB
• Implement cloud storage integration
• Add project file format for complete session saving

5. Advanced Features

Potential Issue: Some advanced Echo Plex features are complex to implement in a web environment.

Mitigation:

• Prioritized core functionality first
• Implemented advanced features with clear visual feedback
• Added documentation for complex features

Future Improvement:

• Add MIDI controller support
• Implement more advanced synchronization features
• Add multi-track capability beyond the original hardware

Technical Implementation Details

Audio Engine

The core of the Digital Echo Plex is the EchoplexAudioEngine class, which handles:

1. Audio Context Management

   • Creation and initialization of Web Audio API context
   • Management of audio nodes and connections
   • Microphone input handling

2. Buffer Management

   • Recording audio to buffers
   • Playback from buffers
   • Manipulation of buffer content (overdub, insert, multiply)

3. State Management

   • Tracking current state (recording, playing, overdubbing)
   • Managing loop properties (length, speed, direction)
   • Handling button modes and functions

User Interface

The UI is built with HTML, CSS, and JavaScript, with these key components:

1. Power Management

   • Explicit power-on sequence with system checks
   • Clear status feedback during initialization
   • Error handling for initialization failures

2. Control Interface

   • Transport controls (Record, Play, Overdub, etc.)
   • Loop manipulation controls (Reverse, Half-Speed, etc.)
   • Parameter controls (Feedback, Gain, Mix)

3. Visual Feedback

   • Waveform display showing loop content
   • Timer display showing recording time and loop length
   • Button state indicators

Persistence

Settings and state are persisted using:

1. LocalStorage

   • Saving user preferences
   • Storing preset data
   • Remembering last state between sessions

2. Preset Management

   • Creating and loading presets
   • Default presets for common scenarios
   • Import/export functionality

Deployment

Conclusion

The Digital Echo Plex successfully recreates the functionality of the original hardware in a web browser environment, with additional visual feedback and accessibility features. The implementation addresses key challenges in audio processing, user interface design, and browser compatibility while maintaining the authentic behavior of the original Echo Plex.

Future improvements could focus on mobile optimization, reduced latency, expanded storage options, and additional features beyond the original hardware capabilities.