Skip to content

Latest commit

 

History

1 Commit

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages