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

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

本文关键字:p5 js sound 集成 构造函数 Meteor AudioIn      更新时间:2023-09-26

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

我想用p5js功能在我的模板中录制Audio,但我总是收到一条错误消息。让我一步一步地告诉你我做什么:

  1. 集成p5库

我已将p5.min.jsp5.sound.js放入Meteor文件夹/client/compatibility/

  1. 录音草图

我想先从p5标准的Audio Recoding示例开始,只是通过定义全局变量var sketch1;来重新设计代码,该变量保存在Meteor lib文件夹中名为global.js的文件中,而整个草图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++;
    }
  }
}

  1. 将草图集成到模板中

我的模板名为tryaudiolist.html,它只是将<div>标签中的草图与id="s"集成在一起,如下所示:

<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>

  1. client.js文件

client.js文件中,我使用Meteor onRendered()函数将草图渲染到模板中。以下是代码片段:

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

  1. 控制台中的错误

当我尝试运行应用程序时,代码会被渲染,画布会像预期的那样由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对象。

  1. 摘要

正如您所看到的,我尝试在Meteor中实现标准的p5记录保存音频示例。但尚未成功。

我不知道该怎么解决?这是引用错误吗?我可能使用了错误的语法来访问对象吗?

我终于发现了自己的错误。

  1. client文件夹中的head.html文件中,我仍然引用了p5.sound.min.js的CDN在线存储库,在我切换到实现Meteor-onRendered()函数之前,我第一次尝试集成p5js时使用了该存储库。通过删除此引用,sketch1.js最终得到了正确的渲染。

  2. CCD_ 26方法没有被正确引用。我需要使用s.saveSound(soundFile, 'mySound.wav') 通过p5对象调用它