我尝试在Meteor 1.2.1中集成p5.sound.js库
我想在我的模板中使用p5js功能录制音频，但我总是收到错误消息。让我一步一步地告诉你我做了什么：
我已将p5.min.js和p5.sound.js放入Meteor文件夹/client/compatibility/
我想首先使用p5标准Audio Recoding example，然后通过定义保存在Meteor var sketch1;文件中的全局变量global.js来重新设计代码{{ 1}}文件夹，而整个草图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文件中，我使用Meteor onRendered（）函数将草图渲染到模板中。以下是代码段：
client.js
当我尝试运行应用程序时，代码会被渲染并且画布按照预期由p5js构建：
Template.tryaudiolist.onRendered(function() {
console.log("entering onCreated");
var myp5 = new p5(sketch1, "s");
})
但是，当输入onRendered（）函数时（请参阅我的console.log语句<div id="s">
<canvas id="defaultCanvas0" data-hidden="true" width="400" height="400" style="visibility: hidden; width: 400px; height: 400px;"></canvas>
</div>），它会抱怨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()中，它是控制台抱怨的p5对象。
如您所见，我尝试在Meteor中实现标准p5 Record Save Audio example。但还没有成功。
我不知道怎么解决这个问题？这是一个引用错误吗？我是否可能使用错误的语法来访问该对象？
答案 0 :(得分：0)
我终于找到了错误。
我仍然在p5.sound.min.js文件夹中的head.html文件的client引用CDN在线存储库，我在第一次尝试集成p5js时使用了该文件夹我切换到实现Meteor onRendered（）函数。通过删除此引用，sketch1.js最终得到了正确的呈现。
未正确引用saveSound(soundFile, 'mySound.wav')方法。我需要使用s.saveSound(soundFile, 'mySound.wav')