It's just that, a simple and intuitive playground for sound processing that runs directly on the browser. Choose any input device—your microphone, a synth, or even a noisy fan—and run it through the playground’s effects. Or, if you’re feeling adventurous, upload any file (yes, even an image or text file!) in the File tab and explore how it sounds when looped, detuned, or warped with different playback rates.
Need inspiration? Log in with FreeSound and dive into their massive collection of samples—you might stumble upon the perfect starting point!
With a variety of effects at your fingertips, tweak, twist, and shape the sound in real-time. Once you’ve crafted something unique, try recording it! You can then download your creation or reintroduce it as an input to push your experiment even further.
No rules, just sonic exploration—let’s see what you can create! 🚀🔊
- Next Js 15
- Tailwind CSS v4
- ShadCn / Radix UI
- dnd kit
- Web Audio API
For usage of the Freesound API you should include a .env file with the following definitions
NEXT_PUBLIC_FREESOUND_CLIENT_ID=[client id of the Freesound registered API]
FREESOUND_CLIENT_SECRET=[Freesound API secret]
NEXT_PUBLIC_AUTH_REDIRECT=[root domain]
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
The easiest way to deploy the app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.