explaingit

xiangyuecn/recorder

5,604JavaScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

A JavaScript library for recording audio from a browser microphone and saving it in formats including MP3, WAV, OGG, and AMR, with real-time encoding, waveform visualization, and support for WeChat, iOS, and Android WebView.

Mindmap

mindmap
  root((recorder))
    Audio capture
      Microphone input
      Video audio track
      WebRTC incoming
    Output formats
      MP3 and WAV
      OGG and AMR
      G711a and G711u
    Plugins
      Waveform visualization
      Speech recognition
      DTMF tones
      Playback speed control
    Platform support
      iOS 14 and later
      Android WebView
      WeChat and QQ browsers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a voice message recorder button to a web page that captures microphone audio and saves it as an MP3 file for upload.

USE CASE 2

Stream live audio chunks from the browser to a server in real time while the user is still speaking, without waiting for them to finish.

USE CASE 3

Display a live waveform animation on an HTML canvas element while the user records audio inside a WeChat Mini Program.

USE CASE 4

Record the audio track from a playing video element on the page and save it as a separate audio file.

Tech stack

JavaScriptWeb Audio APInpm

Getting it running

Difficulty · easy Time to first run · 30min

In plain English

Recorder is a JavaScript library that lets web pages record audio from a device's microphone directly in the browser, without requiring any additional software or plugins. It works by tapping into the browser's built-in audio capture capabilities and supports a wide range of browsers on desktop and mobile, including Chrome, Firefox, Safari, iOS 14.3 and later, Android WebView, and the browser engines used inside WeChat and QQ on Android. Once audio is captured, the library handles saving it in whichever format the developer needs. The supported formats include MP3, WAV, OGG, AMR, and several telephone-grade compressed formats (G711a and G711u used in voice call systems). The library can also encode audio in real time as it is being recorded, which makes it possible to stream audio to a server while a user is still speaking rather than waiting for them to finish. Beyond basic recording and saving, the project includes a collection of plugins for additional tasks. There are visualization tools that draw audio waveforms or frequency graphs on screen. There is support for connecting to speech recognition services so recorded audio can be transcribed to text. A separate plugin handles DTMF tones, which are the sounds that telephones make when you press number keys. Another plugin adjusts the playback speed or pitch of a recording. The library also supports recording from sources other than a microphone, such as the audio track of a video element playing on the page or an incoming WebRTC call. The project comes with sample code for Android and iOS native app wrappers, WeChat Mini Programs, and the uni-app cross-platform framework, so developers building hybrid mobile apps can use the same library. Numerous small runnable demos are linked in the README covering format conversion, audio mixing, filtering, and other signal processing tasks. Documentation and demos are written primarily in Chinese and hosted as live HTML pages. The core recording library is available as an npm package. The full README is longer than what was shown.

Copy-paste prompts

Prompt 1
Using the xiangyuecn/recorder library, help me add a microphone recording button to my web page that saves the audio as an MP3 file and uploads it to my server when the user stops.
Prompt 2
Show me how to use recorder.js to stream audio chunks to a WebSocket server in real time as the user is speaking, without waiting until recording stops.
Prompt 3
Help me integrate the recorder visualization plugin to draw a live frequency graph on an HTML canvas while the user is recording audio in Chrome.
Prompt 4
I need to record audio inside a WeChat Mini Program. Show me how to set up the xiangyuecn/recorder library for that environment using the sample wrapper code.
Open on GitHub → Explain another repo

← xiangyuecn on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.