Survey of Front‑End Audio Recording Libraries and Browser Compatibility
This article surveys several JavaScript audio‑recording libraries, compares their supported formats, evaluates their performance across browsers, and summarizes front‑end recording techniques—including MediaRecorder, WebRTC + AudioContext, and legacy Flash—while highlighting compatibility issues of major browser engines.
The document introduces multiple front‑end audio‑recording libraries such as ecorder‑core (GitHub: https://github.com/xiangyuecn/Recorder) which supports mp3, wav, ogg, webm, amr, pcm and works on most browsers with getUserMedia and MediaStream; recorderjs (https://github.com/mattdiamond/Recorderjs) using WebRTC, AudioContext, Worker, Blob, URL; vue‑recorder (https://github.com/khofaai/vue-recorder) which is essentially a thin wrapper around recorderjs; js‑audio‑recorder (https://github.com/2fps/recorder) and other forks.
Testing results show that the libraries function on the latest versions of Edge, Chrome, Firefox, Safari, and Opera on both macOS and Windows, while some older browsers (e.g., IE, 360 Browser on macOS) require special handling or do not support recording.
Front‑end recording methods are categorized as:
MediaRecorder – early API with limited Safari/Edge support.
WebRTC getUserMedia combined with AudioContext – the mainstream solution, providing real‑time processing, visualization, speed/pitch control, and speech recognition.
Flash / Silverlight / ActiveX – legacy approaches for IE, requiring user permission and posing security concerns.
Browser engine compatibility is detailed: Chrome (Blink/Chromium) fully supports Web Audio API; Firefox (Gecko) fully supports; Safari (WebKit) fully supports; Edge (Chromium‑based) matches Chrome; Opera (Chromium‑based) matches Chrome; Internet Explorer (Trident) only partially supports Web Audio API; dual‑engine browsers (360, 2345, Sogou, etc.) switch between IE and Chromium kernels, affecting support.
Additional notes cover configuration of insecure origins for MediaDevices.getUserMedia, the necessity of HTTPS or localhost, and the deprecation of Flash‑based solutions, which lack maintenance and are unsuitable for modern browsers.
Summary: Modern browsers reliably support Web Audio API for recording, while IE and older browsers require Flash or custom workarounds that are increasingly impractical.
TAL Education Technology
TAL Education is a technology-driven education company committed to the mission of 'making education better through love and technology'. The TAL technology team has always been dedicated to educational technology research and innovation. This is the external platform of the TAL technology team, sharing weekly curated technical articles and recruitment information.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.