# @sarafhbk/react-audio-recorder

> This is a simple audio recorder package for react application using the javascript Web Audio API.

Latest version **1.1.2** (published 2021-07-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sarafhbk/react-audio-recorder
pnpm add @sarafhbk/react-audio-recorder
yarn add @sarafhbk/react-audio-recorder
bun add @sarafhbk/react-audio-recorder
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2021-07-04 |
| First published | 2021-07-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 38.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | sarafhbk |
| Maintainers | sarafhbk |
| Keywords | audio, record, audio recorder, voice, voice recorder, react voice recorder, react audio recorder, react audio permission, record timer, react record audio, react record voice |

## Links

- npm: https://www.npmjs.com/package/@sarafhbk/react-audio-recorder
- Repository: https://github.com/sarafhbk/react-audio-recorder
- Homepage: https://github.com/sarafhbk/react-audio-recorder#readme
- Issues: https://github.com/sarafhbk/react-audio-recorder/issues
- npm.io page: https://npm.io/package/@sarafhbk/react-audio-recorder

## Recent versions

- 1.1.2 (latest) — 2021-07-04
- 1.1.1 — 2021-07-04
- 1.1.0 — 2021-07-04
- 1.0.9 — 2021-07-04
- 1.0.8 — 2021-07-04
- 1.0.7 — 2021-07-04
- 1.0.6 — 2021-07-04
- 1.0.5 — 2021-07-04
- 1.0.4 — 2021-07-04
- 1.0.3 — 2021-07-04
- 1.0.2 — 2021-07-04
- 1.0.1 — 2021-07-04
- 1.0.0 — 2021-07-04

## README

# @sarafhbk/react-audio-recorder

> This is a simple audio recorder package for react application using the javascript [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API).

[![NPM](https://img.shields.io/npm/v/@sarafhbk/react-audio-recorder.svg)](https://www.npmjs.com/package/@sarafhbk/react-audio-recorder) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

# Demo

Checkout the [Demo.](https://sarafhbk.github.io/react-audio-recorder)

## Install

```bash

npm install --save @sarafhbk/react-audio-recorder

yarn add @sarafhbk/react-audio-recorder

```

## Props

| Property name   | Type   | Default            | Description                           |
| --------------- | ------ | ------------------ | ------------------------------------- |
| status          | string | RECORD_STATUS.IDLE | RECORD_STATUS.(IDLE,RECORDING,PAUSED) |
| audioResult     | string | -                  | Result blob url.                      |
| errorMessage    | string | -                  | Error messages.                       |
| timer           | number | -                  | Record timer (in secs).               |
| startRecording  | method | -                  | Call this method to start recording.  |
| stopRecording   | method | -                  | Call this method to stop recording.   |
| pauseRecording  | method | -                  | Call this method to pause recording.  |
| resumeRecording | method | -                  | Call this method to resume recording. |

## Usage (Class Version)

```tsx
import React, { Component } from 'react'

import { ReactAudioRecorder } from '@sarafhbk/react-audio-recorder'

class Example extends Component {
  render() {
    return (
      <ReactAudioRecorder
        render={({
          timer,
          stopRecording,
          startRecording,
          resumeRecording,
          pauseRecording,
          audioResult,
          status,
          errorMessage
        }) => (
          <div>
            <audio controls src={audioResult} />
            <p>
              Status : <b>{status}</b>
            </p>
            <p>
              Error Message : <b>{errorMessage}</b>
            </p>
            <div>
              <p>{new Date(timer * 1000).toISOString().substr(11, 8)}</p>
              <div>
                <button onClick={startRecording}>Start</button>
                <button onClick={stopRecording}>Stop</button>
                <button onClick={pauseRecording}>Pause</button>
                <button onClick={resumeRecording}>Resume</button>
              </div>
            </div>
          </div>
        )}
      />
    )
  }
}
```

## Usage (Hooks Version)

```tsx
import React from 'react'

import { useAudioRecorder } from '@sarafhbk/react-audio-recorder'

function Example() {
  const {
    audioResult,
    timer,
    startRecording,
    stopRecording,
    pauseRecording,
    resumeRecording,
    status,
    errorMessage
  } = useAudioRecorder()
  return (
    <div>
      <audio controls src={audioResult} />
      <p>
        Status : <b>{status}</b>
      </p>
      <p>
        Error Message : <b>{errorMessage}</b>
      </p>
      <div>
        <p>{new Date(timer * 1000).toISOString().substr(11, 8)}</p>
        <div>
          <button onClick={startRecording}>Start</button>
          <button onClick={stopRecording}>Stop</button>
          <button onClick={pauseRecording}>Pause</button>
          <button onClick={resumeRecording}>Resume</button>
        </div>
      </div>
    </div>
  )
}
```

## License

MIT © [sarafhbk](https://github.com/sarafhbk)

---
_Source: https://npm.io/package/@sarafhbk/react-audio-recorder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._