如何在实例模式下使用p5.js声音



我正试图制作一个在同一页面上有多个p5画布的网站,因此经过大量研究,我得出结论,最合适的方法是在p5上使用实例模式。我花了一整天的时间试图理解实例模式,我甚至在网上找到了一个转换器,可以为我转换它,但我试图自己使用它来检查错误。问题是,我找不到一种使用实例模式在草图中使用声音的方法。我的代码要复杂得多,但即使只尝试基本的代码也不起作用。

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>
您可以在此处进行测试:https://editor.p5js.org/jgsantos.dsn/sketches/rUWb6Nurt

此代码在全局模式下运行良好:

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>
你可以在这里测试https://editor.p5js.org/jgsantos.dsn/sketches/_lQcDqOsp

它显示了这个错误:;未捕获引用错误:未定义加载(:第9行(";我做错了什么?提前感谢!

请尝试发布您正在运行的确切代码。您的问题包含的代码与您在评论中发布的链接不同。

但退一步来看,以下是我对实例模式和库的看法:

  • 实例模式意味着属于草图的变量和函数现在通过一个变量引用,在您的情况下是p变量
  • 但是属于的变量和函数仍然被直接引用;"全局模式">

换句话说,您不希望使用实例模式引用load()(或者它是loadSound()?(函数。您仍然应该直接引用该函数,因为它来自库,而不是特定的草图。

最新更新