[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_222":223,"_224":225},"routes/_app.x.$handle.$name",{"_95":94,"_31":44,"_103":85,"_26":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":24,"_118":119,"_120":57,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",8,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/index.js","latestPath","fileId","41015168-a477-11f0-90d4-0224a6c84d84","name","index.js","fileType","script","content","class AudioSearchApp {\n constructor() {\n this.currentAudio = null;\n this.isPlaying = false;\n this.progressInterval = null;\n \n this.initializeElements();\n this.bindEvents();\n }\n \n initializeElements() {\n this.searchForm = document.getElementById('searchForm');\n this.searchInput = document.getElementById('searchInput');\n this.searchButton = document.getElementById('searchButton');\n this.loading = document.getElementById('loading');\n this.error = document.getElementById('error');\n this.errorMessage = document.getElementById('errorMessage');\n this.audioPlayer = document.getElementById('audioPlayer');\n this.audioElement = document.getElementById('audioElement');\n this.soundName = document.getElementById('soundName');\n this.soundUsername = document.getElementById('soundUsername');\n this.soundDuration = document.getElementById('soundDuration');\n this.playPauseButton = document.getElementById('playPauseButton');\n this.stopButton = document.getElementById('stopButton');\n this.progressBar = document.getElementById('progressBar');\n }\n \n bindEvents() {\n this.searchForm.addEventListener('submit', (e) => this.handleSearch(e));\n this.playPauseButton.addEventListener('click', () => this.togglePlayPause());\n this.stopButton.addEventListener('click', () => this.stopAudio());\n \n // Audio element events\n this.audioElement.addEventListener('loadstart', () => this.showLoading());\n this.audioElement.addEventListener('canplay', () => this.hideLoading());\n this.audioElement.addEventListener('play', () => this.onPlay());\n this.audioElement.addEventListener('pause', () => this.onPause());\n this.audioElement.addEventListener('ended', () => this.onEnded());\n this.audioElement.addEventListener('error', (e) => this.onAudioError(e));\n this.audioElement.addEventListener('timeupdate', () => this.updateProgress());\n }\n \n async handleSearch(e) {\n e.preventDefault();\n \n const query = this.searchInput.value.trim();\n if (!query) return;\n \n this.showLoading();\n this.hideError();\n this.stopAudio();\n \n try {\n const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);\n const data = await response.json();\n \n if (!response.ok) {\n throw new Error(data.error || 'Search failed');\n }\n \n this.loadAudio(data);\n \n } catch (error) {\n console.error('Search error:', error);\n this.showError(error.message || 'Failed to search for audio');\n } finally {\n this.hideLoading();\n }\n }\n \n loadAudio(soundData) {\n // Stop current audio if playing\n this.stopAudio();\n \n // Update UI with sound info\n this.soundName.textContent = soundData.name;\n this.soundUsername.textContent = soundData.username;\n this.soundDuration.textContent = soundData.duration.toFixed(1);\n \n // Load new audio\n this.audioElement.src = soundData.previewUrl;\n this.audioElement.load();\n \n // Show player\n this.audioPlayer.classList.remove('hidden');\n \n // Auto-play the audio\n this.audioElement.play().catch(error => {\n console.error('Auto-play failed:', error);\n this.showError('Auto-play failed. Please click play to start audio.');\n });\n }\n \n togglePlayPause() {\n if (this.isPlaying) {\n this.audioElement.pause();\n } else {\n this.audioElement.play().catch(error => {\n console.error('Play failed:', error);\n this.showError('Failed to play audio');\n });\n }\n }\n \n stopAudio() {\n if (this.audioElement.src) {\n this.audioElement.pause();\n this.audioElement.currentTime = 0;\n }\n this.clearProgressInterval();\n this.progressBar.style.width = '0%';\n }\n \n onPlay() {\n this.isPlaying = true;\n this.playPauseButton.textContent = '⏸️ Pause';\n this.startProgressInterval();\n }\n \n onPause() {\n this.isPlaying = false;\n this.playPauseButton.textContent = '▶️ Play';\n this.clearProgressInterval();\n }\n \n onEnded() {\n // Audio will loop automatically due to the 'loop' attribute\n // This is just for any additional handling if needed\n }\n \n onAudioError(e) {\n console.error('Audio error:', e);\n this.showError('Failed to load or play audio');\n this.hideLoading();\n }\n \n startProgressInterval() {\n this.clearProgressInterval();\n this.progressInterval = setInterval(() => this.updateProgress(), 100);\n }\n \n clearProgressInterval() {\n if (this.progressInterval) {\n clearInterval(this.progressInterval);\n this.progressInterval = null;\n }\n }\n \n updateProgress() {\n if (this.audioElement.duration && this.audioElement.currentTime) {\n const progress = (this.audioElement.currentTime / this.audioElement.duration) * 100;\n this.progressBar.style.width = `${progress}%`;\n }\n }\n \n showLoading() {\n this.loading.classList.remove('hidden');\n this.searchButton.disabled = true;\n this.searchButton.textContent = 'Searching...';\n }\n \n hideLoading() {\n this.loading.classList.add('hidden');\n this.searchButton.disabled = false;\n this.searchButton.textContent = 'Search';\n }\n \n showError(message) {\n this.errorMessage.textContent = message;\n this.error.classList.remove('hidden');\n }\n \n hideError() {\n this.error.classList.add('hidden');\n }\n}\n\n// Initialize the app when the DOM is loaded\ndocument.addEventListener('DOMContentLoaded', () => {\n new AudioSearchApp();\n});","createdAt",["D",1759949254706],"branchVersion","branchId","aa676c1a-a476-11f0-bbb2-0224a6c84d84","id","aa66fdc0-a476-11f0-bbb2-0224a6c84d84","text-to-ambience",["D",1759949002040],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","dbe13bc0-4230-11f0-95cd-ab37681351fa","pinnedFileId","aa6a5c2c-a476-11f0-bbb2-0224a6c84d84","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","9c125825-8df1-4029-a26d-29049e9bd5a3","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},"branch",{"_13":84,"_31":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"isOwned",10,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","jubertioai","handle","displayName","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/61901958-12bd-49a3-43e9-2f67f1617200/square512?exp=1789592399&sig=f386e561535dbacca4389d8319c93df1b17a9be3d6f6a10550133d5f3c64fab5","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":218,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":219,"_79":220,"_81":221,"_83":24},"tree",[171,173,177,178],"files",[171,172,173,174,175,176,177,178],"counts",{"_160":61,"_161":162,"_163":61,"_164":165,"_166":167},"contents",[125,126,127,128],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":154,"_31":155,"_29":156,"_131":-5,"_40":41,"_39":157,"_133":57,"_37":158,"_13":61,"_33":152,"_35":-5,"_23":24,"_138":-5,"_26":159},{"_42":147,"_31":148,"_29":149,"_131":-5,"_40":41,"_39":150,"_133":57,"_37":151,"_13":61,"_33":152,"_35":-5,"_23":24,"_138":-5,"_26":153},{"_42":140,"_31":141,"_29":142,"_131":-5,"_40":41,"_39":143,"_133":24,"_37":144,"_13":61,"_33":20,"_35":145,"_23":24,"_138":-5,"_26":146},{"_42":129,"_31":130,"_29":55,"_131":-5,"_40":41,"_39":132,"_133":24,"_37":134,"_13":135,"_33":136,"_35":137,"_23":24,"_138":-5,"_26":139},"c447f848-a476-11f0-940c-0224a6c84d84","main.ts","parentId",3,"latest",["D",1759949045413],2,"http","// Learn more: https://docs.val.town/vals/http/\nexport default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}","label",[130],"202977a4-a477-11f0-b107-0224a6c84d84","README.md","20297880-a477-11f0-b107-0224a6c84d84",4,["D",1759949199603],"# Freesound Audio Search\n\nA simple web application that allows users to search for audio files using the Freesound API and play them in a loop.\n\n## Features\n\n- Simple Google-like search interface\n- Server-side Freesound API integration\n- High-quality audio preview playback\n- Automatic looping\n- Replace previous audio with new search results\n\n## Structure\n\n- `backend/index.ts` - Main Hono server with API routes\n- `frontend/index.html` - Main HTML interface\n- `frontend/index.js` - Client-side JavaScript for audio playback\n- `frontend/style.css` - Styling\n\n## API Endpoints\n\n- `GET /` - Serves the main HTML interface\n- `GET /api/search?q={query}` - Search for audio files and return playback URL\n\n## Setup\n\nThe application uses the Freesound API. You'll need to set the `FREESOUND_API_KEY` environment variable with your Freesound API key.\n\nGet your API key from: https://freesound.org/apiv2/apply/",[141],"314bce24-a477-11f0-9d9b-0224a6c84d84","frontend","307c435b-1d27-4963-976b-aad544e415b5",6,["D",1759949228350],"directory",[148],"27f7cdd2-a477-11f0-a5f5-0224a6c84d84","backend","1b8ce10b-1156-46d4-9dd6-b24844123787",5,["D",1759949212686],[155],"pulls","branches",1,"forks","envVars",{"_168":162,"_170":61},"connections",{"_168":61,"_169":61},"count","unfilledCount","emptyCount",{"_42":154,"_31":155,"_29":156,"_131":-5,"_40":41,"_39":157,"_133":57,"_37":215,"_13":61,"_33":152,"_35":-5,"_23":24,"_138":-5,"_180":216,"_26":217},{"_42":208,"_31":209,"_29":210,"_131":156,"_40":41,"_39":157,"_133":57,"_37":211,"_13":61,"_33":34,"_35":212,"_23":24,"_138":-5,"_180":213,"_26":214},{"_42":147,"_31":148,"_29":149,"_131":-5,"_40":41,"_39":150,"_133":57,"_37":205,"_13":61,"_33":152,"_35":-5,"_23":24,"_138":-5,"_180":206,"_26":207},{"_42":198,"_31":199,"_29":200,"_131":149,"_40":41,"_39":150,"_133":57,"_37":201,"_13":61,"_33":20,"_35":202,"_23":24,"_138":-5,"_180":203,"_26":204},{"_42":194,"_31":32,"_29":30,"_131":149,"_40":41,"_39":14,"_133":57,"_37":195,"_13":61,"_33":34,"_35":36,"_23":24,"_138":-5,"_180":196,"_26":197},{"_42":186,"_31":187,"_29":188,"_131":149,"_40":41,"_39":189,"_133":57,"_37":190,"_13":61,"_33":20,"_35":191,"_23":24,"_138":-5,"_180":192,"_26":193},{"_42":140,"_31":141,"_29":142,"_131":-5,"_40":41,"_39":143,"_133":24,"_37":183,"_13":61,"_33":20,"_35":145,"_23":24,"_138":-5,"_180":184,"_26":185},{"_42":129,"_31":130,"_29":55,"_131":-5,"_40":41,"_39":132,"_133":24,"_37":179,"_13":135,"_33":136,"_35":137,"_23":24,"_138":-5,"_180":181,"_26":182},["D",1759949045413],"children",[],[130],["D",1759949199603],[],[141],"351111ae-a477-11f0-b66e-0224a6c84d84","style.css","35111294-a477-11f0-b66e-0224a6c84d84",7,["D",1759949234676],"/* Additional custom styles */\n.animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: .5;\n }\n}\n\n/* Focus styles for better accessibility */\ninput:focus, button:focus {\n outline: none;\n}\n\n/* Smooth transitions */\n* {\n transition: all 0.2s ease-in-out;\n}\n\n/* Custom scrollbar for webkit browsers */\n::-webkit-scrollbar {\n width: 8px;\n}\n\n::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n}\n\n::-webkit-scrollbar-thumb {\n background: #c1c1c1;\n border-radius: 4px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: #a8a8a8;\n}",[],[148,187],"410150b4-a477-11f0-90d4-0224a6c84d84",["D",1759949254706],[],[148,32],"314bba2e-a477-11f0-9d9b-0224a6c84d84","index.html","314bbb28-a477-11f0-9d9b-0224a6c84d84",["D",1759949228350],"\n\n\n \n \n Freesound Audio Search\n \n \n \n\n\n

\n \n

🔊 Freesound Search

Search and play audio samples from Freesound

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

Searching...

\n\n \n

\n \n

\n\n \n

Duration: s

\n \n \n

\n\n \n

Enter a search term and press Search to find and play audio samples.

Audio will loop automatically. New searches will replace the current audio.

\n\n \n\n",[],[148,199],["D",1759949228350],[174,175,176],[148],"27f7bc52-a477-11f0-a5f5-0224a6c84d84","index.ts","27f7bcf2-a477-11f0-a5f5-0224a6c84d84",["D",1759949212686],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main page\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Search API endpoint\napp.get(\"/api/search\", async c => {\n const query = c.req.query(\"q\");\n \n if (!query) {\n return c.json({ error: \"Query parameter 'q' is required\" }, 400);\n }\n\n const apiKey = Deno.env.get(\"FREESOUND_API_KEY\");\n if (!apiKey) {\n return c.json({ error: \"Freesound API key not configured\" }, 500);\n }\n\n try {\n // Search for sounds\n const searchUrl = `https://freesound.org/apiv2/search/text/?query=${encodeURIComponent(query)}&token=${apiKey}&fields=id,name,username,duration&page_size=1`;\n const searchResponse = await fetch(searchUrl);\n \n if (!searchResponse.ok) {\n throw new Error(`Search failed: ${searchResponse.status}`);\n }\n \n const searchData = await searchResponse.json();\n \n if (!searchData.results || searchData.results.length === 0) {\n return c.json({ error: \"No results found\" }, 404);\n }\n\n const sound = searchData.results[0];\n \n // Get detailed sound information including preview URLs\n const detailUrl = `https://freesound.org/apiv2/sounds/${sound.id}/?token=${apiKey}&fields=id,name,username,duration,previews`;\n const detailResponse = await fetch(detailUrl);\n \n if (!detailResponse.ok) {\n throw new Error(`Detail fetch failed: ${detailResponse.status}`);\n }\n \n const detailData = await detailResponse.json();\n \n // Get the highest quality preview available\n const previewUrl = detailData.previews[\"preview-hq-mp3\"] || \n detailData.previews[\"preview-lq-mp3\"] || \n detailData.previews[\"preview-hq-ogg\"] || \n detailData.previews[\"preview-lq-ogg\"];\n \n if (!previewUrl) {\n return c.json({ error: \"No preview available for this sound\" }, 404);\n }\n\n return c.json({\n id: detailData.id,\n name: detailData.name,\n username: detailData.username,\n duration: detailData.duration,\n previewUrl: previewUrl\n });\n\n } catch (error) {\n console.error(\"Search error:\", error);\n return c.json({ error: \"Failed to search sounds\" }, 500);\n }\n});\n\nexport default app.fetch;",[],[155,209],["D",1759949212686],[172],[155],["D",1759949002040],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},{"_13":84,"_31":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"ctx",{"_77":-5,"_122":255,"_256":257,"_258":259,"_260":24,"_261":24,"_262":24,"_263":57,"_264":-5,"_265":-7,"_266":-7,"_267":61,"_268":24,"_269":24,"_270":-5,"_271":24,"_272":24,"_273":24,"_274":-5},"ENV",{"_226":227,"_228":229,"_230":85,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v8