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

Question

我一直在尝试使用 Vue 和 P5 制作一个音乐可视化应用程序，在使用这篇文章作为我的指南(https://medium.com/js-dojo/experiment-with-p5-js-on-vue-7ebc05030d33)对 P5 进行修补之后，我设法获得了一个带有一些看起来很酷的图形的 Canvas 。

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

现在，我的研究表明 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 功能，并且只有一个带有一些简单形状的 Canvas 时，它工作正常。

我使用 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，然后安装了P5.js 0.9.0版本:

npm uninstall p5
npm install p5@0.9.0

接下来，在 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。