Opus Audio for Web Developers: A Practical Guide

Opus is the best audio codec for the web that most web developers are still not using. It is natively supported in every major browser, delivers better quality than MP3 at half the bitrate, has extremely low latency, and is completely royalty-free. This guide covers everything you need to ship Opus audio in a web application.

Browser Support Overview

Opus has broad modern browser support. As of 2026:

• Chrome (desktop and Android): Full support since Chrome 25
• Firefox (desktop and Android): Full support since Firefox 15
• Edge: Full support
• Opera: Full support
• Safari (desktop and iOS): Full support since Safari 11 (2017)

Opus support is now universal among maintained browser versions. You can serve Opus without providing a fallback in applications that do not need to support outdated browsers.

For maximum safety in applications that might serve older devices, provide an MP3 fallback using the HTML5 `

MIME Types for Opus

Opus audio uses the OGG container or the WebM container. The correct MIME types are:

OGG container: ``` audio/ogg; codecs=opus ```

WebM container: ``` audio/webm; codecs=opus ```

Using the wrong MIME type can cause browsers to reject the file or treat it incorrectly. When serving Opus from a web server, configure your server to send the correct Content-Type header.

For nginx: ``` types { audio/ogg ogg opus; audio/webm webm; } ```

For Apache, add to `.htaccess` or server config: ``` AddType audio/ogg .ogg .opus ```

HTML5 Audio Element with Opus

The simplest way to serve Opus with a fallback:

```html

Your browser does not support audio playback.

```

Browsers try each `` in order and use the first one they support. Because Opus support is now universal in maintained browsers, the MP3 fallback will rarely be triggered — but it is good defensive practice.

File Size Advantage: The Real Numbers

This is the core reason to adopt Opus. A 4-minute stereo music track:

| Format | Bitrate | Approximate size | |--------|---------|------------------| | MP3 | 192 kbps | 5.5 MB | | AAC | 192 kbps | 5.5 MB | | Opus | 128 kbps | 3.8 MB | | Opus | 96 kbps | 2.8 MB |

Opus at 96 kbps delivers quality comparable to MP3 at 192 kbps in listening tests. That is approximately half the file size for equivalent perceived quality.

Bandwidth savings for a podcast site. Consider a site with 10,000 monthly listeners, each streaming a 45-minute episode:

• MP3 at 128 kbps: 45 min x 128 kbps x 10,000 = 4.32 TB/month
• Opus at 64 kbps: 45 min x 64 kbps x 10,000 = 2.16 TB/month

Halving your bandwidth bill is not a minor optimization.

Web Audio API and Opus

The Web Audio API decodes Opus natively via `decodeAudioData`:

```javascript const response = await fetch('audio.opus'); const arrayBuffer = await response.arrayBuffer(); const audioContext = new AudioContext(); const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

const source = audioContext.createBufferSource(); source.buffer = audioBuffer; source.connect(audioContext.destination); source.start(); ```

This works in all browsers that support Opus. No special configuration is required. The browser's native Opus decoder handles the format transparently.

WebRTC and Opus

Opus is the mandatory audio codec for WebRTC as specified in RFC 7874. Every WebRTC implementation — video calls, voice chat, peer-to-peer audio — uses Opus internally.

Discord, Google Meet, and most browser-based communication tools transmit audio as Opus at 32–128 kbps depending on bandwidth conditions. The low latency of Opus (approximately 5 ms algorithmic delay) is what makes real-time communication viable.

As a web developer building any real-time audio application, you do not need to configure this — WebRTC handles codec negotiation automatically. But knowing that Opus is the underlying technology is useful context.

MediaRecorder API and Opus Output

When you use the MediaRecorder API to record audio in the browser, you can request Opus output explicitly:

```javascript const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm; codecs=opus' });

const chunks = []; mediaRecorder.ondataavailable = (e) => chunks.push(e.data); mediaRecorder.onstop = () => { const blob = new Blob(chunks, { type: 'audio/webm; codecs=opus' }); const url = URL.createObjectURL(blob); // Use the URL for playback or upload };

mediaRecorder.start(); ```

Chrome and Firefox both support `audio/webm; codecs=opus` as a MediaRecorder mimeType. Safari uses different defaults — check support with `MediaRecorder.isTypeSupported()` before relying on a specific mimeType.

Converting Existing Audio to Opus for Web Delivery

If you have a library of MP3 or WAV files and want to serve them as Opus, AudioUtils handles the conversion in the browser:

• Convert MP3 to Opus — transcode your existing MP3 library to Opus for web serving
• Convert WAV to Opus — convert lossless recordings to Opus for distribution

Both conversions run locally in WebAssembly. You get the .opus output file ready to drop into your web server's static assets directory.

For batch conversion of large audio libraries, consider processing files through AudioUtils and uploading to your CDN. Serving Opus as the primary format with MP3 fallback is a straightforward one-time migration that pays dividends in bandwidth savings and load times for the lifetime of your application.

When Opus Is Not the Right Choice

• Podcast RSS feeds: Many podcast apps and aggregators expect MP3 or AAC. Changing your enclosure format requires checking compatibility across every app your listeners use. MP3 remains safer for podcast distribution.
• Legacy embedded players: If your application needs to work in very old browsers or OS-level players (Windows Media Player on old Windows installs), MP3 is more universally supported.
• Music downloads: Users downloading files to their local library may find that their music software or device handles MP3 better. Convert Opus to MP3 when distributing for general download.

Summary

Opus is technically superior to MP3 and AAC for web delivery in almost every measurable way — quality, file size, latency, and licensing. Browser support is universal. The only remaining reason not to use it is legacy compatibility for specific edge cases. Adopt Opus as your default web audio format, provide MP3 fallbacks where needed, and use AudioUtils to convert your existing audio assets for the transition.