[{"_1":2,"_137":-5,"_138":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_135":-5,"_131":-5,"_136":-5},"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,"_55":56,"_57":58,"_59":58,"_60":61,"_62":58,"_63":58,"_64":58,"_65":58,"_66":58,"_67":58,"_68":17,"_69":17,"_70":71,"_72":73,"_74":75,"_76":77,"_78":79,"_97":-5,"_98":17,"_99":100,"_131":31,"_132":133,"_134":17},"id","bf10a7039ce0c95bc68a","isMyApp",false,"name","moodbeatz","description","Dive into a world where your emotions become sonic masterpieces! Moodbeatz analyzes your current vibe and generates custom beats that perfectly match your emotional state, with a sneaky chance of Rick Astley dropping in when you least expect it.","brief","Your feelings transformed into sick beats with a surprise Rick roll when you're feeling too confident!","isLive",true,"isPublic","tags",[29],"💰","cover","https://cdn.dev.fun/snapshot/bf10a7039ce0c95bc68a/74999_5250339c.webp","cdnUrl","https://cdn.dev.fun/app/bf10a7039ce0c95bc68a/74999","createdAt",["D",1749269232069],"updatedAt",["D",1749271877598],"lastCommitId",["B","74999"],"tier",1,"credits",16,{"_14":45,"_46":47,"_48":-5,"_49":47,"_50":51,"_52":-5,"_53":54},"787d92ac-eb70-49de-af83-f4e764652adb","uniqueId","6rgXxp2NbjHXkJEiFcsLVyfrXNVmFnS6BM3jHhyMc2gm","username","solanaWallet","displayName","6rg...2gm","bio","avatar","/avatar.svg","commitCount",5,"forkCount",0,"likeCount","runsCount",28,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","AgYVbX4CueNVrBAXZh84DoFQtZhG6wpi3JgXHyCKpump","code","import { useState, useEffect, useRef } from 'react';\nimport { Play, Pause, RefreshCw, Volume2, VolumeX, Heart, Music, PartyPopper, Smile, Zap, Coffee, Mic, Download, StopCircle } from 'lucide-react';\nexport default function App() {\n const [mood, setMood] = useState('');\n const [isPlaying, setIsPlaying] = useState(false);\n const [muted, setMuted] = useState(false);\n const [rickRolled, setRickRolled] = useState(false);\n const [showTip, setShowTip] = useState(true);\n const [isRecording, setIsRecording] = useState(false);\n const [hasRecording, setHasRecording] = useState(false);\n const [recordedBlob, setRecordedBlob] = useState(null);\n const audioContextRef = useRef(null);\n const gainNodeRef = useRef(null);\n const intervalRef = useRef(null);\n const rickRef = useRef(null);\n const mediaRecorderRef = useRef(null);\n const recordedChunksRef = useRef([]);\n const streamRef = useRef(null);\n const moods = [{\n id: 'drake',\n name: 'Drake Vibe',\n icon: ,\n color: 'bg-gradient-to-r from-yellow-400 to-yellow-200',\n tempo: 80,\n kickPattern: [1, 0, 0, 0, 1, 0, 0, 0],\n snarePattern: [0, 0, 1, 0, 0, 0, 1, 1],\n hihatPattern: [1, 1, 1, 1, 1, 1, 1, 1],\n hihatAccentPattern: [2, 0, 1, 0, 2, 0, 1, 3],\n bassPattern: [1, 0, 0, 1, 0, 0, 1, 0],\n bassNotes: [36, 36, 36, 36, 38, 38, 36, 36],\n is808: true\n }, {\n id: 'youngboy',\n name: 'YoungBoy',\n icon: ,\n color: 'bg-gradient-to-r from-blue-500 to-green-400',\n tempo: 70,\n kickPattern: [1, 0, 0, 1, 1, 0, 0, 0],\n snarePattern: [0, 0, 1, 0, 0, 0, 1, 0],\n hihatPattern: [1, 1, 1, 1, 1, 1, 1, 1],\n hihatAccentPattern: [2, 1, 0, 3, 1, 0, 2, 3],\n bassPattern: [1, 0, 0, 0, 1, 0, 1, 0],\n bassNotes: [32, 32, 32, 32, 34, 32, 36, 32],\n is808: true\n }, {\n id: 'trap',\n name: 'Trap Beat',\n icon: ,\n color: 'bg-gradient-to-r from-red-400 to-orange-300',\n tempo: 140,\n kickPattern: [1, 0, 0, 1, 1, 0, 0, 1],\n snarePattern: [0, 0, 1, 0, 0, 0, 1, 0],\n hihatPattern: [1, 1, 1, 1, 1, 1, 1, 1],\n hihatAccentPattern: [1, 0, 2, 1, 0, 3, 2, 1],\n bassPattern: [1, 0, 0, 1, 0, 1, 0, 1],\n bassNotes: [36, 36, 36, 36, 38, 38, 40, 38],\n is808: true\n }, {\n id: 'lofi',\n name: 'Lo-Fi',\n icon: ,\n color: 'bg-gradient-to-r from-purple-400 to-purple-200',\n tempo: 85,\n kickPattern: [1, 0, 0, 0, 1, 0, 0, 0],\n snarePattern: [0, 0, 1, 0, 0, 0, 1, 0],\n hihatPattern: [0, 1, 0, 1, 0, 1, 0, 1],\n hihatAccentPattern: [0, 1, 0, 1, 0, 1, 0, 1],\n bassPattern: [1, 0, 0, 0, 1, 0, 0, 0],\n bassNotes: [36, 36, 36, 36, 38, 38, 36, 36],\n is808: false\n }, {\n id: 'melodic',\n name: 'Melodic',\n icon: ,\n color: 'bg-gradient-to-r from-pink-400 to-pink-200',\n tempo: 90,\n kickPattern: [1, 0, 0, 0, 1, 0, 0, 0],\n snarePattern: [0, 0, 1, 0, 0, 0, 1, 0],\n hihatPattern: [1, 0, 1, 0, 1, 0, 1, 0],\n hihatAccentPattern: [1, 0, 2, 0, 1, 0, 2, 0],\n bassPattern: [1, 0, 0, 0, 1, 0, 0, 0],\n bassNotes: [34, 34, 34, 34, 36, 36, 34, 34],\n is808: true\n }, {\n id: 'party',\n name: 'Club',\n icon: ,\n color: 'bg-gradient-to-r from-green-400 to-green-200',\n tempo: 100,\n kickPattern: [1, 0, 0, 1, 1, 0, 0, 0],\n snarePattern: [0, 0, 1, 0, 0, 0, 1, 1],\n hihatPattern: [1, 1, 1, 1, 1, 1, 1, 1],\n hihatAccentPattern: [2, 1, 1, 0, 2, 1, 1, 3],\n bassPattern: [1, 0, 1, 0, 1, 0, 1, 0],\n bassNotes: [36, 36, 38, 38, 36, 36, 40, 38],\n is808: true\n }];\n useEffect(() => {\n rickRef.current = new Audio('https://upload.wikimedia.org/wikipedia/en/3/3b/Rickrolling_video_clip.ogg');\n rickRef.current.volume = 0.7;\n return () => {\n if (audioContextRef.current) {\n audioContextRef.current.close();\n }\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n }\n if (rickRef.current) {\n rickRef.current.pause();\n }\n if (streamRef.current) {\n const tracks = streamRef.current.getTracks();\n tracks.forEach(track => track.stop());\n }\n };\n }, []);\n const initAudio = () => {\n if (!audioContextRef.current) {\n audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)();\n gainNodeRef.current = audioContextRef.current.createGain();\n gainNodeRef.current.connect(audioContextRef.current.destination);\n }\n };\n const createKickSound = () => {\n if (!audioContextRef.current) return;\n const oscillator = audioContextRef.current.createOscillator();\n const gainNode = audioContextRef.current.createGain();\n oscillator.type = 'sine';\n oscillator.frequency.setValueAtTime(150, audioContextRef.current.currentTime);\n oscillator.frequency.exponentialRampToValueAtTime(0.01, audioContextRef.current.currentTime + 0.3);\n gainNode.gain.setValueAtTime(1, audioContextRef.current.currentTime);\n gainNode.gain.exponentialRampToValueAtTime(0.001, audioContextRef.current.currentTime + 0.3);\n oscillator.connect(gainNode);\n gainNode.connect(gainNodeRef.current);\n oscillator.start();\n oscillator.stop(audioContextRef.current.currentTime + 0.3);\n };\n const createSnareSound = () => {\n if (!audioContextRef.current) return;\n const noise = audioContextRef.current.createBufferSource();\n const noiseBuffer = audioContextRef.current.createBuffer(1, audioContextRef.current.sampleRate * 0.2, audioContextRef.current.sampleRate);\n const output = noiseBuffer.getChannelData(0);\n for (let i = 0; i < noiseBuffer.length; i++) {\n output[i] = Math.random() * 2 - 1;\n }\n noise.buffer = noiseBuffer;\n const noiseGain = audioContextRef.current.createGain();\n noiseGain.gain.setValueAtTime(0.7, audioContextRef.current.currentTime);\n noiseGain.gain.exponentialRampToValueAtTime(0.01, audioContextRef.current.currentTime + 0.2);\n const hpFilter = audioContextRef.current.createBiquadFilter();\n hpFilter.type = 'highpass';\n hpFilter.frequency.value = 2000;\n const peakFilter = audioContextRef.current.createBiquadFilter();\n peakFilter.type = 'peaking';\n peakFilter.frequency.value = 3500;\n peakFilter.gain.value = 15;\n peakFilter.Q.value = 2;\n noise.connect(hpFilter);\n hpFilter.connect(peakFilter);\n peakFilter.connect(noiseGain);\n noiseGain.connect(gainNodeRef.current);\n noise.start();\n noise.stop(audioContextRef.current.currentTime + 0.2);\n const oscillator = audioContextRef.current.createOscillator();\n const oscGain = audioContextRef.current.createGain();\n oscillator.type = 'sine';\n oscillator.frequency.value = 150;\n oscillator.frequency.setValueAtTime(200, audioContextRef.current.currentTime);\n oscillator.frequency.exponentialRampToValueAtTime(150, audioContextRef.current.currentTime + 0.03);\n oscGain.gain.setValueAtTime(0.7, audioContextRef.current.currentTime);\n oscGain.gain.exponentialRampToValueAtTime(0.01, audioContextRef.current.currentTime + 0.15);\n oscillator.connect(oscGain);\n oscGain.connect(gainNodeRef.current);\n oscillator.start();\n oscillator.stop(audioContextRef.current.currentTime + 0.15);\n };\n const createHiHatSound = (accentLevel = 1) => {\n if (!audioContextRef.current) return;\n const noise = audioContextRef.current.createBufferSource();\n const noiseBuffer = audioContextRef.current.createBuffer(1, audioContextRef.current.sampleRate * 0.1, audioContextRef.current.sampleRate);\n const output = noiseBuffer.getChannelData(0);\n for (let i = 0; i < noiseBuffer.length; i++) {\n output[i] = Math.random() * 2 - 1;\n }\n noise.buffer = noiseBuffer;\n const noiseGain = audioContextRef.current.createGain();\n const accentGain = Math.min(0.2 + accentLevel * 0.15, 0.7);\n const accentDecay = Math.max(0.05, 0.12 - accentLevel * 0.03);\n noiseGain.gain.setValueAtTime(accentGain, audioContextRef.current.currentTime);\n noiseGain.gain.exponentialRampToValueAtTime(0.01, audioContextRef.current.currentTime + accentDecay);\n const hpFilter = audioContextRef.current.createBiquadFilter();\n hpFilter.type = 'highpass';\n hpFilter.frequency.value = 7000;\n const bpFilter = audioContextRef.current.createBiquadFilter();\n bpFilter.type = 'bandpass';\n bpFilter.frequency.value = 10000;\n bpFilter.Q.value = 8;\n if (accentLevel === 3) {\n hpFilter.frequency.setValueAtTime(9000, audioContextRef.current.currentTime);\n hpFilter.frequency.exponentialRampToValueAtTime(7000, audioContextRef.current.currentTime + 0.05);\n }\n noise.connect(hpFilter);\n hpFilter.connect(bpFilter);\n bpFilter.connect(noiseGain);\n noiseGain.connect(gainNodeRef.current);\n noise.start();\n noise.stop(audioContextRef.current.currentTime + accentDecay + 0.05);\n };\n const create808Bass = note => {\n if (!audioContextRef.current) return;\n const oscillator = audioContextRef.current.createOscillator();\n const gainNode = audioContextRef.current.createGain();\n const frequency = 440 * Math.pow(2, (note - 69) / 12);\n oscillator.type = 'sine';\n oscillator.frequency.value = frequency;\n oscillator.frequency.setValueAtTime(frequency * 1.5, audioContextRef.current.currentTime);\n oscillator.frequency.exponentialRampToValueAtTime(frequency, audioContextRef.current.currentTime + 0.1);\n const distortion = audioContextRef.current.createWaveShaper();\n function makeDistortionCurve(amount) {\n const k = typeof amount === 'number' ? amount : 50;\n const n_samples = 44100;\n const curve = new Float32Array(n_samples);\n const deg = Math.PI / 180;\n for (let i = 0; i < n_samples; ++i) {\n const x = i * 2 / n_samples - 1;\n curve[i] = (3 + k) * x * 20 * deg / (Math.PI + k * Math.abs(x));\n }\n return curve;\n }\n distortion.curve = makeDistortionCurve(20);\n gainNode.gain.setValueAtTime(0.9, audioContextRef.current.currentTime);\n gainNode.gain.exponentialRampToValueAtTime(0.001, audioContextRef.current.currentTime + 0.8);\n const filter = audioContextRef.current.createBiquadFilter();\n filter.type = 'lowpass';\n filter.frequency.value = 800;\n filter.Q.value = 4;\n oscillator.connect(distortion);\n distortion.connect(filter);\n filter.connect(gainNode);\n gainNode.connect(gainNodeRef.current);\n oscillator.start();\n oscillator.stop(audioContextRef.current.currentTime + 0.8);\n };\n const createBassSound = (note, is808 = false) => {\n if (is808) {\n create808Bass(note);\n } else {\n if (!audioContextRef.current) return;\n const oscillator = audioContextRef.current.createOscillator();\n const gainNode = audioContextRef.current.createGain();\n const frequency = 440 * Math.pow(2, (note - 69) / 12);\n oscillator.type = 'triangle';\n oscillator.frequency.value = frequency;\n const filter = audioContextRef.current.createBiquadFilter();\n filter.type = 'lowpass';\n filter.frequency.value = 1000;\n filter.Q.value = 8;\n gainNode.gain.setValueAtTime(0.8, audioContextRef.current.currentTime);\n gainNode.gain.exponentialRampToValueAtTime(0.001, audioContextRef.current.currentTime + 0.4);\n oscillator.connect(filter);\n filter.connect(gainNode);\n gainNode.connect(gainNodeRef.current);\n oscillator.start();\n oscillator.stop(audioContextRef.current.currentTime + 0.4);\n }\n };\n const playBeat = () => {\n if (!mood) return;\n initAudio();\n const selectedMood = moods.find(m => m.id === mood);\n const tempo = selectedMood.tempo;\n const kickPattern = selectedMood.kickPattern;\n const snarePattern = selectedMood.snarePattern;\n const hihatPattern = selectedMood.hihatPattern;\n const hihatAccentPattern = selectedMood.hihatAccentPattern || [1, 1, 1, 1, 1, 1, 1, 1];\n const bassPattern = selectedMood.bassPattern;\n const bassNotes = selectedMood.bassNotes;\n const is808 = selectedMood.is808 || false;\n let step = 0;\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n }\n const shouldRickRoll = Math.random() < 0.1;\n if (shouldRickRoll) {\n setRickRolled(true);\n if (rickRef.current) {\n rickRef.current.currentTime = 0;\n rickRef.current.play();\n }\n setTimeout(() => {\n setRickRolled(false);\n if (rickRef.current) {\n rickRef.current.pause();\n }\n }, 8000);\n } else {\n setRickRolled(false);\n const intervalTime = 60 / tempo * 1000 / 2;\n intervalRef.current = setInterval(() => {\n const currentStep = step % 8;\n if (kickPattern[currentStep]) {\n createKickSound();\n }\n if (snarePattern[currentStep]) {\n createSnareSound();\n }\n if (hihatPattern[currentStep]) {\n const accentLevel = hihatAccentPattern[currentStep] || 1;\n createHiHatSound(accentLevel);\n }\n if (bassPattern[currentStep]) {\n createBassSound(bassNotes[currentStep], is808);\n }\n step++;\n }, intervalTime);\n }\n setIsPlaying(true);\n };\n const startRecording = async () => {\n if (!isPlaying) return;\n try {\n const stream = await navigator.mediaDevices.getUserMedia({\n audio: true\n });\n streamRef.current = stream;\n const mediaRecorder = new MediaRecorder(stream);\n mediaRecorderRef.current = mediaRecorder;\n mediaRecorder.ondataavailable = event => {\n if (event.data.size > 0) {\n recordedChunksRef.current.push(event.data);\n }\n };\n mediaRecorder.onstop = () => {\n const blob = new Blob(recordedChunksRef.current, {\n type: 'audio/webm'\n });\n setRecordedBlob(blob);\n setHasRecording(true);\n recordedChunksRef.current = [];\n };\n recordedChunksRef.current = [];\n mediaRecorder.start();\n setIsRecording(true);\n } catch (error) {\n console.error(\"Error accessing microphone:\", error);\n alert(\"Unable to access your microphone. Please check your permissions.\");\n }\n };\n const stopRecording = () => {\n if (mediaRecorderRef.current && isRecording) {\n mediaRecorderRef.current.stop();\n setIsRecording(false);\n if (streamRef.current) {\n const tracks = streamRef.current.getTracks();\n tracks.forEach(track => track.stop());\n }\n }\n };\n const playRecording = () => {\n if (recordedBlob && hasRecording) {\n const url = URL.createObjectURL(recordedBlob);\n const audio = new Audio(url);\n audio.play();\n }\n };\n const [mixSettings, setMixSettings] = useState({\n vocalVolume: 100,\n beatVolume: 100,\n vocalReverb: 20,\n vocalCompression: 30,\n masterVolume: 100\n });\n const [showMixPanel, setShowMixPanel] = useState(false);\n const [processedBlob, setProcessedBlob] = useState(null);\n const [isProcessing, setIsProcessing] = useState(false);\n const mixAndMasterRecording = async () => {\n if (!recordedBlob || !hasRecording) return;\n setIsProcessing(true);\n setTimeout(() => {\n setProcessedBlob(recordedBlob);\n setIsProcessing(false);\n }, 2000);\n };\n const downloadRecording = () => {\n const blobToUse = processedBlob || recordedBlob;\n if (blobToUse && hasRecording) {\n const url = URL.createObjectURL(blobToUse);\n const a = document.createElement('a');\n a.style.display = 'none';\n a.href = url;\n a.download = `moodbeatz_${mood}_${processedBlob ? 'mastered' : 'raw'}.webm`;\n document.body.appendChild(a);\n a.click();\n window.URL.revokeObjectURL(url);\n document.body.removeChild(a);\n }\n };\n const handleMixSettingChange = (setting, value) => {\n setMixSettings(prev => ({\n ...prev,\n [setting]: value\n }));\n };\n const stopBeat = () => {\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n }\n if (rickRef.current) {\n rickRef.current.pause();\n }\n if (isRecording) {\n stopRecording();\n }\n setIsPlaying(false);\n setRickRolled(false);\n };\n const toggleMute = () => {\n if (gainNodeRef.current) {\n gainNodeRef.current.gain.value = muted ? 1 : 0;\n }\n if (rickRef.current) {\n rickRef.current.muted = !muted;\n }\n setMuted(!muted);\n };\n const handleMoodSelect = moodId => {\n setMood(moodId);\n if (isPlaying) {\n stopBeat();\n setTimeout(() => {\n playBeat();\n }, 100);\n }\n };\n return

\n {}\n

\n \n MoodBeatz\n

\n Turn your emotions into rhythm! Select your mood and let the beats flow.\n

\n \n {}\n

\n {}\n

How are you feeling today?

\n {moods.map(moodOption => )}\n

\n \n {}\n

\n {}\n {rickRolled &&

\n $\"Rick$ \n

You've been Rick Rolled!

}\n \n {}\n

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

) :

Select a mood to visualize your beats

}\n

\n \n {}\n

\n \n \n \n \n \n

\n \n {isPlaying && mood &&

Record your vocals

\n {!isRecording ? : }\n

\n \n {hasRecording &&

Recording saved!

\n \n \n \n

\n \n {showMixPanel &&

Mix & Master Console

\n \n

\n Vocal Volume\n handleMixSettingChange('vocalVolume', parseInt(e.target.value))} className=\"w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer\" />\n

{mixSettings.vocalVolume}%

\n \n

\n Beat Volume\n handleMixSettingChange('beatVolume', parseInt(e.target.value))} className=\"w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer\" />\n

{mixSettings.beatVolume}%

\n \n

\n Vocal Reverb\n handleMixSettingChange('vocalReverb', parseInt(e.target.value))} className=\"w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer\" />\n

{mixSettings.vocalReverb}%

\n \n

\n Vocal Compression\n handleMixSettingChange('vocalCompression', parseInt(e.target.value))} className=\"w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer\" />\n

{mixSettings.vocalCompression}%

\n \n

\n Master Volume\n handleMixSettingChange('masterVolume', parseInt(e.target.value))} className=\"w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer\" />\n

{mixSettings.masterVolume}%

\n \n

}\n

}\n \n {mood && showTip &&

Tip: Keep playing for a surprise! 🎵

\n \n

}\n

\n \n

;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"lucide-react\":\"0.441.0\",\"framer-motion\":\"10.16.4\",\"@devfunlabs/web-sdk\":\"0.5.5\"}}","appFunctions",[],"token",{"_18":80,"_81":82,"_83":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_70":71},"vibecode.fun","symbol","rick","price",0.000125,"marketcap",124456.227,"image","https://pump.mypinata.cloud/ipfs/QmdiVAhd3kBiCNCc559HT5hQGeoP742a9BGML1qod45c8j?img-width=256&img-dpr=2","website","https://dev.fun/p/93870176b0b04c03015d","twitter","https://x.com/crabbylions/status/1898018929869832580?s=46","devCount",66,"appCount",96,"upstreamApp","isLordOfDev","analytics",[101,105,107,109,111,113,115,117,119,121,123,125,127,129],{"_102":103,"_104":58},"day","2025-07-12","runCount",{"_102":106,"_104":58},"2025-07-13",{"_102":108,"_104":58},"2025-07-14",{"_102":110,"_104":58},"2025-07-15",{"_102":112,"_104":58},"2025-07-16",{"_102":114,"_104":58},"2025-07-17",{"_102":116,"_104":58},"2025-07-18",{"_102":118,"_104":58},"2025-07-19",{"_102":120,"_104":58},"2025-07-20",{"_102":122,"_104":58},"2025-07-21",{"_102":124,"_104":58},"2025-07-22",{"_102":126,"_104":58},"2025-07-23",{"_102":128,"_104":58},"2025-07-24",{"_102":130,"_104":58},"2025-07-25","snapshot","ogImage","https://cdn.dev.fun/og/image/bf10a7039ce0c95bc68a/29592531.webp","isDevbase","commitDetail","livestream","actionData","errors"]