Recording audio with the MediaStream Recorder API

Made by the Pipe Video Recording Platform

This demo below shows you how to record audio directly in the browser using native browser APIs. The MediaStream Recorder API makes media recording in the browser very easy. It allows capturing chunks of (audio) data from a microphone media stream as blobs, which can later be concatenated in a single audio file. The file can then be saved locally or uploaded/POSTed to the web server. Recorded audio files contain Opus audio and have the .webm extension.

At the moment the MediaStream Recorder API is only supported by Chrome, Firefox, Opera and Edge 79 (Chromium). Please comment on this Safari/WebKit feature request to request Safari support.

Recordings:

Resources

Code for this demo on GitHub: https://github.com/addpipe/media-recorder-api-audio-demo
Our blog post on the topic: https://blog.addpipe.com/recording-audio-in-the-browser-using-pure-html5-and-minimal-javascript/
We've also built a video recording demo