https://editor.p5js.org/mikefromd/embed/qSTMuQNjs
How to delay the execution of something in Javascript?
In order to delay the execution of a code snippet in Javascript, use the setTimeout() method.
Its syntax is as follows:
setTimeout(functionName, delay)
FunctionName is a call back function that will be executed after the time fixed in the parameter delay has passed. In this video you get more details on how to use this function:
General remark before starting with the audio libraries:
The following tutorials are from Daniel Shiffman and can all be found on his Youtube channel “Codetrain”. I have selected some basic ones for you to get started with audio. Please remember that you have to download your audio file first into the editor, only then the player can access them and you can get your code running.
Please remember that you need to log in with P5JS to be able to upload your audio files. You can then drag and drop them into the field opening when you select Sketch/Add File.
Sound with p5.js
Load and play a sound file
Here is again a video about how to load and play an audio file. Again like with image files, you should use the preload function to make sure that the whole file is loaded before you start to play it.
Besides the basics you see how to change the volume, the rate or speed of the playback as well as the pan (left and right side effect).
This is the code for the basic audio playback
Adding control buttons to your audio player
The following video shows how to add a button playing and stopping the audio.
Here is the finished code for the playing and pausing of the audio track.
Put it all together …
The image and the link to the p5js script at the beginning of this blog show you what you can do while combining audio, images and small animations in P5JS. Give it a try!
Recent Comments