在 Meteor 中集成 p5.sound.js：p5.AudioIn() 不是构造函数

Question

我尝试在 Meteor 1.2.1 中集成 p5.sound.js 库

我想使用 p5js 功能在我的模板中录制音频，但我总是收到错误消息。让我一步一步地告诉你我是怎么做的：

集成 p5 库

我已经把p5.min.js和p5.sound.js放到了Meteor文件夹/client/compatibility/

录音小品

我想先从 p5 标准开始 Audio Recoding example 并通过定义全局变量 var sketch1; 稍微重新设计了代码，该变量保存在 Meteor 中名为 global.js 的文件中lib 文件夹，而整个草图 sketch1.js 仅保存在 client 文件夹中。这是我的草图的样子：

/////////////////
///p5js tryaudio recording
/////////////////
sketch1 = function(s){
  var mic, recorder, soundFile;

  var state = 0; // mousePress will increment from Record, to Stop, to Play

  s.setup = function() {
    s.createCanvas(400,400);
    s.background(200);
    s.fill(0);
    s.text('Enable mic and click the mouse to begin recording', 20, 20);

    // create an audio in
    mic = new p5.AudioIn();

    // users must manually enable their browser microphone for recording to work properly!
    mic.start();

    // create a sound recorder
    recorder = new p5.SoundRecorder();

    // connect the mic to the recorder
    recorder.setInput(mic);

    // create an empty sound file that we will use to playback the recording
    soundFile = new p5.SoundFile();
  }

  s.mousePressed = function() {
    // use the '.enabled' boolean to make sure user enabled the mic (otherwise we'd record silence)
    if (state === 0 && mic.enabled) {

      // Tell recorder to record to a p5.SoundFile which we will use for playback
      recorder.record(soundFile);

      s.background(255,0,0);
      s.text('Recording now! Click to stop.', 20, 20);
      state++;
    }

    else if (state === 1) {
      recorder.stop(); // stop recorder, and send the result to soundFile

      s.background(0,255,0);
      s.text('Recording stopped. Click to play & save', 20, 20);
      state++;
    }

    else if (state === 2) {
      soundFile.play(); // play the result!
      saveSound(soundFile, 'mySound.wav'); // save file
      state++;
    }
  }
}

正在将草图整合到模板中

我的模板名为 tryaudiolist.html，它只是将草图集成到带有 id="s" 的 <div> 标签中，如下所示：

<template name="tryaudiolist">
   <div class="container">
    <div class="row">
     <div class="col-md-12">
      <p>the sketch works here: </p>
     </div>
     <div id="s"></div>
    </div>

   </div>
</template>

client.js 文件

在 client.js 文件中，我使用 Meteor onRendered() 函数将草图渲染到模板中。这是代码片段：

Template.tryaudiolist.onRendered(function() {
     console.log("entering onCreated");
     var myp5 = new p5(sketch1, "s");
    
})

控制台错误

当我尝试运行应用程序时，代码被渲染并且 canvas 按预期由 p5js 构建：

<div id="s">
  <canvas id="defaultCanvas0" data-hidden="true" width="400" height="400"     style="visibility: hidden; width: 400px; height: 400px;"></canvas>
</div>

但是，当输入 onRendered() 函数时（参见我的 console.log 语句 client.js:37 entering onCreated），它会抱怨 p5.AudioIn() 方法：

sketch1.js:1 Uncaught SyntaxError: Unexpected token <
client.js:37 entering onCreated
debug.js:41 Exception from Tracker afterFlush function:
debug.js:41 Error: error connecting to node: [object GainNode]
    at ScriptProcessorNode.AudioNode.connect (p5.sound.js:2976)
    at new p5.Amplitude (p5.sound.js:2229)
    at new p5.AudioIn (p5.sound.js:6327)
    at s.setup (sketch1.js:17)
    at .<anonymous> (p5.min.js:5)
    at .<anonymous> (p5.min.js:5)
    at new o (p5.min.js:5)
    at .<anonymous> (client.js:38)
    at template.js:116
    at Function.Template._withTemplateInstanceFunc (template.js:457)
sketch1.js:34 Uncaught TypeError: Cannot read property 'enabled' of undefined

这里的s.setup (sketch1.js:17)指的是我的对象定义mic = new p5.AudioIn();也不例外。同样在 sketch1.js:34 Uncaught TypeError: Cannot read property 'enabled' of undefined 中，它无法识别 mic 被实例化为 p5.AudioIn() 对象。最后在 .<anonymous> (client.js:38) 中是控制台抱怨的 p5 对象。

总结

如您所见，我尝试在 Meteor 中实现标准 p5 Record Save Audio example。但还没有成功。

我不知道如何解决这个问题？是引用错误吗？我是否可能使用了错误的语法来访问该对象？

Answer 1

我终于找到了我的错误。

我在第一次尝试使用的 client 文件夹中的 head.html 文件中仍然有对 p5.sound.min.js 的 CDN 在线存储库的引用在我切换到实现 Meteor onRendered() 函数之前集成 p5js。通过删除此引用，sketch1.js 最终得到正确呈现。
未正确引用 saveSound(soundFile, 'mySound.wav') 方法。我需要使用 s.saveSound(soundFile, 'mySound.wav')

在 Meteor 中集成 p5.sound.js：p5.AudioIn() 不是构造函数

Integrating p5.sound.js in Meteor: p5.AudioIn() is not a constructor

javascript

audio

meteor

p5.js