Music Visualizer

January 2024 - March 2024 (3 months)

This is a simple music visualization project created as one of my programming assignments. This site visualizes audio files in various ways using the Fourier transform function provided by the p5.js sound library. While some basic modules were written by the instructor as templates, I made slight modifications for better visualization and added new ideas.

Features

1. Noise Pixels (Original)
2. Firework Beats
3. Wave Pattern (Modified)
4. Ridge Plot (Customization Added)
5. Circlular (Original)
6. Blocks
7. Needle
8. Spectrum (Modified)
9. Spectrum Dots (Original)

Technical Focus

• This project aimed to apply advanced programming skills by utilizing complex objects and arrays, and to become familiar with simulation and motion coding.
• Improved the user interface (UI) using p5.DOM.
• Wrote code in an object-oriented programming style.
• Implemented modern JavaScript (ES6, private variables, classes, etc.).
• Leveraged p5.js instance mode to use ES6 modules.
• Supports jsdoc.

Using Fast Fourier Transform

• FFT.analyze() returns an array of 1024 values between 0 and 255. Each value represents the amplitude (loudness) of a small frequency range (pitch of the sound).
• FFT.waveform() returns an array of 1024 values between -1 and 1. Each value represents the amplitude of the sound over a small period of time.
• FFT.energy(freq1, [freq2]) returns the volume of the sound in the frequency range specified by the freq1 and freq2 parameters.

Demo

vis-demo-fast.webm

Visit Site jsdoc

Tech Stack

Frontend

• Libraries: p5.js, p5.sound, p5.DOM
• Language: JavaScript
• Styling: CSS

Backend

• None

Development Environment

• Source Code: GitHub

Cloud Services and Deployment

• Hosting and Deployment: Netlify

References

• Project Idea Collection - Pinterest
• p5.js Official Documentation
• JavaScript Official Documentation
• JsDoc Official Documentation
• CSS Styling Reset - Uniform CSS (Modern CSS reset styling by Andy Bell)
• How to Use p5.js in Modules - JavaScript ES6
• Instance Mode (aka "namespacing") - p5.js Tutorial
• Global State Management in JS and ES6 - Stack Overflow 1 Stack Overflow 2
• What is Fourier Transform?
• Beat Detection Algorithm - Algorithm 1 Algorithm 2