function MainComponent() { const [waveSurfer, setWaveSurfer] = React.useState(null); const [isRecording, setIsRecording] = React.useState(false); const [mediaRecorder, setMediaRecorder] = React.useState(null); const audioRef = React.useRef(null); const waveformRef = React.useRef(null); React.useEffect(()=>{ if (waveformRef.current) { const WaveSurfer = require('wavesurfer.js'); const ws = WaveSurfer.create({ container: waveformRef.current, waveColor: '#ddd', progressColor: '#ff00ff', height: 100, barWidth: 2, cursorWidth: 1 }); setWaveSurfer(ws); } }, [ waveformRef ]); const handleUpload = (event)=>{ const file = event.target.files[0]; if (file && waveSurfer) { const reader = new FileReader(); reader.onload = (e)=>{ waveSurfer.loadBlob(new Blob([ new Uint8Array(e.target.result) ])); }; reader.readAsArrayBuffer(file); } }; const handleStartRecording = async ()=>{ if (!isRecording) { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const recorder = new MediaRecorder(stream); setMediaRecorder(recorder); recorder.ondataavailable = (e)=>{ const audioURL = URL.createObjectURL(e.data); waveSurfer.load(audioURL); }; recorder.start(); setIsRecording(true); } else { mediaRecorder.stop(); setIsRecording(false); } }; const handlePlay = ()=>{ waveSurfer.playPause(); }; const handleStop = ()=>{ waveSurfer.stop(); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, "音声データを編集できるwebブラウザDAW"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>audioRef.current.click(), className: "px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "アップロード"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "audio/*", className: "hidden", ref: audioRef, onChange: handleUpload, name: "audioUpload", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleStartRecording, className: `px-4 py-2 ${isRecording ? 'bg-red-500' : 'bg-green-500'} text-white rounded`, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, isRecording ? '停止録音' : '録音'), /*#__PURE__*/ React.createElement("button", { onClick: handlePlay, className: "px-4 py-2 bg-yellow-500 text-white rounded", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "再生"), /*#__PURE__*/ React.createElement("button", { onClick: handleStop, className: "px-4 py-2 bg-gray-500 text-white rounded", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "停止")), /*#__PURE__*/ React.createElement("div", { ref: waveformRef, __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, ` .waveform-container { width: 100%; height: 200px; } `)); }