CODEWITHSUNDEEP
javascriptaudioinstancep5.js
Jorge Santos
Jorge Santos

Reputation: 57

How to use p5.js sound in instance mode

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 on p5. I spent the whole day trying to understand the instance mode, i even found a converter online that converts it for me, but I'm trying to do it all by my self 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 basic 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');
html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>
    <style> body {padding: 0; 
        margin: 0;
    } 
      <meta charset="UTF-8">
</style>
</head>
<body>
    <div id="c1"></div> <br>
    <div id="c2"></div>
</body>
</html>
you can test it here: https://editor.p5js.org/jgsantos.dsn/sketches/rUWb6Nurt

This code works great in the global mode:

let song;

function preload() {
  song = loadSound('thunder.mp3');
}

function setup() {
  createCanvas(720, 200);
  background(255,0,0);
  song.loop();
}
html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>
You can test it here https://editor.p5js.org/jgsantos.dsn/sketches/_lQcDqOsp

It shows this error: "Uncaught ReferenceError: load is not defined (: line 9)" What am I'm doing wrong? Thanks in advance!

Upvotes: 0

Views: 772

Answers (1)

Kevin Workman
Kevin Workman

Reputation: 42174

Please try to post the exact code you're running. Your question contains different code than the link you posted in the comments.

But taking a step back, here's how I would think about instance mode and libraries:

  • Instance mode means that the variables and functions that belong to a sketch are now referenced via a variable, in your case the p variable.
  • But variables and functions that belong to a library are still referenced directly, i.e. in "global mode".

In other words, you don't want to reference the load() (or is it loadSound()?) function using instance mode. You should still reference that function directly, since it's coming from a library instead of from a specific sketch.

Upvotes: 1

Related Questions