function SoundRecorderApp({ audioDevices, selectedDevice, handleDeviceChange, isRecording, handleStartRecording, handleStopRecording, handleSaveRecording, audioUrl, handlePlayRecording, isPlaying }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[700px] h-[600px] bg-[#212121] p-6 rounded-lg flex flex-col items-center gap-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex w-full justify-between items-center mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white font-bold text-xl font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "シンプルサウンドレコーダーアプリ"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-save text-white cursor-pointer", onClick: ()=>handleSaveRecording("mp3"), __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-save text-white cursor-pointer", onClick: ()=>handleSaveRecording("wav"), __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#333333] p-2 rounded-md mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-white font-roboto mr-2", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "デバイスを選択:"), /*#__PURE__*/ React.createElement("select", { className: "bg-[#555555] text-white p-2 rounded-md font-roboto", name: "device", value: selectedDevice || '', onChange: handleDeviceChange, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", disabled: true, __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "選択してください"), audioDevices.map((device)=>/*#__PURE__*/ React.createElement("option", { key: device.deviceId, value: device.deviceId, __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, device.label || 'Unknown Device')))), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-between items-center gap-2", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `flex-1 bg-[${isRecording ? '#ff0000' : '#555555'}] text-white py-2 rounded-md font-roboto cursor-pointer`, name: "start", onClick: isRecording ? handleStopRecording : handleStartRecording, __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, isRecording ? '録音停止' : '録音開始'), audioUrl && /*#__PURE__*/ React.createElement("button", { className: "flex-1 bg-[#555555] text-white py-2 rounded-md font-roboto cursor-pointer", name: "play", onClick: handlePlayRecording, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "再生")), /*#__PURE__*/ React.createElement("div", { className: "w-full text-center mt-4", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, isRecording && /*#__PURE__*/ React.createElement("div", { className: "text-[#ff0000] font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "録音中..."), isPlaying && /*#__PURE__*/ React.createElement("div", { className: "text-[#00ff00] font-roboto", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "再生中..."))); } function SoundRecorderAppStory() { const mockDevices = [ { deviceId: '1', label: 'Microphone 1' }, { deviceId: '2', label: 'Microphone 2' } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-200 min-h-screen flex flex-col items-center", __source: { fileName: "", lineNumber: 79, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SoundRecorderApp, { audioDevices: mockDevices, selectedDevice: "1", handleDeviceChange: ()=>{}, isRecording: false, handleStartRecording: ()=>{}, handleStopRecording: ()=>{}, handleSaveRecording: ()=>{}, audioUrl: "", handlePlayRecording: ()=>{}, isPlaying: false, __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SoundRecorderApp, { audioDevices: mockDevices, selectedDevice: "2", handleDeviceChange: ()=>{}, isRecording: true, handleStartRecording: ()=>{}, handleStopRecording: ()=>{}, handleSaveRecording: ()=>{}, audioUrl: "audio.mp3", handlePlayRecording: ()=>{}, isPlaying: true, __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isRecording, setIsRecording] = React.useState(false); const [audioUrl, setAudioUrl] = React.useState(null); const [audioDevices, setAudioDevices] = React.useState([]); const [selectedDevice, setSelectedDevice] = React.useState(null); const [isPlaying, setIsPlaying] = React.useState(false); const mediaRecorderRef = React.useRef(null); const audioChunks = React.useRef([]); React.useEffect(()=>{ navigator.mediaDevices.enumerateDevices().then((devices)=>{ const audioInputDevices = devices.filter((device)=>device.kind === "audioinput"); setAudioDevices(audioInputDevices); }); }, []); const handleDeviceChange = (event)=>{ setSelectedDevice(event.target.value); }; const handleStartRecording = ()=>{ if (selectedDevice) { navigator.mediaDevices.getUserMedia({ audio: { deviceId: selectedDevice } }).then((stream)=>{ const mediaRecorder = new MediaRecorder(stream); mediaRecorderRef.current = mediaRecorder; mediaRecorder.ondataavailable = (event)=>{ audioChunks.current.push(event.data); }; mediaRecorder.onstop = ()=>{ const audioBlob = new Blob(audioChunks.current); setAudioUrl(URL.createObjectURL(audioBlob)); audioChunks.current = []; }; mediaRecorder.start(); setIsRecording(true); }); } }; const handleStopRecording = ()=>{ if (mediaRecorderRef.current) { mediaRecorderRef.current.stop(); setIsRecording(false); } }; const handlePlayRecording = ()=>{ const audio = new Audio(audioUrl); audio.onplay = ()=>setIsPlaying(true); audio.onended = ()=>setIsPlaying(false); audio.play(); }; const handleSaveRecording = (format)=>{ const audioBlob = new Blob(audioChunks.current, { type: format === "mp3" ? "audio/mp3" : "audio/wav" }); const link = document.createElement("a"); link.href = URL.createObjectURL(audioBlob); link.download = `recording.${format}`; link.click(); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[700px] h-[600px] bg-black p-6 rounded-lg flex flex-col items-center gap-4", __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex w-full justify-between items-center mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white font-bold text-xl font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "シンプルサウンドレコーダーアプリ"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-save text-white cursor-pointer", onClick: ()=>handleSaveRecording("mp3"), __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-save text-white cursor-pointer", onClick: ()=>handleSaveRecording("wav"), __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-silver p-2 rounded-md mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-white font-roboto mr-2", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "デバイスを選択:"), /*#__PURE__*/ React.createElement("select", { className: "bg-[#555555] text-white p-2 rounded-md font-roboto", name: "device", value: selectedDevice || '', onChange: handleDeviceChange, __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", disabled: true, __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "選択してください"), audioDevices.map((device)=>/*#__PURE__*/ React.createElement("option", { key: device.deviceId, value: device.deviceId, __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, device.label || 'Unknown Device')))), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-between items-center gap-2", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `flex-1 bg-[${isRecording ? '#ff0000' : '#555555'}] text-white py-2 rounded-md font-roboto cursor-pointer`, name: "start", onClick: isRecording ? handleStopRecording : handleStartRecording, __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, isRecording ? '録音停止' : '録音開始'), audioUrl && /*#__PURE__*/ React.createElement("button", { className: "flex-1 bg-[#555555] text-white py-2 rounded-md font-roboto cursor-pointer", name: "play", onClick: handlePlayRecording, __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "再生")), /*#__PURE__*/ React.createElement("div", { className: "w-full text-center mt-4", __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, isRecording && /*#__PURE__*/ React.createElement("div", { className: "text-[#ff0000] font-roboto", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, "録音中..."), isPlaying && /*#__PURE__*/ React.createElement("div", { className: "text-[#00ff00] font-roboto", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "再生中..."))); }