qaapio-reecord-mp3
Version:
A convenient and powerful React hook and component for audio recording with customizable options and audio levels.
105 lines • 4.43 kB
JavaScript
;
// useRecorder hook
Object.defineProperty(exports, "__esModule", { value: true });
exports.stopTracks = void 0;
var tslib_1 = require("tslib");
var react_1 = require("react");
var useAudioLevels_1 = require("./useAudioLevels");
function stopTracks(mediaStream) {
mediaStream.getTracks().forEach(function (track) { return track.stop(); });
}
exports.stopTracks = stopTracks;
var useRecorder = function () {
var _a = (0, react_1.useState)('idle'), recordingState = _a[0], setRecordingState = _a[1];
var _b = (0, react_1.useState)(''), audioURL = _b[0], setAudioURL = _b[1];
var _c = (0, react_1.useState)(0), time = _c[0], setTime = _c[1];
var _d = (0, react_1.useState)(null), blob = _d[0], setBlob = _d[1];
var timerRef = (0, react_1.useRef)();
var mediaRecorderRef = (0, react_1.useRef)();
var audioLevel = (0, useAudioLevels_1.useAudioLevels)(recordingState === 'recording');
var _e = (0, react_1.useState)(null), audioFile = _e[0], setAudioFile = _e[1];
var mediaStreamRef = (0, react_1.useRef)(null);
// Function to start recording
var startRecording = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var _a, chunks;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
setRecordingState('recording');
setTime(0);
timerRef.current = window.setInterval(function () {
setTime(function (prevTime) { return prevTime + 1; });
}, 1000);
_a = mediaStreamRef;
return [4 /*yield*/, navigator.mediaDevices.getUserMedia({ audio: true })];
case 1:
_a.current = _b.sent();
mediaRecorderRef.current = new MediaRecorder(mediaStreamRef.current);
chunks = [];
mediaRecorderRef.current.ondataavailable = function (e) { return chunks.push(e.data); };
mediaRecorderRef.current.onstop = function () {
var blob = new Blob(chunks, { type: 'audio/mpeg' });
setBlob(blob);
setAudioURL(URL.createObjectURL(blob));
var audioFile = new File([blob], 'recorded_audio.mp3', {
type: 'audio/mpeg',
});
setAudioFile(audioFile);
};
mediaRecorderRef.current.start();
return [2 /*return*/];
}
});
}); };
// Function to pause recording
var pauseRecording = function () {
var _a;
setRecordingState('paused');
clearInterval(timerRef.current);
(_a = mediaRecorderRef.current) === null || _a === void 0 ? void 0 : _a.pause();
};
// Function to stop recording
var resumeRecording = function () {
var _a;
setRecordingState('recording');
timerRef.current = window.setInterval(function () {
setTime(function (prevTime) { return prevTime + 1; });
}, 1000);
(_a = mediaRecorderRef.current) === null || _a === void 0 ? void 0 : _a.resume();
};
// Add a function to reset recording
var resetRecording = function () {
setRecordingState('idle');
setAudioURL('');
setTime(0);
};
var stopRecording = function () {
var _a;
setRecordingState('stopped');
clearInterval(timerRef.current);
(_a = mediaRecorderRef.current) === null || _a === void 0 ? void 0 : _a.stop();
};
(0, react_1.useEffect)(function () {
return function () {
clearInterval(timerRef.current);
if (mediaStreamRef.current)
stopTracks(mediaStreamRef.current);
};
}, []);
return {
audioLevel: audioLevel,
startRecording: startRecording,
pauseRecording: pauseRecording,
resumeRecording: resumeRecording,
stopRecording: stopRecording,
resetRecording: resetRecording,
timeElapsed: time,
recordingState: recordingState,
isRecording: recordingState === 'recording',
audioURL: audioURL,
audioFile: audioFile,
audioBlob: blob,
};
};
exports.default = useRecorder;
//# sourceMappingURL=useRecorder.js.map