/JSProject

Aurora Music Visualizer

Primary LanguageSCSS

Aurora

Background

Aurora is a animated visual representation of beats analyzed from music. It takes a user's selection of music and generates a visual appealing depiction in real time of the synchronized beats of the music.


Demo and Functionality

  • Nav links include links to this project's Github repo.
  • Controls for user interaction for play, pause, volume, and track time selection.
  • Music Visualizer circle is the visual display of music beats
  • User music file selection for visualizer.

Development

Music Visualization is implemented on canvas which takes in a sound input source. Web Audio API takes in the waveform and creates a Analyser node which then can be accessed by linking it to the frequencyBinCount method. By accessing this node, we have access to the frequency data within the generated array to which we can select certain aspects to be animated.


Working Screenshot:

Technologies, Libraries, APIs


  • Vanilla Javascript
  • HTML/CSS
  • Canvas
  • Web Audio API


Future Features


  • Live audio feed implementation
  • Different visualizer selections

Credits & Resources

    Credit to: Franks Laboratory for help with understanding and implementing concepts related to use of Vanilla Javascript, HTML/CSS, Canvas and Webaudio API integration. Franks laboratory