[{"_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",{"_94":93,"_32":44,"_102":84,"_27":103,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":25,"_117":118,"_119":57,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_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":25},"version",10,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","20297880-a477-11f0-b107-0224a6c84d84","name","fileType","content","# 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/","# 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\n### Getting a Freesound API Key\n\n1. Go to https://freesound.org/apiv2/apply/\n2. Create an account or log in\n3. Apply for an API key\n4. Once approved, add your API key to the Val Town environment variables as `FREESOUND_API_KEY`\n\n### Usage\n\n1. Enter a search term in the search box (e.g., \"piano\", \"rain\", \"drums\")\n2. Click \"Search\" or press Enter\n3. The app will find the top result and automatically start playing it in a loop\n4. Use the play/pause and stop buttons to control playback\n5. Search for new sounds to replace the current audio\n\n### Features\n\n- **Simple Interface**: Google-like search experience\n- **High Quality Audio**: Automatically selects the highest quality preview available\n- **Automatic Looping**: Audio plays continuously until stopped or replaced\n- **Progress Indicator**: Visual progress bar shows playback position\n- **Error Handling**: Clear error messages for API issues or missing audio\n- **Responsive Design**: Works on desktop and mobile devices","createdAt",["D",1759949287461],"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",{"_94":93,"_101":97},"org",{"_94":93,"_95":-5,"_96":97,"_18":53,"_98":99,"_100":25},"branch",{"_13":14,"_32":84,"_42":41,"_85":43,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":44,"_92":93},"isOwned","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,"_32":44,"_37":218,"_46":-5,"_47":25,"_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":25},"tree",[166,168,172,173],"files",[166,167,168,169,170,171,172,173],"counts",{"_156":61,"_157":141,"_158":61,"_159":160,"_161":162},"contents",[124,125,126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":150,"_32":151,"_30":152,"_130":-5,"_40":41,"_39":153,"_132":57,"_37":154,"_13":61,"_33":148,"_34":-5,"_24":25,"_137":-5,"_27":155},{"_42":143,"_32":144,"_30":145,"_130":-5,"_40":41,"_39":146,"_132":57,"_37":147,"_13":61,"_33":148,"_34":-5,"_24":25,"_137":-5,"_27":149},{"_42":139,"_32":28,"_30":31,"_130":-5,"_40":41,"_39":14,"_132":57,"_37":140,"_13":141,"_33":20,"_34":36,"_24":25,"_137":-5,"_27":142},{"_42":128,"_32":129,"_30":55,"_130":-5,"_40":41,"_39":131,"_132":57,"_37":133,"_13":134,"_33":135,"_34":136,"_24":25,"_137":-5,"_27":138},"4494e088-a477-11f0-8bab-0224a6c84d84","main.ts","parentId",9,"latest",["D",1759949260705],3,"http","// Import and use the Hono backend\nimport app from \"./backend/index.ts\";\n\nexport default app;","label",[129],"5487c212-a477-11f0-a035-0224a6c84d84",["D",1759949287461],1,[28],"314bce24-a477-11f0-9d9b-0224a6c84d84","frontend","307c435b-1d27-4963-976b-aad544e415b5",6,["D",1759949228350],"directory",[144],"27f7cdd2-a477-11f0-a5f5-0224a6c84d84","backend","1b8ce10b-1156-46d4-9dd6-b24844123787",5,["D",1759949212686],[151],"pulls","branches","forks","envVars",{"_163":141,"_165":61},"connections",{"_163":61,"_164":61},"count","unfilledCount","emptyCount",{"_42":150,"_32":151,"_30":152,"_130":-5,"_40":41,"_39":153,"_132":57,"_37":215,"_13":61,"_33":148,"_34":-5,"_24":25,"_137":-5,"_175":216,"_27":217},{"_42":208,"_32":209,"_30":210,"_130":152,"_40":41,"_39":153,"_132":57,"_37":211,"_13":61,"_33":194,"_34":212,"_24":25,"_137":-5,"_175":213,"_27":214},{"_42":143,"_32":144,"_30":145,"_130":-5,"_40":41,"_39":146,"_132":57,"_37":205,"_13":61,"_33":148,"_34":-5,"_24":25,"_137":-5,"_175":206,"_27":207},{"_42":198,"_32":199,"_30":200,"_130":145,"_40":41,"_39":146,"_132":57,"_37":201,"_13":61,"_33":20,"_34":202,"_24":25,"_137":-5,"_175":203,"_27":204},{"_42":189,"_32":190,"_30":191,"_130":145,"_40":41,"_39":192,"_132":57,"_37":193,"_13":61,"_33":194,"_34":195,"_24":25,"_137":-5,"_175":196,"_27":197},{"_42":181,"_32":182,"_30":183,"_130":145,"_40":41,"_39":184,"_132":57,"_37":185,"_13":61,"_33":20,"_34":186,"_24":25,"_137":-5,"_175":187,"_27":188},{"_42":139,"_32":28,"_30":31,"_130":-5,"_40":41,"_39":14,"_132":57,"_37":178,"_13":141,"_33":20,"_34":36,"_24":25,"_137":-5,"_175":179,"_27":180},{"_42":128,"_32":129,"_30":55,"_130":-5,"_40":41,"_39":131,"_132":57,"_37":174,"_13":134,"_33":135,"_34":136,"_24":25,"_137":-5,"_175":176,"_27":177},["D",1759949260705],"children",[],[129],["D",1759949287461],[],[28],"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}",[],[144,182],"410150b4-a477-11f0-90d4-0224a6c84d84","index.js","41015168-a477-11f0-90d4-0224a6c84d84",8,["D",1759949254706],"script","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});",[],[144,190],"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",[],[144,199],["D",1759949228350],[169,170,171],[144],"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;",[],[151,209],["D",1759949212686],[167],[151],["D",1759949002040],{"_94":93,"_101":97},{"_94":93,"_95":-5,"_96":97,"_18":53,"_98":99,"_100":25},{"_13":14,"_32":84,"_42":41,"_85":43,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":44,"_92":93},"ctx",{"_77":-5,"_121":255,"_256":257,"_258":259,"_260":25,"_261":25,"_262":25,"_263":57,"_264":-5,"_265":-7,"_266":-7,"_267":61,"_268":25,"_269":25,"_270":-5,"_271":25,"_272":25,"_273":25,"_274":-5},"ENV",{"_226":227,"_228":229,"_230":84,"_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 · v10