Question

我正在尝试创建一个简单的Web界面，该界面由Node.js服务器显示，当我按下“开始”按钮时，该页面开始从设备麦克风录制音频，而当我按下“停止”按钮，页面将停止录制并将音频另存为wav文件。我正在使用p5.sound.js的0.10.2 release来实现记录器。我在HTML文件正文的底部都使用了p5.js和p5.sound.js作为脚本：

<script src='./js/p5.js'>
<script src='./js/p5.sound.js'>
<script src='./js/main.js'>

脚本文件已下载并保存在本地文件夹中。这是main.js：

'use strict';

let mic, recorder, soundFile;

const start = document.querySelector('button#start');   
const stop = document.querySelector('button#stop');

start.addEventListener('click', () => {
    // initialization
    mic = new p5.AudioIn();                 // create an audio in
    mic.start();                            // enable mic

    recorder = new p5.SoundRecorder();      // create a sound recorder
    recorder.setInput(mic);                 // connect the mic to the recorder

    soundFile = new p5.SoundFile();         // create an empty sound file

    // start recording
    recorder.record(soundFile);             
    console.log('Recording audio');
});

stop.addEventListener('click', () => {
    recorder.stop();                        // stop recorder, and send the result to soundFile
    console.log('Recording stopped');
    soundFile.save('test.wav');
});

该代码主要基于p5.js网站中的example。但是，当我运行页面并单击“停止”按钮时，控制台将显示TypeError: audioBuffer is undefined。我不确定问题出在哪里，因为当我检查脚本文件时，似乎在其中定义了audioBuffer。

Answer 1

听起来有些奇怪，但是 p5.js 的实现要求您实例化其类以使其正常工作。

问题出在 p5.sound.js 库的convertToWav()帮助程序函数中，该函数在您尝试保存soundFile且未定义audioBuffer时调用。我仍然不知道为什么。

感谢p5.js issue，我能够像这样保存文件：

new p5().save(soundFile, 'test.wav');

或具有全局实例化：

new p5();
...
saveSound(soundFile, 'test.wav');

也许不考虑遵循最佳编码实践是从Processing文化继承而来的，该文化主要是为真正不关心 JavaScript 范围污染的艺术家设计的。

或者soundFile.save的文档示例不够清晰。

另请参阅this Processing forum post，它说的差不多。

p5.sound.js audioBuffer未定义

1 个答案: