I just wrote my second Processing script and I'm trying to get it in an HTML5 page. My script detects the intensities of frequencies from an input song (mp3) and assigns each frequency to a hue range of an image to animate the image. I've included processing.js and Pomax's minim.js. I'm getting the following error:
Uncaught ReferenceError: FFT is not defined
Looks like this happens when it hits the line
FFT fft;
in my Processing sketch. I took a look at minim.js and it looks like it's a small slice of the minim library. The page is drawing the box, so I think it's just missing the FFT function to analyze the audio. However I'm more on the visual art side of all this, so it could be that minim.js is missing a lot more than I think.
Does anyone know how to implement FFT into minim.js? It could be really powerful when in an HTML5 context. I'm not sure what I'd do alternatively, but I think I could find another audio analyzing library.
I'm fairly new to this world so let me know if you have any questions or need the code.
Thanks!
this is actually 6 lines of code in javascript using the Audio API without any libraries, so why do you want the overhead of an exta library for something you can achieve with 6 lines of code without?
var sfx = new AudioContext();
var mediaSourceNode = sfx.createMediaElementSource(document.getElementById("yourAudio"));
var analyser = sfx.createAnalyser();
var timeDomainData = new Uint8Array(analyser.frequencyBinCount);
mediaSourceNode.connect(analyser);
analyser.connect(sfx.destination);
You put the Audio you want to play in a html5 <audio> element and get the basic user interface for audio playback.
In order to get the data from the analyser call
analyser.getByteTimeDomainData(timeDomainData);
From your draw loop. Your data will be in the var timeDomainData
For infos on using javascript in combination with processing.js see http://processingjs.org/articles/PomaxGuide.html