function MainComponent() { const [audioUrl, setAudioUrl] = React.useState(null); const [isPlaying, setIsPlaying] = React.useState(false); const [pitch, setPitch] = React.useState(1); const [speed, setSpeed] = React.useState(1); const audioRef = React.useRef(null); const audioContextRef = React.useRef(null); const mediaRecorderRef = React.useRef(null); const [isRecording, setIsRecording] = React.useState(false); const [recordings, setRecordings] = React.useState([]); const handleAudioUpload = (event)=>{ const file = event.target.files[0]; const url = URL.createObjectURL(file); setAudioUrl(url); if (audioRef.current) { audioRef.current.playbackRate = speed; audioRef.current.preservesPitch = pitch !== 1; } }; const togglePlayPause = ()=>{ if (audioRef.current) { if (isPlaying) { audioRef.current.pause(); } else { audioRef.current.play(); } setIsPlaying(!isPlaying); } }; const changePitch = (event)=>{ setPitch(Number(event.target.value)); if (audioRef.current) { audioRef.current.preservesPitch = pitch !== 1; } }; const changeSpeed = (event)=>{ setSpeed(Number(event.target.value)); if (audioRef.current) { audioRef.current.playbackRate = speed; } }; const startRecording = ()=>{ audioContextRef.current = new window.AudioContext(); mediaRecorderRef.current = new MediaRecorder(audioContextRef.current.destination); mediaRecorderRef.current.start(); setIsRecording(true); }; const stopRecording = ()=>{ mediaRecorderRef.current.stop(); setIsRecording(false); mediaRecorderRef.current.ondataavailable = (event)=>{ setRecordings((prevRecordings)=>[ ...prevRecordings, URL.createObjectURL(event.data) ]); }; }; let playPauseButtonContent = isPlaying ? "⏸" : "▶️"; let recordButtonContent = isRecording ? "✋" : "🎙️"; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "font-roboto", type: "file", accept: "audio/*", name: "audio-upload", onChange: handleAudioUpload, __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mx-2 bg-[#010101] text-[#ffffff] p-2 font-roboto", onClick: isRecording ? stopRecording : startRecording, disabled: isPlaying, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, recordButtonContent), /*#__PURE__*/ React.createElement("label", { className: "mx-2", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "Pitch:", /*#__PURE__*/ React.createElement("input", { className: "ml-2 w-[100px]", type: "range", min: "0.5", max: "2", step: "0.1", value: pitch, name: "pitch-control", onChange: changePitch, __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "mx-2", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, "Speed:", /*#__PURE__*/ React.createElement("input", { className: "ml-2 w-[100px]", type: "range", min: "0.5", max: "2", step: "0.1", value: speed, name: "speed-control", onChange: changeSpeed, __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }))), recordings.map((recording, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("audio", { controls: true, src: recording, className: "mx-1", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }))), audioUrl && /*#__PURE__*/ React.createElement("div", { className: "my-4", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("audio", { ref: audioRef, src: audioUrl, playbackRate: speed, __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "text-[#121212] bg-[#010101] p-2 font-roboto", onClick: togglePlayPause, __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, playPauseButtonContent))); }