GoShip
How It WorksChallengesPricingEmployers
Sign InGet Started
0developers
0companies
0assessments scored
How It Works
|Pricing
|Challenges
|Employers
|Privacy
|Terms
GoShip© 2026
Get updates
Twitter·GitHub
Systems nominal
BUILDSENIOR

Build a Music Visualizer

90 minutes
0 completed
web-audiocanvascreative-codingvisualization

Description

Build a Music Visualizer

Build an audio-reactive visual experience using the Web Audio API and Canvas/WebGL.

Requirements

  • Accept audio input: microphone or audio file upload
  • Real-time frequency spectrum analysis using Web Audio API's AnalyserNode
  • At least 3 visualization modes: waveform, frequency bars, circular spectrum
  • Visualizations respond to bass, mid, and treble frequencies differently
  • Color themes (neon, pastel, monochrome, custom)
  • Fullscreen mode
  • Smooth 60fps rendering

    • Technical Notes

    Use Web Audio API for analysis and Canvas 2D or WebGL for rendering. Audio file playback via audio element connected to AnalyserNode.

    Bonus Points

  • Particle systems that react to beats
  • Beat detection algorithm
  • Record visualization as video (MediaRecorder API)

    • You will be guided through MCP setup before the timer starts