[{"_1":2,"_136":-5,"_137":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_5":44,"_56":57,"_58":59,"_60":41,"_61":62,"_63":59,"_64":65,"_66":41,"_67":59,"_68":59,"_69":59,"_70":17,"_71":17,"_72":73,"_74":75,"_76":77,"_78":79,"_80":81,"_96":-5,"_97":17,"_98":99,"_132":31,"_133":134,"_135":17},"id","f901aa5f8c1cb82f8435","isMyApp",false,"name","beats.fun","description","Drop beats, layer tracks, and craft bangers right in your browser with this no-nonsense music production playground! Mix, record, and monetize your sonic creations with intuitive drag-and-drop tools, then sell your masterpieces directly through Solana integration.","brief","Browser-based beat laboratory where you can create, mix, and sell your musical masterpieces on the fly!","isLive",true,"isPublic","tags",[29],"💰","cover","https://cdn.dev.fun/snapshot/f901aa5f8c1cb82f8435/77640_d6b21705.webp","cdnUrl","https://cdn.dev.fun/app/f901aa5f8c1cb82f8435/77640","createdAt",["D",1749480752690],"updatedAt",["D",1749505207471],"lastCommitId",["B","77640"],"tier",1,"credits",-11,{"_14":45,"_46":47,"_48":47,"_49":50,"_51":47,"_52":53,"_54":55},"048868f6-20f0-40cb-8756-049923b77cc2","uniqueId","Antoni","username","solanaWallet","7awKmKh27Xp5hzGRfRkKyfuYTAYWqm2F6pYzcuXUNRvz","displayName","bio","Loves building stuff","avatar","/avatar.svg","commitCount",26,"forkCount",0,"likeCount","runsCount",52,"downvoteCount","upvoteCount",3,"upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","3HfLqhtF5hR5dyBXh6BMtRaTm9qzStvEGuMa8Gx6pump","code","import { useState, useRef, useEffect } from 'react';\nimport { WalletMultiButton } from \"@solana/wallet-adapter-react-ui\";\nimport { useWallet } from \"@solana/wallet-adapter-react\";\nimport { ConnectionProvider, WalletProvider } from \"@solana/wallet-adapter-react\";\nimport { WalletModalProvider } from \"@solana/wallet-adapter-react-ui\";\nimport \"@solana/wallet-adapter-react-ui/styles.css\";\nimport { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom';\nimport { Mic, Play, Pause, Volume2, Download, RefreshCw, HelpCircle, X, Plus, Scissors, Music, ShoppingBag, Share2, Library, Trash2, Headphones, Clock, Menu, ArrowRight, Wand2, Sparkles, DollarSign } from 'lucide-react';\nimport { motion, AnimatePresence, useAnimation, useInView } from 'framer-motion';\nconst AppWithProvider = () => {\n const endpoint = 'https://rpc.dev.fun/f901aa5f8c1cb82f8435';\n return \n \n \n \n \n \n \n \n ;\n};\nfunction FadeInSection({\n children,\n delay = 0,\n className = \"\"\n}) {\n const controls = useAnimation();\n const ref = useRef(null);\n const inView = useInView(ref, {\n once: true,\n threshold: 0.1\n });\n useEffect(() => {\n if (inView) {\n controls.start(\"visible\");\n }\n }, [controls, inView]);\n return \n {children}\n ;\n}\nlet audioContext;\nif (typeof window !== 'undefined') {\n audioContext = new (window.AudioContext || window.webkitAudioContext)();\n}\nfunction App() {\n const [showHelp, setShowHelp] = useState(false);\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const [showWalletDialog, setShowWalletDialog] = useState(false);\n const {\n publicKey\n } = useWallet();\n const navigate = useNavigate();\n const handleProtectedNavigation = path => {\n if (!publicKey) {\n setShowWalletDialog(true);\n } else {\n navigate(path);\n }\n };\n return

\n \n 🎵 beats.fun\n \n

\n \n Studio\n \n \n \n setShowHelp(true)}>\n \n \n \n

\n setShowHelp(true)}>\n \n \n setMobileMenuOpen(true)}>\n \n \n

\n \n \n {mobileMenuOpen && setMobileMenuOpen(false)}>\n e.stopPropagation()}>\n

;\n}\nfunction LandingPage() {\n const navigate = useNavigate();\n const [mousePosition, setMousePosition] = useState({\n x: 0,\n y: 0\n });\n useEffect(() => {\n const handleMouseMove = e => {\n setMousePosition({\n x: e.clientX,\n y: e.clientY\n });\n };\n window.addEventListener('mousemove', handleMouseMove);\n return () => {\n window.removeEventListener('mousemove', handleMouseMove);\n };\n }, []);\n return

\n {}\n

\n {Array.from({\n length: 40\n }).map((_, i) => )}\n

\n \n {}\n

\n \n

\n \n \n \n 🎵\n \n \n \n \n

\n beats.fun\n

\n \n \n \n

\n Drop beats, layer tracks, and craft bangers right in your browser. \n Then monetize your sonic creations with Solana integration.\n

\n \n \n \n \n navigate('/studio')} className=\"px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 rounded-full font-bold text-lg md:text-xl flex items-center gap-2 transform transition-transform\" whileHover={{\n scale: 1.05\n }} whileTap={{\n scale: 0.98\n }}>\n Start Creating \n \n \n \n \n {}\n

\n \n {Array.from({\n length: 100\n }).map((_, i) => {\n const distFromCenter = Math.abs(i - 50);\n let height = 100 - distFromCenter * 1.8;\n if (mousePosition.x) {\n const mouseFactor = Math.sin(mousePosition.x / window.innerWidth * Math.PI * 2 + i * 0.1) * 20;\n height += mouseFactor;\n }\n height = Math.max(5, Math.min(100, height));\n return ;\n })}\n \n

\n \n {}\n

\n \n

\n How it Works\n

\n \n \n

\n \n

Intuitive Studio

Layer tracks, record audio, and craft your perfect beat with our easy-to-use studio interface.

\n \n \n \n

\n \n

Sample Library

Access a growing collection of high-quality audio samples to instantly elevate your productions.

\n \n \n \n

\n \n

Monetize & Sell

Turn your beats into NFTs and sell them directly through our integrated Solana marketplace.

\n \n

\n \n {}\n

\n \n

\n Ready to create your next hit?\n

\n Join thousands of creators making and selling beats online.\n

\n navigate('/studio')} className=\"px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 rounded-full font-bold text-lg flex items-center justify-center gap-2\" whileHover={{\n scale: 1.05\n }} whileTap={{\n scale: 0.98\n }}>\n Jump Into Studio \n \n \n

\n \n

\n \n {}\n \n

;\n}\nfunction StudioPage() {\n const [tracks, setTracks] = useState([]);\n const [isPlaying, setIsPlaying] = useState(false);\n const [isRecording, setIsRecording] = useState(false);\n const [currentTime, setCurrentTime] = useState(0);\n const [duration, setDuration] = useState(30);\n const [showClipMenu, setShowClipMenu] = useState(false);\n const [showSampleLibrary, setShowSampleLibrary] = useState(false);\n const [selectedClip, setSelectedClip] = useState(null);\n const [selectedTrackIndex, setSelectedTrackIndex] = useState(null);\n const [showExportError, setShowExportError] = useState(false);\n const mediaRecorderRef = useRef(null);\n const audioChunksRef = useRef([]);\n const playheadRef = useRef(null);\n const timelineRef = useRef(null);\n const animationRef = useRef(null);\n const trackNodesRef = useRef([]);\n const sampleLibrary = [{\n name: 'Guitar Purgatory',\n url: 'https://cdn.dev.fun/asset/f901aa5f8c1cb82f8435/guitar-purgatory_e65fc350.mp3',\n type: 'guitar'\n }, {\n name: 'Emotional Guitar',\n url: 'https://cdn.dev.fun/asset/f901aa5f8c1cb82f8435/emotional-guitar_b9555197.mp3',\n type: 'guitar'\n }, {\n name: 'Soft Piano',\n url: 'https://cdn.dev.fun/asset/f901aa5f8c1cb82f8435/soft-piano_181771c8.mp3',\n type: 'piano'\n }, {\n name: 'Piece of Piano',\n url: 'https://cdn.dev.fun/asset/f901aa5f8c1cb82f8435/piece-of-piano_6e8f0384.mp3',\n type: 'piano'\n }, {\n name: 'Amen Break',\n url: 'https://cdn.dev.fun/asset/f901aa5f8c1cb82f8435/amen-break_8600872f.mp3',\n type: 'drums'\n }, {\n name: 'Drum Roll',\n url: 'https://cdn.dev.fun/asset/f901aa5f8c1cb82f8435/drum-roll_568f36f2.mp3',\n type: 'drums'\n }];\n const addTrack = () => {\n setTracks([...tracks, {\n id: Date.now(),\n clips: [],\n volume: 0.8\n }]);\n };\n const handleFileUpload = (e, trackIndex) => {\n const file = e.target.files[0];\n if (!file) return;\n const reader = new FileReader();\n reader.onload = async event => {\n try {\n const arrayBuffer = event.target.result;\n const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);\n const newClip = {\n id: Date.now(),\n buffer: audioBuffer,\n start: 0,\n offset: 0,\n duration: audioBuffer.duration,\n name: file.name\n };\n const updatedTracks = [...tracks];\n updatedTracks[trackIndex].clips.push(newClip);\n setTracks(updatedTracks);\n } catch (error) {\n console.error(\"Error decoding audio data:\", error);\n }\n };\n reader.readAsArrayBuffer(file);\n e.target.value = null;\n };\n const startRecording = async () => {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({\n audio: true\n });\n mediaRecorderRef.current = new MediaRecorder(stream);\n audioChunksRef.current = [];\n mediaRecorderRef.current.ondataavailable = e => {\n if (e.data.size > 0) {\n audioChunksRef.current.push(e.data);\n }\n };\n mediaRecorderRef.current.onstop = async () => {\n const audioBlob = new Blob(audioChunksRef.current, {\n type: 'audio/wav'\n });\n const arrayBuffer = await audioBlob.arrayBuffer();\n const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);\n const newTrack = {\n id: Date.now(),\n clips: [{\n id: Date.now(),\n buffer: audioBuffer,\n start: 0,\n offset: 0,\n duration: audioBuffer.duration,\n name: `Recording ${new Date().toLocaleTimeString()}`\n }],\n volume: 0.8\n };\n setTracks([...tracks, newTrack]);\n stream.getTracks().forEach(track => track.stop());\n };\n mediaRecorderRef.current.start();\n setIsRecording(true);\n } catch (error) {\n console.error(\"Error accessing microphone:\", error);\n }\n };\n const stopRecording = () => {\n if (mediaRecorderRef.current && isRecording) {\n mediaRecorderRef.current.stop();\n setIsRecording(false);\n }\n };\n const startPlayback = () => {\n if (isPlaying) return;\n trackNodesRef.current.forEach(node => {\n if (node) node.disconnect();\n });\n trackNodesRef.current = [];\n const audioBufferMap = new Map();\n tracks.forEach(track => {\n track.clips.forEach(clip => {\n if (clip.buffer) {\n audioBufferMap.set(clip.id, clip.buffer);\n }\n });\n });\n tracks.forEach((track, trackIndex) => {\n track.clips.forEach(clip => {\n if (clip.start <= currentTime && clip.start + clip.duration > currentTime) {\n const buffer = audioBufferMap.get(clip.id) || clip.buffer;\n if (!buffer) {\n console.error(\"Missing audio buffer for clip:\", clip.name);\n return;\n }\n const source = audioContext.createBufferSource();\n source.buffer = buffer;\n const gainNode = audioContext.createGain();\n gainNode.gain.value = track.volume;\n source.connect(gainNode);\n gainNode.connect(audioContext.destination);\n const offset = Math.max(0, currentTime - clip.start + clip.offset);\n const duration = clip.duration - offset;\n source.start(0, offset, duration);\n trackNodesRef.current.push(source);\n }\n });\n });\n setIsPlaying(true);\n const startTime = audioContext.currentTime;\n const startPosition = currentTime;\n const updatePlayhead = () => {\n const elapsedTime = audioContext.currentTime - startTime;\n const newPosition = startPosition + elapsedTime;\n if (newPosition >= duration) {\n setCurrentTime(0);\n setIsPlaying(false);\n trackNodesRef.current.forEach(node => {\n if (node) node.disconnect();\n });\n return;\n }\n setCurrentTime(newPosition);\n animationRef.current = requestAnimationFrame(updatePlayhead);\n };\n animationRef.current = requestAnimationFrame(updatePlayhead);\n };\n const pausePlayback = () => {\n if (!isPlaying) return;\n trackNodesRef.current.forEach(node => {\n if (node) node.disconnect();\n });\n setIsPlaying(false);\n cancelAnimationFrame(animationRef.current);\n };\n const handleTimelineClick = e => {\n if (!timelineRef.current) return;\n const rect = timelineRef.current.getBoundingClientRect();\n const clickPosition = e.clientX - rect.left + timelineContainerRef.current.scrollLeft;\n const scaledWidth = rect.width;\n const newTime = clickPosition / scaledWidth * duration;\n setCurrentTime(Math.max(0, Math.min(newTime, duration)));\n if (isPlaying) {\n pausePlayback();\n setTimeout(() => startPlayback(), 50);\n }\n };\n const handleClipDrag = (trackIndex, clipIndex, newStart, newTrackIndex = null) => {\n const updatedTracks = [...tracks];\n const clip = {\n ...updatedTracks[trackIndex].clips[clipIndex]\n };\n const originalBuffer = clip.buffer;\n newStart = Math.max(0, Math.min(newStart, duration - clip.duration));\n const clipWithUpdatedPosition = {\n ...clip,\n start: newStart,\n buffer: originalBuffer\n };\n if (newTrackIndex !== null && newTrackIndex !== trackIndex) {\n updatedTracks[trackIndex].clips.splice(clipIndex, 1);\n updatedTracks[newTrackIndex].clips.push(clipWithUpdatedPosition);\n } else {\n updatedTracks[trackIndex].clips[clipIndex] = clipWithUpdatedPosition;\n }\n setTracks(updatedTracks);\n if (isPlaying) {\n pausePlayback();\n setTimeout(() => startPlayback(), 50);\n }\n };\n const handleClipClick = (e, trackIndex, clipIndex) => {\n e.stopPropagation();\n handleClipSelect(trackIndex, clipIndex);\n };\n const handleVolumeChange = (trackIndex, volume) => {\n const updatedTracks = [...tracks];\n updatedTracks[trackIndex].volume = volume;\n setTracks(updatedTracks);\n };\n const handleClipSelect = (trackIndex, clipIndex) => {\n setSelectedTrackIndex(trackIndex);\n setSelectedClip(tracks[trackIndex].clips[clipIndex]);\n setShowClipMenu(true);\n };\n const handleClipTrim = (start, end) => {\n if (selectedClip && selectedTrackIndex !== null) {\n const updatedTracks = [...tracks];\n const clipIndex = updatedTracks[selectedTrackIndex].clips.findIndex(c => c.id === selectedClip.id);\n if (clipIndex !== -1) {\n updatedTracks[selectedTrackIndex].clips[clipIndex] = {\n ...selectedClip,\n offset: selectedClip.offset + start,\n duration: end - start\n };\n setTracks(updatedTracks);\n setShowClipMenu(false);\n setSelectedClip(null);\n setSelectedTrackIndex(null);\n }\n }\n };\n const handleDeleteClip = () => {\n if (selectedClip && selectedTrackIndex !== null) {\n const updatedTracks = [...tracks];\n updatedTracks[selectedTrackIndex].clips = updatedTracks[selectedTrackIndex].clips.filter(clip => clip.id !== selectedClip.id);\n setTracks(updatedTracks);\n setShowClipMenu(false);\n setSelectedClip(null);\n setSelectedTrackIndex(null);\n }\n };\n const handleDeleteTrack = trackIndex => {\n if (isPlaying) {\n pausePlayback();\n }\n const updatedTracks = [...tracks];\n updatedTracks.splice(trackIndex, 1);\n setTracks(updatedTracks);\n if (isPlaying) {\n setTimeout(() => startPlayback(), 50);\n }\n };\n const handleSampleSelect = async sample => {\n setShowSampleLibrary(false);\n try {\n const response = await fetch(sample.url);\n const arrayBuffer = await response.arrayBuffer();\n const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);\n const newTrack = {\n id: Date.now(),\n clips: [{\n id: Date.now(),\n buffer: audioBuffer,\n start: 0,\n offset: 0,\n duration: audioBuffer.duration,\n name: sample.name\n }],\n volume: 0.8\n };\n setTracks(prevTracks => [...prevTracks, newTrack]);\n } catch (error) {\n console.error(\"Error loading sample:\", error);\n }\n };\n const writeString = (view, offset, string) => {\n for (let i = 0; i < string.length; i++) {\n view.setUint8(offset + i, string.charCodeAt(i));\n }\n };\n const audioBufferToWav = buffer => {\n const MAX_BUFFER_LENGTH = 10000000;\n let processedBuffer = buffer;\n let downSampleFactor = 1;\n if (buffer.length > MAX_BUFFER_LENGTH) {\n downSampleFactor = Math.ceil(buffer.length / MAX_BUFFER_LENGTH);\n console.log(`Buffer too large, downsampling by factor of ${downSampleFactor}`);\n const newLength = Math.floor(buffer.length / downSampleFactor);\n const offlineCtx = new OfflineAudioContext(buffer.numberOfChannels, newLength, buffer.sampleRate);\n const source = offlineCtx.createBufferSource();\n source.buffer = buffer;\n source.connect(offlineCtx.destination);\n source.start();\n processedBuffer = buffer;\n }\n const numOfChan = processedBuffer.numberOfChannels;\n const length = Math.floor(processedBuffer.length * numOfChan * 2);\n const sampleRate = processedBuffer.sampleRate;\n const wavBuffer = new ArrayBuffer(44 + length);\n const view = new DataView(wavBuffer);\n writeString(view, 0, 'RIFF');\n view.setUint32(4, 36 + length, true);\n writeString(view, 8, 'WAVE');\n writeString(view, 12, 'fmt ');\n view.setUint32(16, 16, true);\n view.setUint16(20, 1, true);\n view.setUint16(22, numOfChan, true);\n view.setUint32(24, sampleRate, true);\n view.setUint32(28, sampleRate * numOfChan * 2, true);\n view.setUint16(32, numOfChan * 2, true);\n view.setUint16(34, 16, true);\n writeString(view, 36, 'data');\n view.setUint32(40, length, true);\n const channels = [];\n for (let i = 0; i < numOfChan; i++) {\n channels.push(processedBuffer.getChannelData(i));\n }\n let offset = 44;\n const bufferLength = processedBuffer.length;\n const CHUNK_SIZE = 1000;\n for (let i = 0; i < bufferLength; i += CHUNK_SIZE) {\n const chunkEnd = Math.min(i + CHUNK_SIZE, bufferLength);\n for (let j = i; j < chunkEnd; j++) {\n for (let c = 0; c < numOfChan; c++) {\n const sample = Math.max(-1, Math.min(1, channels[c][j]));\n const int16 = sample < 0 ? sample * 32768 : sample * 32767;\n view.setInt16(offset, int16, true);\n offset += 2;\n }\n }\n }\n return new Blob([wavBuffer], {\n type: 'audio/wav'\n });\n };\n const handleExport = async () => {\n if (tracks.length === 0 || tracks.every(track => track.clips.length === 0)) {\n alert(\"There's nothing to export. Add some audio clips first!\");\n return;\n }\n try {\n let maxEndTime = 0;\n tracks.forEach(track => {\n track.clips.forEach(clip => {\n const endTime = clip.start + clip.duration;\n if (endTime > maxEndTime) maxEndTime = endTime;\n });\n });\n const MAX_EXPORT_TIME = 5 * 60;\n if (maxEndTime > MAX_EXPORT_TIME) {\n if (!confirm(`Your composition is very long (${Math.round(maxEndTime / 60)} minutes). Would you like to export the first ${MAX_EXPORT_TIME / 60} minutes only?`)) {\n return;\n }\n maxEndTime = MAX_EXPORT_TIME;\n }\n const sampleRate = audioContext.sampleRate;\n const totalSamples = Math.ceil(maxEndTime * sampleRate);\n const MAX_SAMPLES = 20000000;\n let usedSampleRate = sampleRate;\n if (totalSamples > MAX_SAMPLES) {\n usedSampleRate = Math.floor(sampleRate * (MAX_SAMPLES / totalSamples));\n console.log(`Using reduced sample rate: ${usedSampleRate}Hz`);\n }\n const offlineCtx = new OfflineAudioContext(2, Math.ceil(maxEndTime * usedSampleRate), usedSampleRate);\n tracks.forEach(track => {\n track.clips.forEach(clip => {\n if (clip.start < maxEndTime) {\n const source = offlineCtx.createBufferSource();\n source.buffer = clip.buffer;\n const gainNode = offlineCtx.createGain();\n gainNode.gain.value = track.volume;\n source.connect(gainNode);\n gainNode.connect(offlineCtx.destination);\n const adjustedDuration = Math.min(clip.duration, maxEndTime - clip.start);\n source.start(clip.start, clip.offset, adjustedDuration);\n }\n });\n });\n console.log(\"Starting offline rendering...\");\n const renderedBuffer = await offlineCtx.startRendering();\n console.log(\"Rendering complete!\");\n const wavBlob = audioBufferToWav(renderedBuffer);\n const url = URL.createObjectURL(wavBlob);\n const link = document.createElement('a');\n link.href = url;\n link.download = `beats-fun-mix-${Date.now()}.wav`;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n setTimeout(() => {\n URL.revokeObjectURL(url);\n }, 100);\n } catch (err) {\n console.error('Export failed:', err);\n setShowExportError(true);\n }\n };\n useEffect(() => {\n return () => {\n cancelAnimationFrame(animationRef.current);\n trackNodesRef.current.forEach(node => {\n if (node) node.disconnect();\n });\n };\n }, []);\n const [showTimelineModal, setShowTimelineModal] = useState(false);\n const [newDuration, setNewDuration] = useState(\"\");\n const [timelineZoom, setTimelineZoom] = useState(1);\n const [timelineScroll, setTimelineScroll] = useState(0);\n const timelineContainerRef = useRef(null);\n const lastTapTimeRef = useRef(0);\n const getTimeMarkers = () => {\n const markers = [];\n const containerWidth = timelineContainerRef.current?.clientWidth || window.innerWidth * 0.8;\n const visibleDuration = duration / timelineZoom;\n const pixelsPerSecond = containerWidth * timelineZoom / duration;\n const minStep = Math.ceil(60 / pixelsPerSecond);\n let step = 1;\n const totalDuration = duration * timelineZoom;\n if (totalDuration > 120) {\n step = Math.max(minStep, 15);\n } else if (totalDuration > 60) {\n step = Math.max(minStep, 10);\n } else if (totalDuration > 30) {\n step = Math.max(minStep, 5);\n } else {\n step = Math.max(minStep, 1);\n }\n const scrollOffset = timelineScroll / pixelsPerSecond;\n const firstMarkerTime = Math.floor(scrollOffset / step) * step;\n const visibleEndTime = scrollOffset + visibleDuration;\n for (let i = firstMarkerTime; i <= Math.min(duration, visibleEndTime + step); i += step) {\n if (i < 0) continue;\n const minutes = Math.floor(i / 60);\n const seconds = Math.floor(i % 60);\n let label;\n if (minutes > 0) {\n label = seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;\n } else {\n label = `${seconds}s`;\n }\n markers.push({\n time: i,\n label: label\n });\n }\n const endTime = duration;\n if (!markers.some(marker => marker.time === endTime)) {\n const minutes = Math.floor(endTime / 60);\n const seconds = Math.round(endTime % 60);\n let label;\n if (minutes > 0) {\n label = seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;\n } else {\n label = `${seconds}s`;\n }\n markers.push({\n time: endTime,\n label: label\n });\n }\n if (containerWidth < 768 && markers.length > 5) {\n const filteredMarkers = [];\n filteredMarkers.push(markers[0]);\n const step = (markers.length - 2) / 3;\n for (let i = 1; i <= 3; i++) {\n const index = Math.min(Math.floor(i * step) + 1, markers.length - 2);\n filteredMarkers.push(markers[index]);\n }\n filteredMarkers.push(markers[markers.length - 1]);\n return filteredMarkers;\n }\n return markers;\n };\n const handleTimelineScroll = e => {\n if (timelineContainerRef.current) {\n setTimelineScroll(timelineContainerRef.current.scrollLeft);\n }\n };\n const handleTimelineDoubleTap = e => {\n const now = Date.now();\n const timeSinceLastTap = now - lastTapTimeRef.current;\n lastTapTimeRef.current = now;\n if (timeSinceLastTap < 300) {\n e.preventDefault();\n const newZoom = timelineZoom === 1 ? 2.5 : 1;\n setTimelineZoom(newZoom);\n if (newZoom > 1) {\n const container = timelineContainerRef.current;\n if (container) {\n const rect = container.getBoundingClientRect();\n const clickPositionRatio = (e.clientX - rect.left) / rect.width;\n const newScrollPosition = (container.scrollWidth * newZoom - container.clientWidth) * clickPositionRatio;\n setTimeout(() => container.scrollLeft = newScrollPosition, 10);\n }\n } else {\n setTimeout(() => setTimelineScroll(0), 10);\n }\n }\n };\n const handleDurationSubmit = e => {\n e.preventDefault();\n const parsedDuration = parseInt(newDuration);\n if (!isNaN(parsedDuration) && parsedDuration > 0) {\n setDuration(parsedDuration);\n setShowTimelineModal(false);\n setNewDuration(\"\");\n }\n };\n return

Studio

\n {tracks.length > 0 &&

\n \n \n \n \n {isPlaying ? : }\n \n \n \n \n

}\n

\n {getTimeMarkers().map(marker =>

\n {marker.label}\n

)}\n

\n \n {}\n {timelineScroll > 0 &&

}\n {timelineContainerRef.current && timelineContainerRef.current.scrollWidth > timelineContainerRef.current.clientWidth && timelineScroll < timelineContainerRef.current.scrollWidth - timelineContainerRef.current.clientWidth &&

}\n

\n 1 ? 'bg-blue-900/40' : 'bg-gray-800/40'}`} onClick={() => setTimelineZoom(prev => prev === 1 ? 2.5 : 1)}>\n {timelineZoom > 1 ? \n Reset Zoom\n : \n Zoom\n }\n \n {timelineZoom > 1 && Double-tap to toggle zoom}\n

\n setShowTimelineModal(true)}>\n Extend\n \n

\n {tracks.map((track, trackIndex) =>

\n \n handleVolumeChange(trackIndex, parseFloat(e.target.value))} className=\"w-full accent-purple-500\" />\n

\n \n + Add Audio\n handleFileUpload(e, trackIndex)} />\n \n \n

\n {}\n

\n {track.clips.map((clip, clipIndex) => {\n if (clip.buffer) {\n clip._originalBuffer = clip.buffer;\n }\n }} onDragEnd={(_, info) => {\n const parentWidth = timelineRef.current?.clientWidth || 1;\n const delta = info.offset.x / parentWidth * duration;\n const trackElements = document.querySelectorAll('.track-container');\n let targetTrackIndex = trackIndex;\n trackElements.forEach((el, index) => {\n const rect = el.getBoundingClientRect();\n if (info.point.y >= rect.top && info.point.y <= rect.bottom) {\n targetTrackIndex = index;\n }\n });\n if (clip._originalBuffer && !clip.buffer) {\n clip.buffer = clip._originalBuffer;\n }\n handleClipDrag(trackIndex, clipIndex, clip.start + delta, targetTrackIndex);\n }} onClick={e => handleClipClick(e, trackIndex, clipIndex)}>\n

{\n e.stopPropagation();\n handleClipSelect(trackIndex, clipIndex);\n }}>{clip.name}

\n {}\n

\n {Array.from({\n length: 20\n }).map((_, i) =>

)}\n

\n )}\n

)}\n

\n {}\n

\n \n Add New Track\n \n {tracks.length > 0 && <>\n setTracks([])} title=\"Reset All\">\n Reset\n \n setShowSampleLibrary(true)} title=\"Sample Library\">\n Sample Library\n \n }\n

\n \n {showTimelineModal && setShowTimelineModal(false)} title=\"Set Timeline Duration\">\n \n }\n\n {showSampleLibrary && setShowSampleLibrary(false)} title=\"Sample Library\">\n

Click any sample to add it to your track

Guitar Samples

\n {sampleLibrary.filter(s => s.type === 'guitar').map(sample =>

handleSampleSelect(sample)}>\n

\n \n {sample.name}\n

\n \n

)}\n

Piano Samples

\n {sampleLibrary.filter(s => s.type === 'piano').map(sample =>

handleSampleSelect(sample)}>\n

\n \n {sample.name}\n

\n \n

)}\n

Drum Samples

\n {sampleLibrary.filter(s => s.type === 'drums').map(sample =>

handleSampleSelect(sample)}>\n

\n \n {sample.name}\n

\n \n

)}\n

\n }\n \n {}\n \n {showExportError && setShowExportError(false)} title=\"Export Error\">\n

Export failed. Please try again.

\n \n

\n }\n {showClipMenu && selectedClip && setShowClipMenu(false)} title=\"Edit Clip\">\n

{selectedClip.name}

\n {}\n

\n {Array.from({\n length: 40\n }).map((_, i) =>

)}\n

\n Start Trim (seconds)\n {\n const start = parseFloat(e.target.value);\n const end = Math.max(start + 0.1, selectedClip.duration);\n handleClipTrim(start, end);\n }} />\n

\n End Trim (seconds)\n {\n const end = parseFloat(e.target.value);\n const start = 0;\n handleClipTrim(start, end);\n }} />\n

\n \n \n

\n }\n \n

;\n}\nfunction MonetizePage() {\n const {\n publicKey\n } = useWallet();\n const [title, setTitle] = useState('');\n const [description, setDescription] = useState('');\n const [price, setPrice] = useState('0.1');\n const [audioFile, setAudioFile] = useState(null);\n const [isUploading, setIsUploading] = useState(false);\n const [uploadSuccess, setUploadSuccess] = useState(false);\n const [irysAddress, setIrysAddress] = useState('');\n const handleFileChange = e => {\n if (e.target.files && e.target.files[0]) {\n setAudioFile(e.target.files[0]);\n }\n };\n const handleUpload = async () => {\n if (!audioFile || !title || !description || !price) {\n return;\n }\n setIsUploading(true);\n try {\n await new Promise(resolve => setTimeout(resolve, 2000));\n const fakeIrysAddress = `irys-${Math.random().toString(36).substring(2, 10)}`;\n setIrysAddress(fakeIrysAddress);\n setUploadSuccess(true);\n } catch (error) {\n console.error(\"Upload error:\", error);\n } finally {\n setIsUploading(false);\n }\n };\n if (!publicKey) {\n return

👛

Wallet Connection Required

\n You need to connect your Solana wallet to monetize your beats.\n

\n \n

;\n }\n return

\n Monetize Your Beats\n

\n {!uploadSuccess ?

\n Title\n setTitle(e.target.value)} className=\"w-full bg-gray-800 border border-gray-700 rounded-md p-3 text-white\" placeholder=\"My Awesome Beat\" />\n

\n Description\n \n

\n Price (SOL)\n setPrice(e.target.value)} min=\"0.01\" step=\"0.01\" className=\"w-full bg-gray-800 border border-gray-700 rounded-md p-3 text-white\" />\n

\n Upload Audio File\n

\n {audioFile ?

✓ {audioFile.name}

\n \n

Drag & drop your audio file or click to browse

\n \n \n Select File\n \n

}\n

\n \n

Upload Successful!

Your beat is now available for purchase on the market.

Share this Irys Address with potential buyers:

\n {irysAddress}\n \n

\n \n \n Go to Market\n \n

}\n

;\n}\nfunction MarketPage() {\n const {\n publicKey\n } = useWallet();\n const [irysAddress, setIrysAddress] = useState('');\n const [isLoading, setIsLoading] = useState(false);\n const [trackData, setTrackData] = useState(null);\n const [isPurchased, setIsPurchased] = useState(false);\n const handleAddressSubmit = async e => {\n e.preventDefault();\n if (!irysAddress) return;\n setIsLoading(true);\n try {\n await new Promise(resolve => setTimeout(resolve, 1000));\n setTrackData({\n title: `Epic ${Math.random() > 0.5 ? 'Lofi' : 'Trap'} Beat`,\n description: 'A unique beat with deep bass and melodic hooks. Perfect for your next project.',\n creator: '8xH4...' + Math.random().toString(36).substring(2, 8),\n price: (Math.random() * 0.5 + 0.1).toFixed(2)\n });\n } catch (error) {\n console.error(\"Fetch error:\", error);\n } finally {\n setIsLoading(false);\n }\n };\n const handlePurchase = async () => {\n setIsLoading(true);\n try {\n await new Promise(resolve => setTimeout(resolve, 2000));\n setIsPurchased(true);\n } catch (error) {\n console.error(\"Purchase error:\", error);\n } finally {\n setIsLoading(false);\n }\n };\n if (!publicKey) {\n return

👛

Wallet Connection Required

\n You need to connect your Solana wallet to access the marketplace.\n

\n \n

;\n }\n return

\n Beats Marketplace\n

\n \n {trackData &&

\n \n

{trackData.title}

By: {trackData.creator}

{trackData.description}

\n Price:\n {trackData.price} SOL\n

\n {!isPurchased ? :

Purchase Successful!

You now own this beat and can download it.

\n \n

}\n

;\n}\nfunction Modal({\n children,\n onClose,\n title\n}) {\n return \n e.stopPropagation()}>\n

{title}

\n \n

\n {children}\n \n ;\n}\nexport default AppWithProvider;","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"react-router-dom\":\"6.18.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"@solana/wallet-adapter-base\":\"0.9.23\",\"@solana/wallet-adapter-react\":\"0.15.35\",\"@solana/wallet-adapter-react-ui\":\"0.9.35\",\"@solana/wallet-adapter-wallets\":\"0.19.32\",\"@solana/web3.js\":\"1.95.3\",\"@devfunlabs/state-client\":\"0.8.1\",\"@devfunlabs/web-sdk\":\"0.5.5\",\"recharts\":\"2.8.0\",\"zod\":\"3.22.4\",\"react-dom\":\"18.2.0\"}}","appFunctions",[],"token",{"_18":82,"_83":82,"_84":85,"_86":87,"_88":89,"_90":-5,"_91":-5,"_92":93,"_94":95,"_72":73},"buidl","symbol","price",0.002912,"marketcap",1550577,"image","https://pump.mypinata.cloud/ipfs/QmPR3CamxoBQW892uHDT2EGRxFvksiJyrEg1ajZYVqJhnf?img-width=256&img-dpr=2","website","twitter","devCount",321,"appCount",2184,"upstreamApp","isLordOfDev","analytics",[100,104,106,108,110,112,114,116,118,120,122,124,126,128,130,131],{"_101":102,"_103":59},"day","2025-07-12","runCount",{"_101":105,"_103":59},"2025-07-13",{"_101":107,"_103":59},"2025-07-14",{"_101":109,"_103":59},"2025-07-15",{"_101":111,"_103":59},"2025-07-16",{"_101":113,"_103":59},"2025-07-17",{"_101":115,"_103":59},"2025-07-18",{"_101":117,"_103":59},"2025-07-19",{"_101":119,"_103":59},"2025-07-20",{"_101":121,"_103":59},"2025-07-21",{"_101":123,"_103":59},"2025-07-22",{"_101":125,"_103":59},"2025-07-23",{"_101":127,"_103":59},"2025-07-24",{"_101":129,"_103":59},"2025-07-25",{"_101":109,"_103":41},{"_101":111,"_103":41},"snapshot","ogImage","https://cdn.dev.fun/og/image/f901aa5f8c1cb82f8435/1df39aae.webp","isDevbase","actionData","errors"]

Menu

Wallet Connection Required

\n Adding Content\n

\n Recording\n

\n Editing Clips\n

\n Playback\n

\n Exporting\n

\n Sample Library\n

\n Monetizing Beats\n

\n Marketplace\n

\n beats.fun\n

\n How it Works\n

Intuitive Studio

Sample Library

Monetize & Sell

\n Ready to create your next hit?\n

Studio

Click any sample to add it to your track

Guitar Samples

Piano Samples

Drum Samples

{selectedClip.name}

Wallet Connection Required

\n Monetize Your Beats\n

Upload Successful!

Share this Irys Address with potential buyers:

Wallet Connection Required

\n Beats Marketplace\n

{trackData.title}

Purchase Successful!

{title}

say something