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.3.2
to
1.3.3

2

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

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

13

ReactVisualAudioRecorder.js

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

}, [_mimeType, _ext]);
const { stopRecording: onStopRecording, pauseRecording: onPauseRecording, resumeRecording: onResumeRecording, resetRecording: onResetRecording, startRecording: onStartRecording, mediaRecorderApi, } = useMicrophoneRecorder({
const { stopRecording: onStopRecording, pauseRecording: onPauseRecording, resumeRecording: onResumeRecording, resetRecording: onResetRecording, startRecording: onStartRecording, mediaRecorderApi, analyser, } = useMicrophoneRecorder({
onStart,

@@ -39,6 +39,4 @@ onStop,

let animationFrame = -1;
mediaRecorderApi.then((api) => {
if (record && visualizerRef.current)
animationFrame = Visualizer(visualizerRef.current.getContext("2d"), visualizerRef.current, api.analyser, width, height, backgroundColor, strokeColor);
});
if (record && visualizerRef.current && analyser)
animationFrame = Visualizer(visualizerRef.current.getContext("2d"), visualizerRef.current, analyser, width, height, backgroundColor, strokeColor);
return () => {

@@ -48,3 +46,3 @@ if (animationFrame > -1)

};
}, [record, visualizerRef.current, mediaRecorderApi, width, height, backgroundColor, strokeColor]);
}, [record, visualizerRef.current, analyser, width, height, backgroundColor, strokeColor]);
useEffect(() => {

@@ -94,3 +92,4 @@ const status = pause && record ? "pause" : !pause && record ? "recording" : "stopped";

mediaRecorderApi,
}), [record, mediaRecorderApi]);
analyser,
}), [record]);
if (showOnlyOnRecord && audioRecorderStatus !== "recording")

@@ -97,0 +96,0 @@ return null;

6

types.d.ts

@@ -134,8 +134,8 @@ import { ForwardedRef } from "react";

audioContext: AudioContext;
analyser: AnalyserNode;
mediaStream: MediaStream;
}>;
analyser: AnalyserNode | void;
}
export interface UseMicrophoneRecorderParams {
onStart: ((mediaRecorder: MediaRecorder, audioContext: AudioContext, mediaStream: MediaStream, analyser: AnalyserNode) => void) | void;
onStart: ((mediaRecorder: MediaRecorder, audioContext: AudioContext, mediaStream: MediaStream) => void) | void;
onStop: ((blobObject: ReactVisualAudioRecorderBlobObject) => void) | void;

@@ -158,5 +158,5 @@ onChange: ((blobObject: ReactVisualAudioRecorderBlobObject) => void) | void;

audioContext: AudioContext;
analyser: AnalyserNode;
mediaStream: MediaStream;
}>;
analyser: AnalyserNode | void;
};

40

useMicrophoneRecorder.js

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

const [startTime, setStartTime] = useState();
const [resetApiKey, setResetApi] = useState(Date.now());
function resetApi() {
setResetApi(Date.now);
}
const [analyser, setAnalyser] = useState();
const chunks = useRef([]);

@@ -66,16 +63,23 @@ let constraints = useMemo(() => ({

}
const audioCtx = createAudioContextCompat();
mediaRecorderInstance.addEventListener("dataavailable", onHandleChunks);
const audioCtx = createAudioContextCompat();
const analyser = audioCtx.createAnalyser();
mediaRecorderInstance.addEventListener("start", () => {
const analyser = audioCtx.createAnalyser();
audioCtx.resume().then(() => {
const sourceNode = audioCtx.createMediaStreamSource(mediaStream);
sourceNode.connect(analyser);
setAnalyser(analyser);
});
if (onStart)
onStart(mediaRecorderInstance, audioCtx, mediaStream, analyser);
onStart(mediaRecorderInstance, audioCtx, mediaStream);
});
mediaRecorderInstance.addEventListener("stop", () => {
mediaStream.getAudioTracks().forEach((track) => {
track.stop();
});
audioCtx.close();
});
mediaRecorderInstance.addEventListener("error", (event) => {
console.error("ReactVisualAudioRecorder", event);
});
audioCtx.resume().then(() => {
const sourceNode = audioCtx.createMediaStreamSource(mediaStream);
sourceNode.connect(analyser);
});
setStartTime(Date.now());

@@ -85,3 +89,2 @@ return {

audioContext: audioCtx,
analyser,
mediaStream,

@@ -93,3 +96,3 @@ };

}
}), [resetApiKey]);
}), []);
function onHandleChunks(event) {

@@ -147,3 +150,3 @@ chunks.current.push(event.data);

onStop();
mediaRecorderApi.then(({ mediaRecorder, mediaStream, audioContext }) => {
mediaRecorderApi.then(({ mediaRecorder }) => {
if (mediaRecorder) {

@@ -153,10 +156,2 @@ if (mediaRecorder.state !== "inactive")

}
if (mediaStream) {
mediaStream.getAudioTracks().forEach((track) => {
track.stop();
});
}
if (audioContext) {
audioContext.close();
}
setStartTime();

@@ -197,3 +192,4 @@ });

mediaRecorderApi,
analyser,
};
}