Sound and Images

The basic ideas of using sound and images in your sketches are similar:

• You have to have a file containing the sound you want to play or the image you want to display.
• The files must be in the same folder as the the sketch (easiest), in a sub-folder (better organized) or at some known address that won't change (less controlable).
• You should put a "preload" function at the beginning of the sketch to load the files beofre anything else happens.
• This use of files will ONLY work on a web server like GitHub; it will not work from your "D:/" drive.

There is one additional thing you MUST do for sounds: look in the index.html code and un-comment the line that will include the p5.sound.js library. There are many functions in the sound library, but the reference information doesn't make it clear that the functions that operate on a specific sound variable must have that variable name in front, separated from the function name by a period. For example:

var mySound; // Creates a variable to hold the sound

function preload() {
  mySound = loadSound('animals020.mp3');  // Loads the sound file into the variable
}

function setup() {
  createCanvas(640, 480);
  // Notice that you have to put the variable name in front of the functions
  mySound.setVolume(0.1);
  mySound.play();
}