react-visual-audio-recorder
Advanced tools
Comparing version
{ | ||
"name": "react-visual-audio-recorder", | ||
"version": "1.2.3", | ||
"version": "1.3.0", | ||
"private": false, | ||
@@ -5,0 +5,0 @@ "scripts": { |
import React from "react"; | ||
import type { ReactVisualAudioRecorderRefHandler, ReactVisualAudioRecorderProps } from "./types"; | ||
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>>; | ||
declare const ReactVisualAudioRecorder: React.ForwardRefExoticComponent<Pick<ReactVisualAudioRecorderProps, "height" | "width" | "backgroundColor" | "className" | "onChange" | "onStart" | "onStop" | "onData" | "mimeType" | "handleStatus" | "showOnlyOnRecord" | "audioBitsPerSecond" | "echoCancellation" | "channelCount" | "autoGainControl" | "noiseSuppression" | "frequencySize" | "ext" | "strokeColor"> & React.RefAttributes<ReactVisualAudioRecorderRefHandler>>; | ||
export default ReactVisualAudioRecorder; |
@@ -6,3 +6,3 @@ /* eslint-disable react-hooks/exhaustive-deps */ | ||
const ReactVisualAudioRecorder = forwardRef((props, ref) => { | ||
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 { width = 640, height = 100, onStart, onStop, onData, onChange, handleStatus, mimeType: _mimeType, ext: _ext, audioBitsPerSecond = 128000, echoCancellation = true, autoGainControl = true, noiseSuppression = true, showOnlyOnRecord, channelCount = 2, backgroundColor = "rgba(255, 255, 255, 0.5)", strokeColor = "#000000", className = "visualizer", } = props; | ||
const [record, setRecord] = useState(false); | ||
@@ -93,4 +93,6 @@ const [pause, setPause] = useState(false); | ||
}), [record]); | ||
if (showOnlyOnRecord && audioRecorderStatus !== "recording") | ||
return null; | ||
return React.createElement("canvas", { ref: visualizerRef, height: height, width: width, className: className }); | ||
}); | ||
export default ReactVisualAudioRecorder; |
@@ -25,2 +25,3 @@ # ReactVisualAudioRecorder | ||
| `handleStatus` | `(status: "pause" "recording" "stopped") => void` | | Function that handle status of the recording instance. | | ||
| `showOnlyOnRecord` | `boolean` | false | Show visualisation only if microphone is recording.second. | | ||
| `audioBitsPerSecond` | `number` | 128000 | Quality of the recording in bytes/second. | | ||
@@ -27,0 +28,0 @@ | `echoCancellation` | `boolean` | true | Reduces the echo of the recording. | |
@@ -45,2 +45,7 @@ import { ForwardedRef } from "react"; | ||
/** | ||
* Show visualisation only if microphone is recording. | ||
* @default false | ||
*/ | ||
showOnlyOnRecord?: boolean; | ||
/** | ||
* Quality of the recording in bytes/second. | ||
@@ -47,0 +52,0 @@ * @default 128000 |
28186
1.72%504
1.41%117
0.86%