Utilizing this particular library for performing a Fast Fourier Transform on an audio file, my next step involves visualizing the output using canvasjs. Unfortunately, I am unsure about how to proceed with this visualization.
I find myself puzzled regarding the choice of values for the x and y axes. Should they represent frequency and amplitude? If so, what is the correct approach for setting these values? Also, should the maximum value for the x axis equal the highest frequency recorded? And if that's the case, what would be the appropriate step value? (I have already calculated the magnitude and the maximum frequency).
Your assistance in this matter would be greatly appreciated.
Edit:
My attempt to replicate this resulted in a subpar outcome. While the magnitude seems decent, the phase appears to be off. Suspecting that the issue might lie with the Math.atan2() function, which calculates from two numbers, I experimented with Math.js and arrays but ended up with the same result. (The desired result can be seen in the provided link).
for (var i = 0; i < 10 - 1/50; i+=1/50) {
realArray.push(Math.sin(2 * Math.PI * 15 * i) + Math.sin(2 * Math.PI * 20 * i));
}
//Phase
counter = 0;
for (var i = 0; i < realArray.length ; i++) {
rnd.push({x: i, y: (Math.atan2(imag[counter], realArray[counter]) * (180 / Math.PI))});
counter++;
}
//Magnitude
counter = 0 ;
for (var i = 0; i < realArray.length ; i++) {
rnd1.push({x: i , y: Math.abs(realArray[counter])});
counter++;
}
This situation has left me feeling completely lost. Any advice you could offer would be greatly appreciated.