@berlitz/record-button

RecordButton component for the Max Design System

Usage no npm install needed!

<script type="module">
  import berlitzRecordButton from 'https://cdn.skypack.dev/@berlitz/record-button';
</script>

README

RecordButton npm version

The record button will record audio from the users microphone and stores the audio blob. This component comes in 4 states readyToRecord, recording, readyToPlay and playing which is triggered each time the button is clicked with a smooth transition between each state.

There is also a reset/retry button to allow the user to redo the recording which will only visible after a recording.

For easier translations this component has several text props for each string used and the onRecordComplete prop is a callback function to retrieve the audio blob after the recording.

Installation

yarn add @berlitz/record-button

Props

Argument Type Required Default
onRecordComplete function () => {}
onStartRecording function () => {}
onStopRecording function () => {}
playingText string Stop Listening
readyToPlayText string Play Audio
readyToRecordText string Start Recording
recordingText string Stop Recording
retryText string Retry
timeLimitMs number

Usage

import RecordButton from '@berlitz/record-button'
const MyApp = () => <RecordButton />