DevLog #02: How We Built a 100% Free, No-Login Studio Teleprompter (Audio Pipelines, Web Workers & Algorithmic Alignment)

If you have ever tried looking for an online teleprompter to record a YouTube video, TikTok script, or course lesson, you know the frustration: most web tools force you to register, slap gigantic watermarks on your recordings, charge $15/month subscriptions, or plaster the screen with flashing banner ads that distract your eyes from the camera lens.

Our premise for the Online Teleprompter & Studio Recorder was uncompromising: **100% free, zero registration, zero ads, private in your browser, and true studio recording quality (lossless 48 kHz WAV audio and HD video)**. Building a production-grade tool that runs entirely client-side without backend dependencies brought fascinating web engineering challenges.

Challenge 1: CoreAudio (macOS) and WASAPI Hardware Lockups

Initially, the visual VU volume meter, the WAV recording engine, and the speech recognition module each opened their own navigator.mediaDevices.getUserMedia() streams. On desktop browsers, particularly Chrome on Apple Silicon Macs (M1/M2/M3), forcing sampleRate: 48000 across multiple concurrent AudioContexts caused the operating system's audio daemon (coreaudiod) to deadlock.

Microphone streams would silently freeze or hang indefinitely. To eliminate hardware conflicts, we architected the **Single Audio Pipeline (AudioPipeline.ts)** singleton.

// AudioPipeline.ts: Single master MediaStream and single AudioContext
export class AudioPipeline {
  private static instance: AudioPipeline
  private audioContext: AudioContext | null = null
  private masterStream: MediaStream | null = null

  public async ensureReady(): Promise<void> {
    if (!this.masterStream || !this.masterStream.active) {
      this.masterStream = await navigator.mediaDevices.getUserMedia({
        audio: { echoCancellation: false, noiseSuppression: false, autoGainControl: false }
      })
      // Uses native system sample rate to prevent coreaudiod renegotiation
      this.audioContext = new AudioContext()
    }
  }

  public createTap(fftSize: number = 128): AudioTap {
    const analyser = this.audioContext.createAnalyser()
    this.sourceNode.connect(analyser)
    return { analyser, dispose: () => this.sourceNode.disconnect(analyser) }
  }
}

Challenge 2: The Countdown Freeze at '1' & The DAW Recording Pattern

A common pitfall in web audio tools is acquiring permissions or spinning up audio graphs in the exact millisecond the 3-2-1 visual countdown hits zero. If the browser takes 300-500ms to negotiate hardware, the visual countdown freezes on '1' before abruptly jumping to recording.

We adopted the recording architecture of professional DAWs (Pro Tools, Logic Pro): splitting audio engine execution into an asynchronous prepare() phase (which acquires and prepares hardware before the '3' displays) and a **100% synchronous begin() phase** that starts capturing in exactly 0.0 milliseconds when the countdown reaches ACTION.

Challenge 3: Unthrottled Background & Minimized Window Execution (Web Workers)

When presenting or recording for YouTube, creators frequently minimize the browser window or switch to OBS Studio / presentation slides. Modern browsers aggressively throttle background tabs: **requestAnimationFrame stops completely (0 FPS) and setInterval is clamped to 1 tick per second**.

To keep the teleprompter scrolling and karaoke pacing in perfect synchronization even when completely minimized, we built a dual resilience system:

1. **Dedicated Inline Web Worker**: An isolated background worker thread spawned from an inline Blob URL that emits continuous, unthrottled ticks regardless of window visibility. 2. **Timestamp Math Delta (performance.now())**: Instead of naively stepping words sequentially (+1), the engine calculates: currentWord = floor((now - phraseStart) / msPerWord). If you minimize the window for 12 seconds and return, the teleprompter instantly re-aligns to the exact word and phrase where you should be.

Challenge 4: Mobile Ergonomics with iOS Control Center Capsule Sliders

Standard HTML <input type='range'> sliders are notoriously difficult to use on mobile touchscreens due to tiny grab handles. We engineered 48px thick tactile capsule sliders inspired by the iOS Control Center (IOSCapsuleSlider), equipped with setPointerCapture so users can touch anywhere or glide their thumbs with 60fps responsiveness.

Challenge 5: Multi-Take Selection and Lossless Client-Side WAV Merging

Recording long videos often requires multiple takes of different paragraphs. Uploading several 50MB WAV takes to a remote server for merging would cause upload bottlenecks and latency.

We designed an in-browser WAV concatenator (wavUtils.ts). It decodes recorded Blobs into AudioBuffers, allocates a contiguous memory buffer with clean 250ms silence gaps between takes to prevent acoustic pop clicks, and exports a single 16-bit 48.000 Hz master WAV file ready for Premiere, DaVinci Resolve, or our WebGPU Video Editor.

Libraries & Technologies Used

• **Web Audio API (AudioContext, AudioWorklet)**: Pure linear PCM recording with zero VoIP compression filters. • **fastest-levenshtein**: High-speed string edit distance algorithms for speech phonetic alignment. • **Web Workers (Inline Blobs)**: Background timer synchronization immune to browser throttling. • **WaveSurfer.js**: Interactive SoundCloud-style waveform visualizer for instant take playback. • **Tailwind CSS & Lucide Icons**: Dark cinema studio interface with full mobile touch optimization.