I wasn't sure about how to formulate the title, so please bear with me. I'm trying to create an npm library that can be used to visualize waveforms in audio messages (or just audio in general). The idea here is to take a set of numbers (decibels) and stretch (or compress) them into a set size specified by the user. Something like this:
As you can see in the image above, there are 30 bars. This can be passed as a parameter by the user upon instantiation of the component.
My question is about creating a resulting set of numbers based on an initial set of numbers, such that the resulting set is proportioned to the number of bars.
For instance, suppose the following set of decibels:
const metering = [
-160,
-143,
-112,
-132,
-145,
-115,
-112,
-128
]; // 8 elements
The above particular set represents a 400 millisecond audio recording, because metering is tracked/throttled every 50ms, (8 elements * 50ms = 400ms).
I need to come up with a way to take each element and "spread" it into a proportioned value. In this case, if there are 30 total bars (in other words, the resulting set must contain 30 elements, each element representing the average amount decibles for that time span), then each bar would represent 0.266 bars (8 / 30):
const result = [
. . .
]; // 30 elements here
In the above example, I can calculate the quantity of bars that each element represents, in this case 3.75 (1 / 0.266). However, I can't just say that these 3.75 bars are of the same amplitude (height). Each bar would have to have its own value.
But I can't just take each element, say the first element -160 and say that
But I need to follow up on this and come up with a formula that would take any set of numbers and provide the resulting set, (imagine a 3 minutes long audio recording: that's 3600 elements in the set (180000ms / 50ms);
What am I doing wrong here and how can I achieve this?