Audio Recording PWA Demo

Demo

Install the app, then open it from your homescreen. Tap the button below to record audio from your microphone. Record a few seconds of audio, and tap the button again to stop the recording. You can then play the audio you've just recorded.

How it works

The MediaDevices and MediaRecorder APIs allow you to access the device's microphone, then record the audio stream that emanates from it. This demo then converts the audio by extracting the audio chunks, consolidating them into a blob, and finally creates a data URL to use as src for our native <audio> element.

There's more...

The demo is a simple example of audio recording. But you can do so much more with audio on the web. With the Web Audio API, you can add effects to audio, create audio visualizations, or apply spatial effects. With the SpeechRecognition API, you can automatically extract text from audio and transcribe speech. With the MediaSession API, you can create a complete audio or music player controllable from the lock screen. And with the Bluetooth API, you can even connect to microphones, headsets and other audio devices.

Browser support

All major browsers support all main audio APIs. PWA is a great choice for sound processing apps, music players or audio recorders.

Code

Links & Documentation

• getUserMedia API Documentation
• MediaRecorder API Documentation