Fast Fourier Transform Simulator with Web Audio

To start, I made the design choice to create a class to contain the FFT transform simulator, so that all methods defined within the class would be accessible outside it, and it serves as a template to create new objects. For example, I created an instance of the class within my HTML page and defined two methods, updateFrequencyValueInput and updateInputSourceToFFT that take in values and update relevant parameters. The way the class is implemented is malleable and there is potential to build on it. The input for the FFT transformer can be either an oscillator or a microphone, where the former allows us to define the type of wave (square, sawtooth, sine..), the frequency which ranges from 0 to 20,000 Hz, and the detune of the wave.

At first glance, the concept of decomposition might seem trivial, however, as Steven W. Smith says in Chapter 5 on Linear Systems in his book, The Scientist’s and Engineer’s Guide to Digital Signal Processing, it is a great example of digital signal processing that reduces a given signal to its basic components, by repeatedly using the interlace transform, calculating the Fourier decomposition of the individual components, then finally synthesizing the results into a final answer. The interlaced component signal is not the focus of my decomposition, but it is the “concept” behind the image. The interlaced decomposition breaks the signal into two component signals, the even sample signal and the odd sample signal, on which we apply the FFT. This served as inspiration for my graph visualizer.

The following image is the inspiration for my project, where we see a Discrete Fourier Transform (DFT) from the time to the frequency domain. This is because binary representation is discrete, and since we are using binary data, it is a DFT.

Built With

• html
• javascript
• webaudioapi