Tone.js

When to Use This Skill

Apply when any of the following are needed:

• Playing audio files (SFX, VO, music) alongside GSAP animations
• Beat-synchronized or BPM-locked animation (e.g. scene cuts on the beat)
• Audio-reactive visuals: DOM/SVG elements animated by waveform or frequency data
• Programmatic sound generation (synths, oscillators, UI sounds)
• Adding audio effects (reverb, delay, distortion) to any source

Related skills: For timeline sequencing use gsap-timeline, for performance use gsap-performance, and for scroll-sync use gsap-scrolltrigger.

⚠️ Browser Autoplay Policy: Tone.start() MUST be called inside a user-gesture handler (click, keydown, etc.). Audio context will not resume otherwise. Always gate initialization behind an interaction.

Setup