You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

react-visual-audio-recorder

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-visual-audio-recorder - npm Package Compare versions

Comparing version

1.0.3
to
1.1.0

2

package.json
{
"name": "react-visual-audio-recorder",
"version": "1.0.3",
"version": "1.1.0",
"private": false,

@@ -5,0 +5,0 @@ "scripts": {

2

ReactVisualAudioRecorder.d.ts
import React from "react";
import type { ReactVisualAudioRecorderRefHandler, ReactVisualAudioRecorderProps } from "./types";
declare const ReactVisualAudioRecorder: React.ForwardRefExoticComponent<Pick<ReactVisualAudioRecorderProps, "height" | "width" | "backgroundColor" | "className" | "onChange" | "onStart" | "onData" | "mimeType" | "handleStatus" | "audioBitsPerSecond" | "echoCancellation" | "channelCount" | "autoGainControl" | "noiseSuppression" | "frequencySize" | "ext" | "strokeColor"> & React.RefAttributes<ReactVisualAudioRecorderRefHandler>>;
declare const ReactVisualAudioRecorder: React.ForwardRefExoticComponent<Pick<ReactVisualAudioRecorderProps, "height" | "width" | "backgroundColor" | "className" | "onChange" | "onStart" | "onStop" | "onData" | "mimeType" | "handleStatus" | "audioBitsPerSecond" | "echoCancellation" | "channelCount" | "autoGainControl" | "noiseSuppression" | "frequencySize" | "ext" | "strokeColor"> & React.RefAttributes<ReactVisualAudioRecorderRefHandler>>;
export default ReactVisualAudioRecorder;

3

ReactVisualAudioRecorder.js

@@ -6,3 +6,3 @@ /* eslint-disable react-hooks/exhaustive-deps */

const ReactVisualAudioRecorder = forwardRef((props, ref) => {
const { width = 640, height = 100, onStart, onData, onChange, handleStatus, mimeType: _mimeType, ext: _ext, audioBitsPerSecond = 128000, echoCancellation = true, autoGainControl = true, noiseSuppression = true, channelCount = 2, backgroundColor = "rgba(255, 255, 255, 0.5)", strokeColor = "#000000", className = "visualizer", } = props;
const { width = 640, height = 100, onStart, onStop, onData, onChange, handleStatus, mimeType: _mimeType, ext: _ext, audioBitsPerSecond = 128000, echoCancellation = true, autoGainControl = true, noiseSuppression = true, channelCount = 2, backgroundColor = "rgba(255, 255, 255, 0.5)", strokeColor = "#000000", className = "visualizer", } = props;
const [record, setRecord] = useState(false);

@@ -22,2 +22,3 @@ const [pause, setPause] = useState(false);

onStart,
onStop,
onChange,

@@ -24,0 +25,0 @@ onData,

3

README.md

@@ -20,4 +20,5 @@ # ReactVisualAudioRecorder

| `height` | `number` | 100 | Height of the canvas. |
| `onStart` | `(MediaRecorder, AudioContext, MediaStream, AnalyserNode) => void` | | Called when the recording is started |
| `onStop` | `(BlobObject) => void` | | Called when the recording is stopped. |
| `onChange` | `(BlobObject) => void` | | Called when the recording is stopped or paused. |
| `onStart` | `(MediaRecorder, AudioContext, MediaStream, AnalyserNode) => void` | | Called when the recording is started |
| `onData` | `(blob: Blob) => void;` | | Called during the recording. Sending all chunks as blob during the recording. |

@@ -24,0 +25,0 @@ | `handleStatus` | `(status: "pause" "recording" "stopped") => void` | | Function that handle status of the recording instance. |

17

types.d.ts

@@ -14,2 +14,13 @@ import { ForwardedRef } from "react";

/**
* Called when the recording is started
* @returns
*/
onStart?: () => void;
/**
* Called when the recording is stopped. All chunks are sended as a blob.
* @param blobObject
* @returns
*/
onStop?: (blobObject: ReactVisualAudioRecorderBlobObject) => void;
/**
* Called when the recording is stopped or paused. All chunks

@@ -22,7 +33,2 @@ * are sended as a blob.

/**
* Called when the recording is started
* @returns
*/
onStart?: () => void;
/**
* Called during the recording. Sending all chunks as blob

@@ -125,2 +131,3 @@ * during the recording.

onStart: ((mediaRecorder: MediaRecorder, audioContext: AudioContext, mediaStream: MediaStream, analyser: AnalyserNode) => void) | void;
onStop: ((blobObject: ReactVisualAudioRecorderBlobObject) => void) | void;
onChange: ((blobObject: ReactVisualAudioRecorderBlobObject) => void) | void;

@@ -127,0 +134,0 @@ onData: ((blob: Blob) => void) | void;

4

useMicrophoneRecorder.js

@@ -44,3 +44,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {

export function useMicrophoneRecorder(params) {
const { onStart, onChange, onData, options, soundOptions } = params;
const { onStart, onStop: _onStop, onChange, onData, options, soundOptions } = params;
const [mediaStream, setMediaStream] = useState();

@@ -102,2 +102,4 @@ const [mediaRecorder, setMediaRecorder] = useState();

onChange(blobObject);
if (_onStop)
_onStop(blobObject);
}

@@ -104,0 +106,0 @@ }