Free Wavetable Synthesis Morphing & Interpolation Visualizer

Overview

A high-performance, single-file browser application designed for audio engineers, sound designers, and synthesis enthusiasts. This tool visualizes the interpolation between two distinct wavetables, providing real-time graphical feedback of the resulting waveform shape during the morphing process.

Technical Specifications

• Core Engine: Vanilla JavaScript utilizing the Web Audio API and Tone.js for low-latency audio synthesis.
• Visualization: High-resolution HTML5 Canvas rendering for smooth, 60FPS waveform animation.
• No-Storage Policy: State is maintained exclusively in volatile memory; no localStorage, cookies, or persistent storage is used to ensure compliance with sandboxed iframe environments.
• Architecture: A single-file architecture containing HTML5 structure, CSS3 styling, and JavaScript logic.

Key Features

• Dual-Wavetable Interpolation: Load two different waveform cycles and use a linear interpolation slider to morph between them seamlessly.
• Interactive Canvas: A responsive canvas area that renders the primary, secondary, and resulting interpolated waveform simultaneously.
• Oscillator Control: Adjustable frequency, fine-tuning, and volume controls to hear the synthesis output in real-time.
• Mathematical Precision: Real-time display of cycle values, ensuring the waveform is technically accurate for custom synth integration.
• Responsive UI: A clean, "SaaS-inspired" interface that scales fluidly from desktop monitors to tablets.

UI/UX Design

• Palette: A vibrant, light-mode professional aesthetic.
  • Primary: #2563eb (Vibrant Blue for accents/sliders).
  • Backgrounds: #ffffff (White) and #f8fafc (Off-white for containers).
  • Text: #1e293b (Dark Slate for high readability).
• Components:
  • Header: Minimalist title and description.
  • Main Visualization Area: A large, centered canvas with clear axes.
  • Control Sidebar: A panel on the right (or bottom on mobile) containing interpolation sliders, playback toggles, and waveform selectors.
• Animations: Subtle, CSS-driven transitions (300ms ease) for all UI interactions, ensuring a premium feel.

Developer Directives

1. Do not use local storage. Use an object in the global namespace to track application state (e.g., const appState = {...}).
2. Avoid browser dialogs. Implement all modals (e.g., "About" or "Settings") as native HTML elements (e.g., <dialog> or <div> with z-index).
3. Sanitization: All external audio or data inputs must be sanitized. Ensure Tone.js is initialized safely within the sandbox context.
4. Performance: Optimize canvas draw calls; only redraw when the morphing slider is moved or parameters are changed.
5. Responsive: Use CSS Flexbox and Grid to handle layout shifts. Ensure inputs are touch-friendly.