function MainComponent({ playSound }) { return /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-4 bg-blue-500 text-white font-roboto", onClick: ()=>playSound('kick'), __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Kick"), /*#__PURE__*/ React.createElement("button", { className: "p-4 bg-green-500 text-white font-roboto", onClick: ()=>playSound('snare'), __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, "Snare"), /*#__PURE__*/ React.createElement("button", { className: "p-4 bg-yellow-500 text-white font-roboto", onClick: ()=>playSound('hihat'), __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, "Hi-Hat"), /*#__PURE__*/ React.createElement("button", { className: "p-4 bg-red-500 text-white font-roboto", onClick: ()=>playSound('crash'), __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, "Crash"), /*#__PURE__*/ React.createElement("button", { className: "p-4 bg-purple-500 text-white font-roboto", onClick: ()=>playSound('tom'), __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, "Tom"), /*#__PURE__*/ React.createElement("button", { className: "p-4 bg-indigo-500 text-white font-roboto", onClick: ()=>playSound('ride'), __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, "Ride"), /*#__PURE__*/ React.createElement("button", { className: "p-4 bg-pink-500 text-white font-roboto", onClick: ()=>playSound('clap'), __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, "Clap"), /*#__PURE__*/ React.createElement("button", { className: "p-4 bg-teal-500 text-white font-roboto", onClick: ()=>playSound('rim'), __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, "Rim")); } function StoryComponent() { const playSound = (type)=>{ const audioContext = new (window.AudioContext || window.webkitAudioContext)(); let oscillator = audioContext.createOscillator(); let gain = audioContext.createGain(); if (type === 'kick') { oscillator.frequency.setValueAtTime(150, audioContext.currentTime); oscillator.frequency.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.5); } else if (type === 'snare') { oscillator.frequency.setValueAtTime(200, audioContext.currentTime); oscillator.frequency.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2); } else if (type === 'hihat') { oscillator = audioContext.createBufferSource(); const buffer = audioContext.createBuffer(1, audioContext.sampleRate * 0.05, audioContext.sampleRate); const data = buffer.getChannelData(0); for(let i = 0; i < data.length; i++){ data[i] = Math.random() * 2 - 1; } oscillator.buffer = buffer; gain.gain.setValueAtTime(0.3, audioContext.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.05); } else if (type === 'crash') { oscillator.frequency.setValueAtTime(300, audioContext.currentTime); oscillator.frequency.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 1.0); } else if (type === 'tom') { oscillator.frequency.setValueAtTime(400, audioContext.currentTime); oscillator.frequency.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5); } else if (type === 'ride') { oscillator.frequency.setValueAtTime(600, audioContext.currentTime); oscillator.frequency.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 1.5); } else if (type === 'clap') { oscillator.frequency.setValueAtTime(800, audioContext.currentTime); oscillator.frequency.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3); } else if (type === 'rim') { oscillator.frequency.setValueAtTime(1000, audioContext.currentTime); oscillator.frequency.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.1); } oscillator.connect(gain); gain.connect(audioContext.destination); oscillator.start(); if (type === 'hihat') { oscillator.stop(audioContext.currentTime + 0.05); } else { oscillator.stop(audioContext.currentTime + 0.5); } }; return /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { playSound: playSound, __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this })); }