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

Question

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

现在，我尝试在给定歌曲的波形/振幅与画布中呈现的视觉效果之间创建链接。我一直在尝试从 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 功能，并且只有带有一些简单形状的画布时，它工作得很好。

我使用安装了 P5 npm install --save 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 )。我还尝试实现这个类似问题中给出的一些建议的解决方案（在实例模式下使用 p5.sound.js: 'p5.Amplitude() not a constructor'）。尽管我可能实施不正确，但这些都不起作用。有谁知道如何将 P5.sound 库导入到我的 Vue 项目中？

更新

如果我没有运行该fft= new p5.FFT()行，我注意到的另一个错误是 error ReferenceError: p5 is not defined。每当我尝试导入 P5.sound 库（使用import P5sound from "p5/lib/addons/p5.sound";或 with 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，然后安装了P5.js版本0.9.0：

npm uninstall p5
npm install p5@0.9.0

接下来，在node_modules中找到P5模块后，我复制了P5声音lib文件并将其粘贴到我的项目的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.