# xiangyuecn/Recorder: HTML5 in-browser recording to mp3, wav, ogg, amr and g711

> Recorder is a JavaScript library that captures microphone or any MediaStream in the browser and encodes it to mp3, wav, pcm, g711a, g711u, ogg, amr or webm. It suits voice capture and real-time ASR pipelines, and it is mono only by design.

**xiangyuecn/Recorder** — html5 js 录音 mp3 wav ogg webm amr g711a g711u 格式，支持pc和Android、iOS部分Web浏览器、Hybrid App（提供Android iOS App源码）、微信，提供ASR语音识别转文字 H5版语音通话聊天示例 DTMF编码解码

- Repository: https://github.com/xiangyuecn/Recorder
- Website: https://xiangyuecn.github.io/Recorder/
- Stars: 5,638 · Forks: 1,098
- Language: JavaScript
- License: MIT
- Published: 2026-09-22 · Updated: 2026-09-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/xiangyuecn-recorder

## What problem xiangyuecn/Recorder solves for browser voice capture

A browser can hand you raw audio through getUserMedia, but it does not hand you an mp3. Recorder fills that gap: it takes a MediaStream, processes the PCM, and encodes it in the page. The README lists mp3 as the default output and wav, pcm, g711a, g711u, ogg, amr and webm (beta) as the other built-in options, with extension points for formats that have an encoder available.

The audience is narrow and specific. This is a voice recorder, not a music recorder. The README states that only mono is supported and that stereo is not adapted. If you are building call recording, voice messages, dictation, or a real-time ASR feed, that constraint costs you nothing. If you are building a multitrack editor, it disqualifies the library immediately.

The project also ships a companion layer called RecordApp, which the README says lets you record directly inside a WeChat mini program or a uni-app project, with Android and iOS app source in app-support-sample. That is the part that makes the library usable beyond plain mobile web, where mini program runtimes do not expose the same audio APIs.

## How the encoding pipeline and MediaStream input actually work

The input side is deliberately open. According to the README, Recorder can process any MediaStream, including the stream returned by getUserMedia, a remote stream from WebRTC, the stream returned by the captureStream method on audio and video tags, or a stream you construct yourself. That is a wider input surface than a microphone-only recorder, and it is what makes the audio and video visualization demos possible.

The output side is where the design choices show. Recorder processes PCM and encodes it in the browser, and the README describes real-time transcoding and real-time transmission as supported. Two prebuilt bundles reflect the size trade-off: recorder.mp3.min.js is 150kb and recorder.wav.min.js is 25kb. Choosing wav over mp3 saves roughly 125kb of JavaScript, at the cost of far larger audio files, since wav is uncompressed. That is a real decision, not a footnote.

Long recordings are handled through the onProcess callback, which the README points to as the mechanism for cleaning and releasing memory in real time. Without that, a long voice session accumulates buffers. There is also a rec.mock method for transcoding recorded buffers or arbitrary PCM into another format, which means the encoder can be used outside a live recording session.

Beyond the core, the repository lists plugins for visualization, speed and pitch shifting, ASR, and audio stream playback, plus DTMF encode and decode for telephone keypad signals. Those are separate demos rather than a single monolithic API, so expect to read the individual tutorial pages rather than one reference document.

## Installing Recorder and making a first recording

Recorder is a browser library, so the README points at the repository source and the github.io deployment rather than a package manager. The documented path is to download the repository and open the html files locally if the hosted pages are unreachable.

The two bundles sit at the repository root, and the README names them directly: recorder.mp3.min.js for mp3 output and recorder.wav.min.js for wav output, the latter saving 125kb. The repository root also carries QuickStart.html, index.html, a src directory, a dist directory and an app-support-sample directory. The README links separate QuickStart pages for the H5 and App layers, plus vue, TypeScript and ES module demos under assets.

When you are finished, stop the recorder and take the resulting blob. The README notes that a local blob can be played by assigning URL.createObjectURL output to audio.src, or by assigning the blob directly to audio.srcObject, with the caveat that srcObject has lower compatibility. For streaming fragments rather than a finished file, the bundled BufferStreamPlayer plugin is the documented option, and the README describes it as simple and efficient. The README also points at a PCM-to-WAV tool page and a Runtime page for running the demo code without setting up a project.

The plugin demos are worth reading before you write your own capture loop. The repository lists tutorials for real-time transcoding upload in three variants, real-time decode and playback of audio fragments, mixing multiple streams, speed and pitch transformation, and DTMF decode and encode. Each is a separate page rather than a section of one reference document.

## Where Recorder stops being the right tool

The mono limitation is the first hard boundary. The README is explicit that the library supports single channel only and has not been adapted for stereo. Any application that needs two channels has to look elsewhere, and no workaround is documented.

Browser support is the second. The README lists Chrome, Firefox, Safari, iOS 14.3 and later, Android WebView, the Tencent Android X5 kernel used by QQ and WeChat, Electron, most Android browsers updated after 2021, and Android UC-based kernels updated after 2024. It explicitly does not support older domestic Android browsers or non-Safari browsers on iOS 11.0 through 14.2. If your audience includes older iOS devices where users open links inside an in-app browser, that is a real coverage gap, and the README offers no fallback for it.

The webm format is labelled beta in the README, so treating it as production-grade output is not supported by the documentation. And because the library encodes in the browser, the CPU cost lands on the user's device. On low-end phones, encoding mp3 continuously during a long recording is work the server would otherwise do. The README does not publish performance figures, so the only way to know whether that matters for your audience is to measure it yourself on the devices you target.

## Recorder compared with the MediaRecorder API and server-side encoding

The obvious alternative is the browser's own MediaRecorder API. It is built in, needs no library, and produces a compressed container directly. The difference is format control. MediaRecorder output depends on what the browser chooses to support, and the container is typically webm or ogg depending on the engine. If your backend or your downstream ASR service expects mp3 or amr, you either transcode on the server or accept what the browser gives you. Recorder's approach is to own the encoder in JavaScript, which is why it can offer mp3, wav, pcm, g711a, g711u, ogg, amr and webm from the same recording API. The cost is 150kb of JavaScript for mp3 and the CPU time to run the encoder.

The other alternative is recording raw audio in the browser and encoding on the server with a tool like ffmpeg. That keeps the client thin and the format choices flexible, and it is often the better architecture when you already have a server in the path. It stops being better when you need real-time transmission of encoded frames, or when you want the ASR feed to leave the device already compressed, which is exactly the ground the README's real-time encode and transfer demos cover. It also stops being better in offline or peer-to-peer scenarios where no server is available.

A third option is a native app recorder. The README's RecordApp layer and the Android and iOS app source in app-support-sample exist precisely because mini programs and hybrid apps cannot always use the plain web path. If you are already shipping a native shell, that is the branch of this project to read.

## Maintenance, licence and what upgrading costs you

The repository is not archived, and the last push was on 2026-07-30. The most recent release listed is 1.3.26070800 from 2026-07-08, following 1.3.25011100 in January 2025 and 1.3.24102001 in October 2024. The gaps between those three releases run from roughly three months to a year, so the release cadence is irregular rather than steady. Plan for that: pin a version and read the release notes before moving.

The licence is MIT, which permits commercial use, modification and redistribution provided the copyright notice and permission notice are retained. That is a permissive licence and imposes no copyleft obligation on your own code. It says nothing about the patent status of the audio codecs the library implements, and it is not a statement about your jurisdiction. If you are shipping mp3 or amr in a product, that question belongs with your own counsel, not with this README.

The upgrade cost is mostly bundle and API surface. Two prebuilt bundles at the repository root mean a version bump can change the file you ship and its size. Because the format support is spread across plugins and demos rather than one reference page, checking whether a format or callback you depend on changed means reading the release notes and the corresponding demo page. There is no changelog summary in the README itself.

## Conclusion

Adopt Recorder when you need browser-side voice capture that produces mp3 or wav without a server-side encoder, and when mono audio is acceptable. Do not adopt it for stereo music production or for browsers that never implemented getUserMedia, where the README lists no fallback. Before committing, verify on your own target devices that getUserMedia is available, check which of recorder.mp3.min.js or recorder.wav.min.js matches your format, and confirm whether you need the RecordApp layer for a WeChat mini program or a hybrid app.

## FAQ

### What output formats does xiangyuecn/Recorder support?

The README lists mp3 as the default, with wav, pcm, g711a, g711u, ogg, amr and webm (beta) as additional options, plus extension points for other formats when an encoder is available. The mp3 bundle is 150kb and the wav bundle is 25kb.

### Does xiangyuecn/Recorder work on iOS and Android?

The README lists Safari, iOS 14.3 and later, Android WebView, the Tencent Android X5 kernel, Electron, most Android browsers updated after 2021, and Android UC-based kernels updated after 2024. It explicitly does not support non-Safari browsers on iOS 11.0 through 14.2.

### Can xiangyuecn/Recorder record stereo audio?

No. The README states that the library supports single channel only and has not been adapted for stereo, because it is intended mainly for voice recording.

### How do I install xiangyuecn/Recorder?

The README does not describe a package manager install. It points to the GitHub repository and a Gitee mirror, and says that if the hosted github.io pages are unreachable you should download the repository source and open the html files locally.

## Sources

- [License: MIT](https://github.com/xiangyuecn/Recorder/blob/master/LICENSE)
- [Project website](https://xiangyuecn.github.io/Recorder/)
- [README](https://github.com/xiangyuecn/Recorder/blob/master/README.md)
- [Releases](https://github.com/xiangyuecn/Recorder/releases)
- [xiangyuecn/Recorder on GitHub](https://github.com/xiangyuecn/Recorder)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/xiangyuecn-recorder