Music Visualizer with Plane and Shader

I want the vertexes of a plane to go up and down in proportion to the volume with the sound of music, if I’m not mistaken, the frequency of the sound is an array of 256, how can I give this to the plane?

maybe like this?
https://playcanvas.github.io/#/graphics/mesh-generation

Yes, similar to this, but instead of those light bullets, I want it to go up and down with the sound frequency and with a shader, not mesh.
I would be grateful if you could help me.

You can read the audio data using Web Audio API directly. Then use that in your shader. Here is an example of how you can read the data. The shader is your homework.

https://playcanvas.com/project/716867/overview/spatial-audio

2 Likes

How can I use the array in the shader because the sound is giving me an array, how do I use this in the shader?

This is probably the example to study: PlayCanvas Examples

In the fragment shader it declares an array:

uniform vec3 tints[4];

and then passes the 12 numbers to it this way:

            refractionMaterial.setParameter(
                "tints[0]",
                new Float32Array([
                    1,
                    0.7,
                    0.7, // red
                    1,
                    1,
                    1, // white
                    0.7,
                    0.7,
                    1, // blue
                    1,
                    1,
                    1, // white
                ])
            );
3 Likes