/music-visualizer

Primary LanguageJavaScript

Music Visualizer

Demo Link

Prerequisites and Notes

  • Please allow for camera access to allow PoseNet to work properly.
  • Please wait for around 2-3 seconds for everything to load properly and then click twice on the artboard to play.

Tech stack

  • p5.js for drawing objects and playing media file.
  • PoseNet for head tracking. In our case, it is tracking the nose.

Instructions

  1. Create an assets folder which contains a media file of the song you want to visualize to. Example: assets/jingle-bell.mp3
  2. Edit the mediaFileType and mediaFilePath variables in script.js (on top of the file).
  3. Open the index.html file on a browser (Preferably Chrome).
  4. Enjoy the visuals!

Known Issues

  • There is a little bit of jitter at the beginning of the visualization. The reason is that PoseNet is trying to initialize first to track human face.
  • The tracking only works well when we move our head horizontally.