How to use Sound in P5.js Instance Mode

p5.js Libraries
1

Hi! I’m trying to make a website with multiple p5 canvases on the same page, so, after a lot of research, I came to the conclusion that the most adequate way to do that is by using instance mode. I spent the whole day trying to understand how it works, I even found a converter online that converts it for me, but I’m trying to do it all by myself using it just to check errors. The problem is that I can’t find a way to use sound in my sketch using instance mode. the code I have is a lot more complex, but even trying just the basics it still does not work.

var s = function(p) {

  let song;

  p.preload = function() {
    p.song = load('thunder.mp3')
  }

  p.setup = function() {
    p.createCanvas(720, 200);
    p.background(255, 0, 0);
    p.song.loop();
  };

};

var myp5 = new p5(s, 'c1');

This is the last try I did, but I did many others.

Testing in the global mode it works just great, but in instance mode it throws this error: “Uncaught ReferenceError: load is not defined (: line 9)”

You can find the code i did here:
https://editor.p5js.org/jgsantos.dsn/sketches/rUWb6Nurt (instance mode, not working)
https://editor.p5js.org/jgsantos.dsn/sketches/_lQcDqOsp (global mode, working)

Thanks in advance!

2

Your instance mode’s online link doesn’t even load the “p5.sound.js” library! :roll_eyes:

song = p.loadSound('thunder.mp3');

song.loop();

3

thanks for the help… it was a stupid question… As it is the first time I’m using instance mode I focused on the translation and forgot about the basic things… the two corrections you suggested, I had them in a previous version, but I forgot to load the library in HTML. In fact, I tested now and p5 does import the sound library automatically… I don’t know if I erased it by mistake or if it didn’t do it because of using instance mode… Anyway, as I said, although I have some experience in processing, it’s my first time using p5, and instance mode. I remember when I started in processing, I had a problem with using the sound library in a class, something to do with PApplet that I still don’t understand… for this reason I think i just assumed it was something similar and just forgot about the basic things! thank you very much, and sorry for the inconvenience

4

Then you should take a look at the online sketch below which is written in both global & instance modes so you can spot where they differ from each other:

That’s about the datatype of keyword this, which in Java is always the class it is in.

In JS keyword this is mostly the same. However watch out for edgy cases of this!

1 Like