Jump to content
Search Community

Creating a beautiful audio visualiser animation

Buntafujiwaaa test
Moderator Tag

Recommended Posts

Hi guys,

 

I'm trying to learn how to build a beautiful audio visualiser that looks fluid.

How do you think I should do it? I'm trying to find examples on codepen but can't seem to find any. Is there a certain name for this kind of style for reference.

 

How do I make them move randomly and visually appealing
 

https://www.cssscript.com/demo/minimal-audio-visualizer-with-canvas-and-vanilla-javascript/

Link to comment
Share on other sites

Hey Buntafujiwaaa. This isn't really a GSAP question but I'll try to help where I can :) 

 

There are lots of existing libraries and projects that you could use to modify to generate something like this. The one you show is open source. As is this one that looks fairly similar. There are lots of other CodePens and GitHub projects that you could look at (including a few of my own). 

 

At the core, they use the web audio API to get live values from the music provided. These values are already divided up into buckets. These buckets are then visualized in a column with a max height corresponding with the max volume level in that area. 

 

The visualizer you show has two columns (mirrored on each side) for the same bucket to give it that harmony. Some visualizers even have 4 columns mirrored. Often times the highest buckets are thrown out because they are rarely used in music. 

 

As for how you could use GSAP in this - it's great for animation! You could use GSAP's quickSetter to make the updates super smooth. You could use DOM, Canvas, WebGL, whatever.

  • Like 4
Link to comment
Share on other sites

26 minutes ago, Buntafujiwaaa said:

For example, if I'm looking closely there's a wave like random looking bars going out.

 

That's the audio levels, but you can probably fake the values. Try searching for simplex and perlin noise. It can be used to create naturally random looking patterns.

 

 

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...