17.4: Amplitude Analysis - p5.js Sound Tutorial

TL;DR

Learn to visualize sound amplitudes by creating responsive shapes in p5.js.

Transcript

hello welcome to one more video but this is not the last one about sound in the browser using p5.js sound library so in this video what i want to demonstrate to you is how to listen to the audio that's playing back and draw something according to how loud that sound is so we can have a responsive shape on the screen responding to a particular audio... Read More

Key Insights

• ▶️ Delaying the play button appearance until sound loading ensures smooth playback.
• 👂 Visualizing sound amplitudes enhances user experience and interaction.
• 💨 Amplitude analysis in p5.js is a simple yet effective way to engage users with sound visuals.
• ❓ Future exploration can include FFT for nuanced frequency analysis.
• 🥺 Shape responsiveness to sound amplitudes can lead to creative artistic applications.
• 🫀 Mic input can also be used to control visuals based on voice amplitude.
• 👂 Sound visualization tutorials in p5.js offer endless creative possibilities.

Questions & Answers

Q: How can you ensure the play button appears only after the sound is loaded?

By moving the play button creation code into the sound loaded callback function, you can delay its appearance until the sound is ready to play, avoiding errors.

Q: What is amplitude in sound analysis?

Amplitude in sound analysis refers to the volume or loudness of the sound, represented as a waveform's height, with higher amplitudes indicating louder sounds.

Q: How can you use the p5.js library to analyze sound amplitudes?

You can create an amplitude object in p5.js to listen to sound volume changes, enabling you to visualize these amplitudes by connecting them to shape properties like size or color.

Q: What additional sound analysis can be performed beyond amplitude in P5.js?

Apart from amplitude analysis, you can delve into frequency analysis using FFT (Fast Fourier Transform) in p5.js, which allows you to examine different sound frequencies and amplitudes across the spectrum.

Summary & Key Takeaways

• Tutorial in p5.js on visualizing sound amplitudes through shape responsiveness.

• Demonstrates how to connect sound loading with visual elements effectively.

• Introduces basic sound analysis using amplitude and potential future frequency analysis.