Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
p5js-sound1 [2024/03/19 23:23] – renickp5js-sound1 [2024/03/19 23:27] (current) – renick
Line 1: Line 1:
 ====== the basics of sound in p5js ====== ====== the basics of sound in p5js ======
 +
 +All of the documentation for sound-related functions in p5js is here: https://p5js.org/reference/#/libraries/p5.sound
  
 ===== making a sound play and loop ===== ===== making a sound play and loop =====
  
-https://editor.p5js.org/renick/sketches/xK8lVKUCP+Let's get a sound playing in p5js. 
 + 
 +This works, but notice the problem when you click the square more than once! 
 + 
 +<HTML> 
 +<iframe src="https://editor.p5js.org/renick/sketches/xK8lVKUCP" width=99% height=800></iframe> 
 +</HTML>
  
 ===== making a sound play only when the mouse is clicked ===== ===== making a sound play only when the mouse is clicked =====
Line 10: Line 18:
  
 Also, can you figure out why it sounds like two different sound files even though it only uses one? What's been done in the second call to loop that makes it different? Also, can you figure out why it sounds like two different sound files even though it only uses one? What's been done in the second call to loop that makes it different?
 +<HTML>
 +<iframe src="https://editor.p5js.org/renick/sketches/PC5p6LAGl" width=99% height=800></iframe>
 +</HTML>
  
-https://editor.p5js.org/renick/sketches/PC5p6LAGl +===== the problem: clicking =====
- +
-==== the problem: clicking ====+
  
 Notice the terrible clicking that happens when you stop pressing the mouse button. There's not proper envelope for the sound. That sudden drop from some amplitude to 0 makes the click. One way to fix that might be this: Notice the terrible clicking that happens when you stop pressing the mouse button. There's not proper envelope for the sound. That sudden drop from some amplitude to 0 makes the click. One way to fix that might be this:
  
 In this version, we use setVolume and give pause an argument to tell it to pause AFTER the fade-out. In this version, we use setVolume and give pause an argument to tell it to pause AFTER the fade-out.
 +<HTML>
 +<iframe src="https://editor.p5js.org/renick/sketches/N5C_DXuiP" width=99% height=800></iframe>
 +</HTML>
  
-https://editor.p5js.org/renick/sketches/N5C_DXuiP +===== stopping a loop =====
- +
-==== stopping a loop ====+
  
 This version is a little nicer in some ways; it loops while you press the box, but the looping stops once you stop pressing the mouse. We accomplish that by passing false to setLoop. This version is a little nicer in some ways; it loops while you press the box, but the looping stops once you stop pressing the mouse. We accomplish that by passing false to setLoop.
- +<HTML> 
-https://editor.p5js.org/renick/sketches/BKKirJi-o6+<iframe src="https://editor.p5js.org/renick/sketches/BKKirJi-o6" width=99% height=800></iframe> 
 +</HTML>
  
 ===== notes ===== ===== notes =====
  • p5js-sound1.txt
  • Last modified: 3 months ago
  • by renick