Categories
6. Final

Final Project – Song Frequency Analyzer

For the final project of the semester, I decided to create a frequency visualizer for a few songs. I also wanted to incorporate a JSON file, so I wrote songs.JSON, which includes the titles, artists and indices of 11 songs. Those same 11 songs are loaded onto the project as mp3 files under the folder songsaudio. My initial ideas included a more useful display for music producers with a linear display. The first ideas that I thought of displays were BPM, volume of stereo (left and right separately) and the volume across the entire frequency range. After understanding how important specific frequency bands are for music producers, I decided to display 5 frequency bands. In order to make my display more artistic (at the cost of usefulness to actual producers), I decided to change to a circular display. This made the result of the project aesthetically pleasing to look at.

The main sketch.js file basically picks one of the 11 songs at random to analyze every time it is run. There are 5 bands: Bass, Low Mid, Mid, High Mid and Treble. Each band is analyzed for an iteration and its history is stored in an array. In order to avoid any crashes of the browser with the size of the arrays growing indefinitely, I limited the array size for each band to be 360 indices and each index represents 1 degree in the circle.

Attached below is a sample run of the code where Save Your Tear by The Weeknd is picked out of the 11 songs:

 

Here is the link to the code

 

Bibliography:

  • “Reference.” Reference | p5.Js, https://p5js.org/reference/#/p5.FFT/analyze.
  • “Reference.” Reference | p5.Js, https://p5js.org/reference/#/p5.FFT/getEnergy. 
  • Shi, Ziyi. “Creative Coding Midterm assignment1.” Medium, Medium, 26 Oct. 2021, https://medium.com/@zs2414/creative-coding-midterm-assignment-5e5cc88c8c91. 
  • “Array.prototype.splice() – Javascript: MDN.” JavaScript | MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice. 
  •  
  • Playground – Waves Gallery View | Playground. https://www.playground.ink/gallery/. 
  • “Chromie Squiggles Explorer.” Chromie Squiggle Explorer, https://chromie-squiggles.com/.
  • All the Shiffman videos under the Sound Library, only the first is cited:
    • shiffman. “17.1: Loading and Playing – p5.Js Sound Tutorial.” YouTube, YouTube, 7 June 2016, https://www.youtube.com/watch?v=Pn1g1wjxl_0&list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW.