时间戳

首页 > 解决方案 > 如何在实例模式下使用 p5.js 声音

javascript - 如何在实例模式下使用 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

它显示此错误：“未捕获的 ReferenceError：未定义负载（：第 9 行）”我做错了什么？提前致谢！

标签： javascriptaudioinstancep5.js

解决方案

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

但退后一步，这是我对实例模式和库的看法：

  • 实例模式意味着属于草图的变量和函数现在通过变量引用，在您的情况下是p变量。
  • 但是属于库的变量和函数仍然被直接引用，即在“全局模式”中。

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

推荐阅读