function MainComponent() { const [devices, setDevices] = React.useState([]); const [selectedDevice, setSelectedDevice] = React.useState(""); const [isRecording, setIsRecording] = React.useState(false); const [mediaRecorder, setMediaRecorder] = React.useState(null); const [audioChunks, setAudioChunks] = React.useState([]); const [audioUrl, setAudioUrl] = React.useState(null); const [isPlaying, setIsPlaying] = React.useState(false); React.useEffect(()=>{ navigator.mediaDevices.enumerateDevices().then((devices)=>{ const audioDevices = devices.filter((device)=>device.kind === "audioinput"); setDevices(audioDevices); if (audioDevices.length > 0) { setSelectedDevice(audioDevices[0].deviceId); } }); }, []); const startRecording = ()=>{ if (selectedDevice) { navigator.mediaDevices.getUserMedia({ audio: { deviceId: selectedDevice } }).then((stream)=>{ const recorder = new MediaRecorder(stream); setMediaRecorder(recorder); recorder.ondataavailable = (event)=>{ setAudioChunks((prev)=>[ ...prev, event.data ]); }; recorder.onstop = saveRecording; recorder.start(); setIsRecording(true); }); } }; const stopRecording = ()=>{ if (mediaRecorder) { mediaRecorder.stop(); setIsRecording(false); } }; const saveRecording = ()=>{ const audioBlob = new Blob(audioChunks, { type: 'audio/wav' }); const audioUrl = URL.createObjectURL(audioBlob); setAudioUrl(audioUrl); setAudioChunks([]); }; const handleDeviceChange = (event)=>{ setSelectedDevice(event.target.value); }; const handlePlay = ()=>{ if (audioUrl) { const audio = new Audio(audioUrl); audio.play(); setIsPlaying(true); audio.onended = ()=>setIsPlaying(false); } }; const handleSave = (format)=>{ if (audioUrl) { const link = document.createElement('a'); link.href = audioUrl; link.download = `recording.${format}`; document.body.appendChild(link); link.click(); document.body.removeChild(link); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen p-4 bg-[#2C2C2C] text-white", __source: { fileName: "", lineNumber: 74, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex justify-center w-full", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "devices", className: "font-crimson-text", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, "サウンドデバイス:"), /*#__PURE__*/ React.createElement("select", { id: "devices", name: "devices", value: selectedDevice, onChange: handleDeviceChange, className: "ml-2 p-2 border border-gray-300 rounded-md text-black", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, devices.map((device)=>/*#__PURE__*/ React.createElement("option", { key: device.deviceId, value: device.deviceId, className: "font-crimson-text", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, device.label)))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-black w-[300px] p-4 rounded-lg", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "px-2 text-yellow-400 font-crimson-text", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "OH"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "1", step: "0.1", className: "w-[100px] h-[20px]", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center mt-4", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "px-2 text-yellow-400 font-crimson-text", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "Type:"), /*#__PURE__*/ React.createElement("select", { className: "text-black w-[100px] h-[20px]", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "0"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "1"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, "2"))), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "10", step: "0.5", className: "mt-4 transform rotate-270 w-[100px]", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-[10px] h-[200px] mt-4 bg-gray-700 relative", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 w-full h-[40%] bg-green-500", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mt-4", __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: isRecording ? stopRecording : startRecording, className: `p-3 rounded-md font-crimson-text ${isRecording ? "bg-red-500" : "bg-blue-500"}`, __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, isRecording ? "停止" : "録音"), /*#__PURE__*/ React.createElement("button", { onClick: handlePlay, disabled: !audioUrl, className: "p-3 bg-green-500 text-white rounded-md font-crimson-text", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, "再生"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSave('mp3'), disabled: !audioUrl, className: "p-3 bg-yellow-500 text-white rounded-md font-crimson-text", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, "MP3保存"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSave('wav'), disabled: !audioUrl, className: "p-3 bg-yellow-500 text-white rounded-md font-crimson-text", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, "WAV保存")), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4 font-crimson-text", __source: { fileName: "", lineNumber: 137, columnNumber: 7 }, __self: this }, isRecording && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 animate-fadeaway", __source: { fileName: "", lineNumber: 138, columnNumber: 25 }, __self: this }, "録音中..."), isPlaying && /*#__PURE__*/ React.createElement("div", { className: "text-green-500", __source: { fileName: "", lineNumber: 139, columnNumber: 23 }, __self: this }, "再生中...")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, ` @keyframes fadeaway { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .animate-fadeaway { animation: fadeaway 1s infinite; } `)); }