Level Up: Creative Coding with p5.js - part 8

Article hero image

In our last session, we will learn how to create audio visualizations with the p5.sound.js library. We will start by learning how to upload and play a sound file in the p5.js web editor. We will first talk about what amplitude is and how we can program a p5.js sketch to react to the amplitude of a sound file. We also talk about how to analyze sound with Fast Fourier Transform (FFT) and we can use the amplitude values along the frequency spectrum to create an audio visualization.

Here are some Stack Overflow questions related to the work we did in this session:

How to get frequency value in JavaScript?

Creating a Sound Wave using P5.js

( p5.js ) FFT report lower frequencies “too loud” and higher frequencies “mute”?

If you enjoyed this lesson, you can catch up on the rest of the series on YouTube.

Finally, if you want even more Creative Coding with p5.js content, you can sign up for the interactive course this series was based on here. This course was developed by Jiwon and has many more quizzes, projects, and helpful articles that we can’t fit into our streams!

Login with your stackoverflow.com account to take part in the discussion.