How to use p5.js sound in instance mode
Question
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>
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>
It shows this error: "Uncaught ReferenceError: load is not defined (: line 9)" What am I'm doing wrong? Thanks in advance!
1 answers
solution1
1 ACCPTED 2020-12-06 21:14:33
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
pvariable. - But variables and functions that belong to a library are still referenced directly, ie 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.