Visualize FM synthesis modulation index and frequency ratios in real-time. A free, browser-based tool to analyze carrier-modulator relationships with Tone.js.
AI Generation Prompt
Application Overview
A high-performance, browser-based FM (Frequency Modulation) Synthesis Visualizer that allows users to interactively modulate a carrier oscillator with a modulator oscillator. The tool focuses on real-time feedback, showing the relationship between frequency ratios and the resulting modulation index.
Technical Specification
- Frameworks: Vanilla JS, Tailwind CSS, Tone.js (via CDN).
- Visual Engine: HTML5 Canvas API with
requestAnimationFramefor smooth, 60fps real-time waveform plotting. - Audio Context: Tone.js
Master->Oscillator(carrier)+Oscillator(modulator)routed through a custom modulation gain node. - Memory: Strict in-memory state. No cookies, no local storage. All settings are transient.
UI Layout
- Header: Clean, minimalist title with an 'About' toggle and 'Audio Engine' status indicator.
- Control Panel (Sidebar/Top):
- Carrier Settings: Frequency slider, Waveform selector (Sine, Triangle, Square).
- Modulator Settings: Frequency ratio multiplier (1.0x to 10.0x), Modulation Index slider (depth of modulation).
- Output: Master Volume and 'Panic' (Stop all sound) button.
- Visualization Area (Center):
- Top Plot: Individual Carrier and Modulator waveforms overlayed (dimmed).
- Bottom Plot: Resulting modulated waveform (bold, vibrant color).
- Spectrum Analyser: A small FFT frequency bar chart to visualize resulting harmonic sidebands.
Aesthetics & Styling
- Theme: Professional SaaS aesthetic. Light mode only.
- Palette: White background (
#ffffff), soft slate gray text (#475569), vibrant primary accents (Electric Indigo#6366f1for carrier, Emerald#10b981for modulator). - Animations: Subtle transitions for sliders and buttons (transition duration: 200ms). The visualization canvas should have a smooth 'fade-in' effect when audio starts.
- Typography: Inter or System Sans-serif, optimized for readability.
Feature List
- Dynamic Frequency Control: Real-time adjustments to Carrier frequency (Hz) and Modulator frequency (Hz or Ratio).
- Modulation Index Slider: Smoothly vary the FM depth from 0 to 1000.
- Real-time Waveform Rendering: High-performance Canvas rendering of the carrier/modulator interaction.
- FFT Spectrum View: Visual representation of harmonic sidebands to explain modulation impact.
- Panic Button: Immediately cuts all active oscillators to prevent audio loops or feedback spikes.
- Export Snapshot: A feature to 'Copy State to Clipboard' (JSON) to save settings as a text string, bypassing local storage constraints.
Developer Directives
- No Persistence: Never attempt to use
localStorageorcookies. Use a simple JS object to store state. - Iframe Safe: Wrap all audio initialization in a user-gesture handler (e.g., 'Start Audio' button) to respect modern browser autoplay policies.
- Responsive: Use CSS Grid and Flexbox to ensure the control panel is accessible on mobile and the canvas takes up the majority of the screen.
- Performance: Keep the
requestAnimationFrameloop optimized. Draw only what is necessary to maintain 60fps. - Dependencies: Load Tone.js and Tailwind CSS via cdnjs/unpkg. No
npm install.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How does the modulation index affect the sound timbre in FM synthesis?
In Frequency Modulation (FM) synthesis, the modulation index represents the depth of the frequency deviation. As you increase the modulation index, the modulator signal pushes the carrier frequency further and faster, creating a wider array of sidebands. This results in a harmonically richer, more complex, and often 'brighter' or 'buzzier' sound. Mathematically, the number and amplitude of these sidebands are determined by Bessel functions of the first kind. By visualizing this relationship, sound designers can predict how changes in modulation intensity will impact the final harmonic spectrum of their synthesized sounds.
Why is it important to visualize carrier and modulator frequencies?
Visualizing the ratio between carrier and modulator frequencies helps users intuitively understand harmonic vs. inharmonic relationships. When the ratio between the modulator and carrier is a simple fraction (e.g., 1:1, 2:1), the resulting spectrum is harmonic, producing musically pleasing tones. When the ratio is an irrational number, the output becomes inharmonic, which is ideal for creating metallic, bell-like, or percussive timbres. This visual tool provides immediate feedback, allowing users to move beyond trial and error. By seeing the wave shapes and frequency interactions in real-time, students and professionals alike can better grasp how complex timbres are constructed from simple sine waves.
Is this tool suitable for learning the fundamentals of sound design?
Yes, this application is specifically designed as an educational sandbox. It breaks down the 'black box' of complex FM synthesizers found in music production software by exposing the raw relationship between the modulator and the carrier. Users can experiment with sine wave synthesis without the overhead of complex routing or preset menus. The interface allows for granular adjustments to parameters, providing instant auditory and visual confirmation. It is an excellent resource for beginners aiming to transition from subtractive synthesis to the more complex, mathematically driven world of FM synthesis.
How does this application utilize Tone.js for browser-based synthesis?
This application leverages the Tone.js library, which provides a high-level, performant wrapper around the Web Audio API. By utilizing `Tone.Frequency`, `Tone.Oscillator`, and `Tone.Gain` modules, the app ensures low-latency audio processing directly within the user's browser. This removes the need for external hardware or plugins. The real-time visualization is rendered using the HTML5 Canvas API, synchronized with the audio clock. By continuously polling the audio state during the `requestAnimationFrame` loop, the application renders precise waveforms, ensuring that what you hear is exactly what you see on the screen.
