如何在Vue中导入和使用P5.Sound？

Question

[我一直试图使用Vue和P5制作音乐可视化器应用程序，并在以本文为指导（https://medium.com/js-dojo/experiment-with-p5-js-on-vue-7ebc05030d33）修补P5之后，我设法用一些很酷的图形渲染了Canvas。

现在，我正在尝试在给定歌曲的波形/幅度与画布上呈现的视觉效果之间建立链接。我一直在尝试从P5.sound库获取构造函数/函数，以从文件路径加载歌曲，然后使用FFT对象的输出来控制画布中的视觉效果。

现在，我的研究表明P5库必须在实例模式下运行才能起作用（https://github.com/processing/p5.js/wiki/Global-and-instance-mode），我在Vue项目中竭尽全力坚持这种方法。但是，尽管视觉渲染有效，但是P5.sound的功能都没有。

这是我的模型中设置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.sound库，fft = new p5.FFT()行始终会产生错误p5.FFT is not a constructor。我已经在node_modules中检查了P5.js模块，并且可以清楚地看到p5/lib/addons/p5.sound文件路径中存在P5.sound.js库，但是我无法利用其任何功能。我应该注意，当我从模型的代码中删除所有P5.sound功能时，只有具有一些简单形状的画布，它可以正常工作。

[我使用npm install --save p5安装了P5，并尝试了许多使P5.sound正常工作的方法，例如P5-manager软件包（https://www.npmjs.com/package/p5-manager/v/0.1.0）和Vue-P5包装器（https://www.npmjs.com/package/vue-p5）。我也尝试过实施类似问题（Using p5.sound.js in instance mode: 'p5.Amplitude() not a constructor'）中给出的一些建议解决方案。尽管我可能执行不正确，但这些工作均无效。有人知道如何将P5.sound库导入我的Vue项目吗？

更新

[我未运行fft= new p5.FFT()行时发现的另一个错误是错误ReferenceError: p5 is not defined。每当我尝试导入P5.sound库（使用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版本的声音”解决了该问题。可悲的是，我不确定如何执行此解决方案。有人知道吗？

Answer 1

感谢我在Github问题页面（https://github.com/processing/p5.js-sound/issues/453）上获得的帮助，我弄清楚了如何导入P5.sound库。

首先，我在node_modules中卸载了P5.js，然后安装了0.9.0版的P5.js：

npm uninstall p5
npm install [email protected]

[接下来，在node_modules中找到P5模块后，我复制了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。