Question

I have to implement an audio (VU) meter using Javascript. This concept should be new, so any integration in Javascript should be very exciting.

The input data for the animations will come from the backend and look like:

*

bands=[[20, 1267], [1268, 2515], [2516, 3763], [3764, 5011], [5012, 6259], [6260, 7507], [7508, 8755], [8756, 10000]];
numBands=8;
scaleAllBands=0;
amplitude=[0, 0, 0, 0, 0, 0, 0, 0, 14, 13, 10, 13, 19, 16, 11, 14, 14, 9, 7, 16, 11, 7, 14, 14, 8, 6, 5, 4, 4, 5, 14, 12, 7, 16, 17, 10, 7, 30, 22, 16, 11, 16, 12, 8, 13, 9, 6, 4, 4, 4, 4, 5, 3, 3, 3, 4, 3, 3, 3, 3, 2, 1, 1, 1, 1, 1, 15, 14, 9, 6, 4, 3, 3, 15, 9, 7, ETC (much more)
spectrum=[[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], ETC (MUCH MORE)

*

The problem is that I don’t know how to interpret this raw data. I checked for some action script working examples, so that I can make a port to Javascript, but I didn’t find any working AS example that uses this kind of input.

Any working example or idea of interpreting this data would be very appreciated.

Answer 1

It seems like you have two kinds of data.

1. amplitude is the global amplitude (the actual VU meter). You just have to know the delay between two values and animate a single bar with this values. You will have to find the maximum of these values for a better result.

2. bands define frequencies of a 8-band analyzer. You don’t need these frequencies for your display. You just have to display 8 bars and animate them with the values from each value list in spectrum. The bar with the index i (between 0 and 7) at the time t will show the value spectrum[t][i].