17.9: Sound Visualization: Graphing Amplitude - p5.js Sound Tutorial

TL;DR

Using p5.js, create interactive sound visualization by connecting sound amplitudes to an mp3 file.

Transcript

hello welcome to another video with p5.js sound as you can see the previous video this is the result of that one where I have this talking ellipse which moves as I speak is really just responding not to my voice but any sound and so what I want to do is now connect this same volume listening thing to an mp3 file instead of my voice and see what hap... Read More

Key Insights

• 👂 p5.js allows for interactive sound visualization by connecting sound amplitudes.
• 🖐️ Preloading and playing mp3 files can create an engaging auditory experience.
• 🎮 Toggling play/pause functionality enhances user control in p5.js sound projects.
• ⌛ Graphing volume levels over time offers insightful data visualization.
• 👂 Customizing visual effects like translating and mapping can improve the sound visualization experience.
• 🔇 Utilizing arrays for storing and manipulating volume history is crucial in sound visualization.
• 🥺 Considering user suggestions can lead to innovative enhancements in sound visualization projects.

Questions & Answers

Q: How can sound amplitudes be connected to an mp3 file in p5.js?

In p5.js, you can create an amplitude object and connect it to the mp3 file to listen to the volume levels of the sound.

Q: What is the process for toggling song play/pause in the p5.js sound visualization?

By creating a button to toggle the song play/pause and writing a function to handle the action based on whether the song is playing or paused.

Q: How can the volume levels over time be graphed in a p5.js sound visualization?

You can store the volume history in an array and graph it using points to visualize the amplitude changes over time.

Q: Is it possible to customize the sound visualization in p5.js further?

Yes, by utilizing features like mapping y-values, translating the graph for visual effects, and implementing additional visualization elements like a red line for real-time amplitude.

Summary & Key Takeaways

• Generate sound visualization by connecting sound amplitudes to the mp3 file.

• Utilize p5.js to preload and play the mp3 file for visualization.

• Implement features like toggling song play/pause and graphing volume levels over time.