The mix sounds right in the studio. Then it goes on the website and something shifts.
The preview is louder than the one next to it. The UI click arrives with a gap of silence in front of it. The MP3 crackles on a snare hit that was clean in the WAV. Someone replaces a file and the newsletter link now plays last month's version.
None of that is a player problem, and most of it is not a hosting problem either. It happens one step earlier, in the render dialog.
We have written about which codec to pick, how to keep files light and, last week, where those files should live. This note covers the step before all of them: getting audio out of REAPER in a shape a browser can use without surprises.
What "web-ready" actually means
A file that is ready for a streaming platform and a file that is ready for a website are not the same thing. A website asks five things of every audio file.
Consistent loudness. On a portfolio, a visitor clicks preview after preview. If track three is noticeably louder than track two, the site feels careless, even when every mix is good.
Headroom for the encoder. Web audio is almost always lossy. Lossy encoding can push peaks above the level of the source, so a master that touches 0 dB in the WAV can clip once it becomes an MP3.
No dead air. A UI sound with a few milliseconds of silence at the start feels late. A sound logo with a long silent tail keeps a player "busy" after the sound has ended.
A format the browser plays. A great Opus file that one browser refuses is worse than a decent MP3 that plays everywhere.
A stable name. The file name becomes the URL. Renaming it later breaks every link that pointed at it.
REAPER's render dialog can handle all five in one pass. Most of the options that do it were added in the last few years, so if your render template predates them, it is worth rebuilding.
Start from regions, not from the timeline
The cleanest way to export a set of web files from one project is to give each file its own region, then render the regions rather than the whole timeline.
Put each preview, sound logo variant or UI sound in its own region and name the region after the file you want. Then, in the render dialog, choose Regions (or the Region Render Matrix if different regions need different tracks) as the source.
The file name field accepts wildcards. $region resolves to the region's name, and $project to the project name. A pattern we use for client work:
That gives acme-logo-short-v2.mp3, acme-logo-long-v2.mp3, acme-ui-confirm-v2.mp3, all from a single click, all named the same way.
The version suffix matters more than it looks. When a file changes, it gets a new name rather than overwriting the old one. Caches and CDNs cannot serve a stale version of a file that has a new URL, and anything that still links to v1 keeps working until you decide to retire it. That pairs with the hosting advice in where to host audio files for a Framer site: version the name, keep the URL permanent.
REAPER has supported a region wildcard in render file names for years, and its official changelog shows the $region(name) variant arriving in version 6.20 (January 2021). If your version is older than that, update before building the template.
Normalize every file the same way
Since version 6.30 (July 2021), REAPER can normalize rendered files to a target peak, true peak, or loudness, measured as RMS or LUFS. You find it under the render dialog's normalize and limit settings.
For web previews, normalize to an integrated loudness target in LUFS rather than to peak. Peak normalization makes every file hit the same maximum level, which says nothing about how loud each one sounds. Loudness normalization is what stops track three from jumping out.
Two settings decide how the target is applied:
Each file separately. Every region is brought to the target on its own. This is what you want for a catalog of previews that a visitor plays one after the other.
As if all files play together. Since version 7.37 (April 2025), REAPER can apply one common gain to the whole set. Use it for stems or layers that are meant to play simultaneously, so their balance does not change.
Which number to use as the target is a decision, not a law. For reference, Spotify publishes its own: it adjusts tracks to −14 LUFS. A website has no player-side normalization, so the job is to pick one target for the whole site and keep it. Interaction sounds should sit well below the music; we cover that balance in the five practices for web sound effects.
Leave room for the encoder
Normalization raises or lowers gain. It does not stop peaks from overshooting once the file is encoded. That is a separate setting.
REAPER added a brickwall limiter option to the render dialog in version 6.37 (October 2021). Set it to limit on true peak, not sample peak, with a ceiling below 0 dB.
How far below? Spotify's guidance for masters is to keep true peak below −1 dB TP, because lossy formats need that margin, and below −2 dB TP when the master is louder than −14 LUFS. Web previews are encoded in the same family of lossy formats, so the same logic holds.
One detail makes REAPER particularly good at this. Since version 7.43 (August 2025), when you render to a lossy format like MP3 or Ogg, REAPER calculates normalization and render statistics on the encoded signal rather than the source. The numbers it reports are the numbers the listener gets. Check the render statistics after each render; if a file shows true peak above your ceiling, lower it and render again.
Trim the silence
For music previews, a little silence at the edges is harmless. For UI sounds and sound logos it is not. A button sound that starts even slightly late feels broken, and nobody can tell you why.
Since version 7.37, REAPER can trim silence from the start and end of rendered files, and pad them with silence when you need a fixed lead-in. The same release lets postprocessing fades apply before the padding. For interaction sounds, we trim the start completely and keep a short fade on the tail so nothing ends with a click.
A related option worth turning on: do not render files that are likely silent (added in 6.10). When a region matrix has a lot of tracks and regions, it stops the render from producing empty files that someone later uploads by mistake.
Render the master and the web file at once
Every web file should have a lossless master sitting next to it. You will re-encode from it when a format changes, and you will need it when a client asks for the original.
REAPER's secondary render format, added in version 6.05 (March 2020), writes two formats in the same pass. Set the primary format to WAV or FLAC for the archive and the secondary to MP3 or Opus for the site. The $format wildcard lets the two files land in different folders or carry different suffixes.
Which web format? MDN's codec guide lists MP3 as supported by all major browsers. Opus is efficient and widely supported, but MDN still flags Safari as the browser with the most restrictions on it. In practice that means one of two set-ups:
One file: MP3, which plays everywhere.
Two files: Opus for browsers that take it, with MP3 or AAC as the fallback, declared in order.
The browser takes the first source it can play. For bitrates per use case, our audio performance guide has the table; the codec trade-offs are in which codec to choose.
A render preset for web audio
Once the settings work, save them as a render preset so the next project starts right. Ours, in order:
Source: Regions (or Region Render Matrix)
File name:
$project-$region-v1, bumped on every changePrimary format: WAV, project sample rate, no resampling
Secondary format: MP3 (and Opus in a second preset when the site uses it)
Normalize: LUFS-I, each file separately, one site-wide target
Limit: brickwall, true peak, ceiling below −1 dB TP
Trim: silence from start and end for UI sounds and logos; off for music previews
Skip files that are likely silent
Check render statistics before uploading
If you already use REAPER for video work, the render dialog will look familiar: it is the same one we walk through in how to add audio to a video in REAPER. For sound logos specifically, the web delivery side is in shipping a sound logo on the web.
Where this fits
A web-ready render is the cheapest quality improvement an audio-first site can make. It costs one preset. It removes the volume jumps, the late clicks and the crackling peaks that make a site feel unfinished, before a single line of player code runs.
If you want the whole chain handled, from render preset to player to hosting, that is what our web audio services cover.
FAQ
What is the best export format from REAPER for a website?
MP3 if you want one file that plays in every major browser. If you can serve two files, add Opus as the first source and keep MP3 or AAC as the fallback. Always keep a WAV or FLAC master next to it, which REAPER can write in the same pass with its secondary render format.
Should I normalize to peak or to LUFS for web audio?
LUFS. Peak normalization gives every file the same maximum level, not the same perceived loudness. Normalize each preview to one integrated loudness target and add a true-peak limiter below −1 dB TP so the lossy encode does not clip.
How do I export several sounds from one REAPER project at once?
Put each sound in its own named region, choose Regions or the Region Render Matrix as the render source, and use the $region wildcard in the file name. REAPER renders one file per region, named after the region.
