javascript - p5.sound.js audioBuffer 未定义

Question

我正在尝试创建一个简单的 Web 界面，该界面由 Node.js 服务器显示，当我按下“开始”按钮时，页面开始从设备麦克风录制音频，当我按下“停止”按钮时，页面停止录音，将音频保存为wav文件。我正在使用 0.10.2 release p5.sound.js 来实现录音机。我在我的 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');
});

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

Answer 1

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

问题出在convertToWav() p5.sound.js 库的辅助函数，当您尝试保存 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这几乎是同样的事情。