javascript - p5js AudioIn 函数在实例模式下不起作用

问题描述

我正在将我的 p5js 代码转换为实例模式以在同一个 DOM 中运行 2 个画布，但我的p5.AudioIn()函数不起作用。我得到的错误是引用Failed to construct 'AudioWorkletNode'. 我上传了下面错误的屏幕截图，因为它有更多信息。为什么AudioIn转换为实例模式时不起作用但在全局模式下起作用。

let s2 = function(sketch) {
  sketch.quinnListenMic;

  sketch.setup = function() {
    let cnv = sketch.createCanvas(300, 300);
    cnv.mousePressed(sketch.userStartAudio);
    sketch.quinnListenMic = new p5.AudioIn(); //ERROR HERE
    sketch.quinnListenMic.start();
  }

  sketch.draw = function() {

    sketch.background(100)

    sketch.micLevel = quinnListenMic.getLevel();
    console.log(micLevel)

  }

}

var myp5_2 = new p5(s2);

<html>

<head>
  <script defer src=https://cdn.JsDelivr.net/npm/p5></script>
  <script defer src=https://cdn.JsDelivr.net/npm/p5/lib/addons/p5.dom.min.js></script>
  <script defer src=https://cdn.JsDelivr.net/npm/p5/lib/addons/p5.sound.min.js></script>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
</head>

<body>
</body>

</html>

标签： javascriptinstancep5.js

有几个问题，在下面用评论修复：

let s2 = function(sketch) {
  // sketch.quinnListenMic; doesn't make sense. 1) You don't want to store your variables on the p5 instance, and 2) that statement doesn't actually do anything
  // This is how you declare a local variable for use in setup/draw functions:
  let quinnListenMic;

  sketch.setup = function() {
    let cnv = sketch.createCanvas(300, 300);
    cnv.mousePressed(sketch.userStartAudio);
    quinnListenMic = new p5.AudioIn(); //ERROR HERE
    quinnListenMic.start();
  }

  sketch.draw = function() {
    // Fixed local variable declaration again
    // Note: there is a bug with AudioIn.getLevel not working in all browsers
    let micLevel = quinnListenMic.getLevel();
    // Let's not spam the console log
    // console.log(micLevel)
    sketch.background(sketch.map(micLevel, 0, 1, 0, 255));
  }
}

var myp5_2 = new p5(s2);

<html>

<head>
  <!-- Your script tags were not valid -->
  <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
  <!-- For some reason p5.sound does not work with the defer attribute -->
  <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/addons/p5.sound.min.js"></script>
</head>

<body>
</body>

</html>

javascript - p5js AudioIn 函数在实例模式下不起作用

问题描述

解决方案

推荐阅读