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




撒科打诨
浏览 91回答 1
1回答

拉风的咖菲猫

请尝试发布您正在运行的确切代码。您的问题包含与您在评论中发布的链接不同的代码。但退一步来说,我对实例模式和库的看法如下:实例模式意味着属于草图的变量和函数现在通过变量(在您的情况下是变量)引用p。但是属于库的变量和函数仍然被直接引用,即在“全局模式”下。换句话说,您不想使用实例模式引用load()(或者是吗loadSound()?)函数。您仍然应该直接引用该函数,因为它来自库而不是特定的草图。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript