SoundWave

SoundWave – Feel the beats. See the vibe.

Comment

SoundWave – Feel the Beats

🚀 Inspiration

We were inspired by the aesthetic charm of lo-fi music, YouTube visualizers, and the growing trend of music-based experiences. Most audio players are functional but boring — we wanted to build something that lets users see the music, feel the mood, and even transform the vibe with a single click.

💡 What it does

SoundWave allows users to:

  • Upload any audio file
  • Visualize the beats using animated waveforms
  • Toggle a "Lo-Fi Mode" to convert the track into a chill version
  • Experience an aesthetic UI with responsive design and customizable themes

🛠️ How we built it

We used Bolt.new to rapidly prototype the UI and handle state. Audio visualization is powered by waveform.js, while Web Audio API handles real-time audio effects like low-pass filters and reverb for the lo-fi experience. The app is fully responsive, cleanly styled with gradients and soft fonts to match the lo-fi aesthetic.

😮‍💨 Challenges we ran into

  • Getting real-time waveform syncing with uploaded audio
  • Tuning audio filters to create a pleasing lo-fi effect without breaking performance
  • Ensuring cross-browser compatibility for audio APIs
  • Making the UI visually pleasing while keeping it lightweight

🏆 Accomplishments that we're proud of

  • Implementing real-time lo-fi audio effects smoothly
  • Creating an engaging visual experience that reacts to music
  • Building a polished and working MVP within the hackathon timeframe
  • Designing a brand and logo that people immediately vibed with

📚 What we learned

  • Hands-on with Web Audio API and filter nodes
  • How to use Bolt for faster full-stack app development
  • The value of user-centric design in creative tools
  • Fine-tuning UI/UX for mobile responsiveness in visual-heavy apps

🔮 What's next for SoundWave

  • Add Spotify or YouTube integration
  • Introduce collaborative visualizer sessions (like rooms)
  • Enable waveform customization and theme packs
  • Allow export of lo-fi versions of songs (if copyright allows)
  • Build a Chrome extension for audio visualization while browsing

Built With

  • eslint
  • localstorage
  • lucidereact
  • react
  • tailwindcss
  • typescript
  • vite
  • webaudioapi
  • webworkers
Share this project:

Updates