NeonPulse

Home-Non Functional State
Audio-Functional Stated

🎇 Inspiration

Music isn't just something you hear — it's something you feel.
NeonPulse was inspired by the idea of visually representing sound in a futuristic, cyberpunk style. We wanted to create an immersive experience where music transforms into vibrant neon visuals, making beats and bass come alive on screen.

🎧 What it does

NeonPulse is a web-based audio visualizer that turns music into animated visual pulses using neon-themed graphics. It allows users to:

Upload local audio files
Use their microphone for real-time audio input
View synchronized neon visuals that react dynamically to sound
Toggle immersive mode for a distraction-free experience
Pause, resume, and reset the audio input
Enjoy a responsive interface across devices

🛠️ How we built it

We built NeonPulse using:

HTML5 – For semantic structure and audio input elements
CSS3 – To design the sleek neon UI and ensure responsive layout
JavaScript (Vanilla) – To handle real-time audio processing using the Web Audio API

We used the analyserNode to extract frequency data from audio input and animate it on a canvas in real time.

🧩 Challenges we ran into

Handling real-time microphone input with minimal delay
Achieving smooth visual animations across devices and resolutions
Ensuring cross-browser compatibility for audio features
Designing an immersive, minimal UI without losing functionality
Balancing performance and aesthetic appeal

🏆 Accomplishments that we're proud of

Built a fully functional, zero-setup audio visualizer using pure front-end tech
Implemented both file and microphone input sources
Designed a visually pleasing, futuristic neon theme
Ensured smooth audio responsiveness and interactive controls
Created an immersive mode for focused listening