如何导入和使用Vue中的P5声音？
我一直在尝试使用Vue和P5制作一个音乐可视化应用程序，在用本文作为向导(https://medium.com/js-dojo/experiment-with-p5-js-on-vue-7ebc05030d33)对P5进行了修改之后，我设法用一些好看的图形渲染了一个画布。
现在，我试图在给定歌曲的波形/振幅与画布中呈现的视觉效果之间建立一个链接。我一直试图从P5声音库中获取构造函数/函数，以从文件路径加载一首歌，然后使用FFT对象的输出来控制画布中的可视化呈现。
现在，我的研究表明，P5库必须以实例模式运行才能运行(https://github.com/processing/p5.js/wiki/Global-and-instance-mode)，并且在Vue项目中我已经尽力坚持这种方法。但是，虽然视觉渲染工作，但没有任何的P5声音功能。
下面是我的模型的代码，它设置了P5对象：
import P5 from 'p5';
import P5sound from "p5/lib/addons/p5.sound";
let p5;
let fft;
let sound;
export function main(_p5) {
p5 = _p5;
p5.setup = () => {
p5.createCanvas(500, 500);
p5.background(100);
fft = new p5.FFT();
fft.setInput("../assets/sawtooth.mp3")
sound.amp(0.2);
};
p5.draw = () => {
p5.background(220);
let spectrum = fft.analyze();
noStroke();
fill(255, 0, 255);
for (let i = 0; i < spectrum.length; i++) {
let x = map(i, 0, spectrum.length, 0, width);
let h = -height + map(spectrum[i], 0, 255, height, 0);
rect(x, height, width / spectrum.length, h);
}
let waveform = fft.waveform();
noFill();
beginShape();
stroke(20);
for (let i = 0; i < waveform.length; i++){
let x = map(i, 0, waveform.length, 0, width);
let y = map( waveform[i], -1, 1, 0, height);
vertex(x,y);
}
endShape();
};
}然后，在我的MusicVisualization.vue组件中，我在组件的mounted()部分中调用这个模型：
import P5 from 'p5';
var musicVisualizerModel = require("../models/musicVisualizerModel.js");
export default {
name: "MusicVisualization",
data(){
return{
message: ""
}
},
mounted() {
new P5(musicVisualizerModel.main);
}
};无论我如何导入我的P5声音库，行fft = new p5.FFT()总是会产生一个错误p5.FFT is not a constructor。我已经在我的node_modules中检查了P5.js模块，我可以清楚地看到P5.sound.js库存在于p5/lib/addons/p5.sound文件路径中，但是我不能利用它的任何功能。我应该注意，当我从模型的代码中删除所有P5声音功能，并且只有一个带有一些简单形状的画布时，它工作得很好。
我使用P5安装了npm install --save p5，并尝试过许多方法来使P5声音正常工作，例如P5管理器包(https://www.npmjs.com/package/p5-manager/v/0.1.0)和Vue-P5包装器(https://www.npmjs.com/package/vue-p5)。我还尝试实现了在这个类似问题(在实例模式中使用p5.sound.js：‘p5.放()不是构造函数’)中提出的一些解决方案。所有这些工作都没有，尽管我可能实现得不正确。有人知道如何将P5声音库导入到我的Vue项目中吗？
更新
如果不运行fft= new p5.FFT()行，我注意到的另一个错误是错误ReferenceError: p5 is not defined。每当我试图导入P5声音库(使用import P5sound from "p5/lib/addons/p5.sound";或import "p5/lib/addons/p5.sound";)时，都会发生此错误。我深入研究了这个问题，发现其他人也经历过这个问题(https://github.com/processing/p5.js-sound/issues/453)。显然，一个用户通过“降级到0.9，将sound.js复制到项目文件夹中，升级到1.0，并将导入链接到本地的0.9版本的声音”来解决这个问题。不幸的是，我不知道如何执行这一解决办法。有人知道怎么做吗？
回答 3
Stack Overflow用户
发布于 2020-05-24 17:41:03
感谢我在Github问题页面(https://github.com/processing/p5.js-sound/issues/453)上得到的帮助，我想出了如何导入P5声音库。
首先，我在node_modules中卸载了P5.js，然后安装了P5.js版本0.9.0：
npm uninstall p5
npm install p5@0.9.0接下来，在P5模块位于node_modules中之后，我复制了P5声音库文件并将其粘贴到项目的src目录中，然后将import P5sound from "p5/lib/addons/p5.sound"替换为import "../p5.sound.js" (它表示我的相对文件路径)。然后，我使用以下命令在终端中安装了P5.js的最新版本：
npm install p5@1现在，我可以导入声音库，而不需要错误ReferenceError: p5 is not defined或p5.FFT is not a constructor。
Stack Overflow用户
发布于 2021-12-11 11:45:55
问题是p5声音依赖于全球范围内的p5。
如果你在使用webpack，这可以很容易地通过webpack的ProvidePlugin解决，如下所示：
plugins: [
new webpack.ProvidePlugin({
p5: 'p5',
})
]那么您应该能够通过以下方式导入：
import p5 from 'p5';
import 'p5/lib/addons/p5.sound';Stack Overflow用户
发布于 2021-08-11 03:50:02
我在使用p5时遇到了类似的问题，但是我能够(暂时)通过在我的html文件中包含p5脚本来实现这个工作。
<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/addons/p5.sound.min.js"></script>然后，当在React中创建p5实例时，我调用：
new window.p5(sketch, node);我的草图文件看起来像是：
const sketch = (p, props) => {
p.preload = () => {
...
};
p.setup = function () {
...
};
p.draw = () => {
...
};
};
export default sketch;在我的草图逻辑中，我为标准的p5.js功能使用实例p变量，比如绘图形状。每当我需要使用p5类的构造函数(如AudioIn、Amplitude、SoundFile等)时，我就使用全局p5变量创建它。例如：
new window.p5.AudioIn()我认为这是必要的，因为p5声音插件库将函数和类添加到全局p5变量中。当我使用es6导入时，肯定有一些混乱，因为声音副词没有正确地添加到导入的p5类中。
总有一天，p5.js会有一个更好的es6模块系统，但这似乎对我有好处。
https://stackoverflow.com/questions/61985249
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号