Quick answer: for the audio layer of a website, Howler.js handles reliable playback and Tone.js handles reactive/generative sound; for producing the assets, iZotope RX cleans source audio, Reaper is the cost-efficient DAW, and After Effects + Lottie sync sound to motion. The table below maps each tool to its job.
Most designers treat audio as a late addition.
The visuals are done. The layout is locked. Then someone asks: "Can we add some sound to this?"
That's the wrong order. Audio integrated after the fact sounds like it. Users feel it — even when they can't name it.
The tools below are built for designers who want audio to be part of the workflow from the start, not patched in at the end.
Tool | Category | Cost | Best for |
|---|---|---|---|
Howler.js | JS playback library | Free / open | Reliable cross-browser playback, sprites |
Tone.js | JS synthesis & scheduling | Free / open | Reactive & generative audio |
Framer native audio | No-code component | Framer plan | Basic playback, sticky players |
iZotope RX | Audio repair | Paid | Removing noise / hiss from source |
Adobe Audition | DAW / editing | CC subscription | Cleanup inside Creative Cloud |
Reaper | Full DAW | ~one-off license | Cost-efficient production + scripting |
After Effects + Lottie | Motion-audio sync | CC | Audio-synced web animation |
Framer and web audio: the JS layer
Howler.js is the standard for web audio in code-based projects. It handles playback, looping, spatial audio, and audio sprites — the technique of combining multiple short sounds into a single file to reduce load times. If you're building interactive audio components in Framer or hand-coded sites, Howler is the foundation.
Framer's native audio component covers basic playback — useful for sticky audio players and trigger-based sound cues. For more complex behavior (volume automation, crossfades, audio-reactive states), you need to pair it with custom code using the Web Audio API directly.
Tone.js sits above the Web Audio API and gives you scheduling, synthesis, and effects in JavaScript. If you want sounds that respond to user interactions with precision — not just "play/pause" but actual reactive audio design — Tone.js is the tool. For the practical breakdown of when to pick Tone.js over Howler.js (or vice versa), see Tone.js vs Howler.js head-to-head. Whatever library you pick, the format you ship in matters too — see which audio codec to choose.
The JS audio layer pairs well with immersive browser capabilities. See how spatial audio works on the web for a deeper look at what’s possible.
Audio cleanup tools for sonic branding
A sonic branding strategy lives or dies on the quality of its source material. These tools handle the unglamorous work that makes the difference between a brand asset that feels cheap and one that feels precise.
Adobe Audition integrates directly into Creative Cloud workflows. If your team already works in Premiere or After Effects, Audition is the natural bridge — waveform editing, noise reduction, and multitrack mixing without switching environments.
iZotope RX handles the unglamorous but critical work: cleaning up source audio before it becomes a brand asset. Crackling sound. Background hiss. Inconsistent levels. These are the details that make a sonic logo feel cheap or precise. RX removes the margin for error.
Reaper is the most cost-efficient full DAW for designers who need audio production capability without a €600/year subscription. It runs on anything, supports every plugin format, and has a scripting layer that lets you automate repetitive export tasks — useful when you're producing multiple variations of a sonic identity for different use cases (app, video, web). For the video workflow specifically, see how to add audio to a video in Reaper.
Syncing audio to animation: After Effects and Lottie
After Effects + Motion Bro lets you sync visual animations directly to audio markers. Instead of manually nudging keyframes to match a beat or sound cue, you set audio markers and build the motion around them. The audio leads. The visual follows.
Lottie + Howler is the combination worth knowing for web-based audio-reactive animations. Export a Lottie animation from After Effects, control its playback with JavaScript, and trigger it in sync with audio events via Howler. The result: animations that feel like they breathe with the sound, not beside it.
The one principle behind all of it
Every tool on this list exists to solve the same problem: audio and visuals are produced in separate environments, and something is always lost in the handoff.
The designers and studios that produce the strongest audio-visual work aren't using more tools. They're deciding earlier — at the identity stage, not the delivery stage — what role sound plays in the experience. If you want to understand the foundations, the 4 fundamentals of sonic branding are the right starting point.
The tools follow from that decision. Not the other way around.
What's changed for 2026
The biggest shift is that the JS audio layer is now genuinely Framer-native. Custom code components mean Howler.js and Tone.js can be wired into a Framer site — reading tracks from the CMS, persisting across page transitions — without dropping to a separate React build. The Web Audio API itself is mature and consistent across browsers, so the friction that used to push designers toward heavy third-party players has mostly disappeared. The 2026 stack is leaner: a code component, one playback library, and clean source audio.
Frequently asked questions
What is the best tool for adding audio to a website?
For code-based sites and Framer, Howler.js is the standard for reliable playback; pair it with Tone.js when you need reactive or generative audio. Framer's native audio component covers basic playback without code.
What's the difference between Howler.js and Tone.js?
Howler.js plays audio files reliably across browsers (playback, looping, sprites). Tone.js sits above the Web Audio API for synthesis, scheduling, and effects. Use Howler for playback, Tone for making or reacting to sound.
What software do I need to clean up audio for sonic branding?
iZotope RX for repair (noise, hiss, levels), Adobe Audition if you're already in Creative Cloud, or Reaper as a cost-efficient full DAW. Clean source audio is what separates a precise brand asset from a cheap one.
Is Reaper good for designers?
Yes. It's the most cost-efficient full DAW (a one-off license versus annual subscriptions), runs on modest hardware, supports every plugin format, and its scripting layer automates repetitive export tasks.
How do I sync sound to animation on the web?
Export a Lottie animation from After Effects and control its playback with JavaScript, triggering it in sync with audio events via Howler.js. For motion design, After Effects + Motion Bro lets you build keyframes around audio markers.
At Supadark, we build Framer templates and sonic branding systems with audio integrated from the first component. See the work.
