Proposal: Add fadeTime option to MediaRecorder to smooth audio chunk transitions #229
Description
Summary:
When using MediaRecorder to record audio (or audio+video) in small chunks for streaming (e.g., livestreaming or realtime playback), audible clicks and pops often occur between chunks. This is a long-standing issue in live media apps using WebM+Opus. There is currently no way to prevent this without re-implementing the entire recording pipeline manually.
Problem Detail
MediaRecorder slices audio arbitrarily.
Each chunk may begin or end in the middle of a waveform or window.
When these chunks are:
Played back sequentially via MediaSource,
Or transmitted over the network and decoded,
They produce noticeable clicks and pops at each boundary.
This issue is especially severe when using low timeslice values (e.g., 500ms to 2000ms), which are needed for realtime streaming.
Current Workarounds
Use AudioContext and decodeAudioData() on each chunk manually, then apply a fade-in/out before playback.
Maintain a parallel audio recording pipeline using ScriptProcessorNode or AudioWorklet, then crossfade audio separately.
Reimplement the full recording flow with MediaStreamTrackProcessor + WebCodecs.
These workarounds are:
Non-performant,
Require a lot of infrastructure,
And defeat the simplicity of using MediaRecorder.
Proposed Solution
Add a new optional setting:
const recorder = new MediaRecorder(stream, {
audioBitsPerSecond: 64000,
fadeTime: 0.02 // 20ms fade-in and fade-out on each chunk (optional)
});
This value could:
Apply linear fade-in/out on raw PCM before encoding,
Be 100% backwards-compatible,
Be ignored if unsupported,
Be defaulted to 0 (current behavior).
Optional enhancement: allow fadeType: "linear" | "hann" | "hamming".
Use Cases
Gun.js ecosystem using GunStreamer for decentralized media streaming.
P2P and decentralized livestreaming tools.
Any real-time recorder using MediaRecorder + MediaSource or WebRTC DataChannels.
Benefits
Huge audio quality improvement in live recording.
Minimal performance impact.
No breaking changes to the spec or APIs.
Solves a long-standing audio UX pain point in modern web apps.
Would you consider adding this option to the MediaRecorder spec?