qaapio-reecord-mp3
Version:
A convenient and powerful React hook and component for audio recording with customizable options and audio levels.
62 lines • 7.11 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var useRecorder_1 = tslib_1.__importDefault(require("./useRecorder"));
var RecordAudio = function (props) {
var _a = (0, useRecorder_1.default)(), recordingState = _a.recordingState, startRecording = _a.startRecording, pauseRecording = _a.pauseRecording, resumeRecording = _a.resumeRecording, stopRecording = _a.stopRecording, resetRecording = _a.resetRecording, audioURL = _a.audioURL, audioFile = _a.audioFile, audioLevel = _a.audioLevel, timeElapsed = _a.timeElapsed;
if (audioFile) {
props.setAudioFile(audioFile);
}
return (react_1.default.createElement("div", { className: 'border relative flex flex-col justify-center items-center h-72 w-full shadow-lg rounded-md' },
react_1.default.createElement("div", { className: 'absolute top-6 w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center' },
react_1.default.createElement("div", { className: 'w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center', style: {
transform: "scale(".concat(audioLevel / 10, ")"),
} },
react_1.default.createElement("div", { className: 'w-2 h-2 bg-gray-400 rounded-full' })),
react_1.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '40', height: '40', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'lucide lucide-mic absolute' },
react_1.default.createElement("path", { d: 'M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z' }),
react_1.default.createElement("path", { d: 'M19 10v2a7 7 0 0 1-14 0v-2' }),
react_1.default.createElement("line", { x1: '12', x2: '12', y1: '19', y2: '22' }))),
react_1.default.createElement("div", { className: 'mt-24' },
recordingState === 'idle' && (react_1.default.createElement("button", { className: 'flex gap-1 bg-blue-500 text-white px-4 py-2 rounded-md', onClick: startRecording },
react_1.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'lucide lucide-play' },
react_1.default.createElement("polygon", { points: '5 3 19 12 5 21 5 3' })),
"Start Recording")),
['recording', 'paused'].includes(recordingState) && (react_1.default.createElement("div", { className: 'flex flex-col items-center' },
react_1.default.createElement("div", { className: 'flex justify-center items-center gap-2' },
recordingState === 'recording' && (react_1.default.createElement("button", { className: 'flex gap-1 bg-red-500 text-white px-4 py-2 rounded-md', onClick: pauseRecording },
react_1.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'lucide lucide-pause' },
react_1.default.createElement("rect", { width: '4', height: '16', x: '6', y: '4' }),
react_1.default.createElement("rect", { width: '4', height: '16', x: '14', y: '4' })),
"Pause Recording")),
recordingState === 'paused' && (react_1.default.createElement("button", { className: 'flex gap-1 bg-green-500 text-white px-4 py-2 rounded-md', onClick: resumeRecording },
react_1.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'lucide lucide-play' },
react_1.default.createElement("polygon", { points: '5 3 19 12 5 21 5 3' })),
"Resume Recording")),
react_1.default.createElement("button", { className: 'flex gap-1 bg-blue-500 text-white px-4 py-2 rounded-md', onClick: stopRecording },
react_1.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'lucide lucide-stop-circle' },
react_1.default.createElement("circle", { cx: '12', cy: '12', r: '10' }),
react_1.default.createElement("rect", { width: '6', height: '6', x: '9', y: '9' })),
"Stop Recording")),
react_1.default.createElement("p", { className: 'text-gray-500 text-lg mt-4' },
"Time: ",
timeElapsed,
"s"))),
recordingState === 'stopped' && (react_1.default.createElement("div", { className: 'flex flex-col items-center' },
react_1.default.createElement("div", { className: 'flex justify-center items-center gap-4' },
react_1.default.createElement("button", { className: 'flex gap-1 bg-green-500 text-white px-4 py-2 rounded-md' },
react_1.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'lucide lucide-play' },
react_1.default.createElement("polygon", { points: '5 3 19 12 5 21 5 3' })),
react_1.default.createElement("a", { href: audioURL, download: 'recorded_audio.mp3' }, "Download")),
react_1.default.createElement("button", { className: 'flex gap-1 bg-blue-500 text-white px-4 py-2 rounded-md', onClick: resetRecording },
react_1.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'lucide lucide-repeat' },
react_1.default.createElement("path", { d: 'm17 2 4 4-4 4' }),
react_1.default.createElement("path", { d: 'M3 11v-1a4 4 0 0 1 4-4h14' }),
react_1.default.createElement("path", { d: 'm7 22-4-4 4-4' }),
react_1.default.createElement("path", { d: 'M21 13v1a4 4 0 0 1-4 4H3' })),
"Record Again")),
react_1.default.createElement("audio", { src: audioURL, controls: true, className: 'mt-4' }))))));
};
exports.default = RecordAudio;
//# sourceMappingURL=RecordAudio.js.map