audio-recorder-el

<audio-recorder>

An <audio-recorder> custom element to simplify recording sound in the browser.

The <audio-recorder> element encapsulates a user-interface comprising:

• A Record button,
• Stop button,
• Download button,
• An <output> status element (live-region),
• An <audio> element for optional playback.

Any of the UI elements above can be hidden, and styled.

Usage

Install locally:

npm i audio-recorder-el

Or access via CDN:

import 'https://unpkg.com/audio-recorder-el';

HTML example:

<audio controls></audio>
<audio-recorder></audio-recorder>

This is a JavaScript example of listening for the audio-recorder event emitted by the custom element (complete demo):

const audioElem = document.querySelector('audio');

document.body.addEventListener('audio-recorder', (event) => {
  const { eventName } = event;
  const recorder = event.target;

  if (event.is('stop')) {
    audioElem.src = recorder.createAudioURL();
  }

  console.debug('audio-recorder:', eventName, event);
});