如何在Vue中导入和利用P5.Sound? [英] How to import and utilize P5.Sound in Vue?

问题描述

我一直在尝试使用Vue和P5制作音乐可视化器应用程序，并在使用本文作为指导对P5进行修改之后(

然后，在我的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/vue-p5 ).我还尝试实现了类似问题中给出的一些建议的解决方案().尽管我可能执行不正确，但是这些工作均无效.有人知道如何将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版本的声音"解决了该问题.可悲的是，我不确定如何执行此解决方案.有人知道吗?

解决方案

感谢我在Github问题页面上收到的帮助(https://medium.com/js-dojo/experiment-with-p5-js-on-vue-7ebc05030d33), I managed to get a Canvas rendered with some cool looking graphics.

Now, I am trying to create a link between the waveform/amplitude of a given song and the visuals rendered in the canvas. I have been trying to get the constructors/functions from the P5.sound library to load a song from a file path, and then use the output from a FFT object to control the visuals rendering in the canvas.

Now, my research has indicated that the P5 library must be run in instance mode in order to function (https://github.com/processing/p5.js/wiki/Global-and-instance-mode), and I have done my very best to adhere to this approach in my Vue project. But although the visual rendering works, none of the P5.sound functionalities do.

Here is the code to my model which sets up the P5 objects:

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();
  };
}

Then, in my MusicVisualization.vue component, I call this model in the mounted() section of the component:

import P5 from 'p5';
var musicVisualizerModel = require("../models/musicVisualizerModel.js");

export default {
  name: "MusicVisualization",
  data(){
      return{
          message: ""
      } 
  },
  mounted() {
    new P5(musicVisualizerModel.main);
  }
};

No matter how I try to import my P5.sound library, the line fft = new p5.FFT() always yields an error p5.FFT is not a constructor. I have checked the P5.js module in my node_modules, and I can clearly see the P5.sound.js library present in the p5/lib/addons/p5.sound file path, but I cannot utilize any of its functionality. I should note that when I remove all P5.sound functionality from the model's code, and only have a canvas with some simple shapes, it works fine.

I installed P5 using npm install --save p5, and have tried numerous approaches to getting P5.sound to work, such as the P5-manager package (https://www.npmjs.com/package/p5-manager/v/0.1.0) and the Vue-P5 wrapper (https://www.npmjs.com/package/vue-p5). I have also tried implementing some of the proposed solutions given in this similar question (Using p5.sound.js in instance mode: 'p5.Amplitude() not a constructor'). None of these work, although I may be implementing incorrectly. Does anybody know how I can import the P5.sound library into my Vue project?

UPDATES

Another error that I noticed if I did not run the fft= new p5.FFT() line was the error ReferenceError: p5 is not defined. This error occurred whenever I tried to import the P5.sound library (with either import P5sound from "p5/lib/addons/p5.sound"; or with import "p5/lib/addons/p5.sound";). I looked deeper into this problem and found others had experienced it as well (https://github.com/processing/p5.js-sound/issues/453). Apparently, one user resolved the issue by "downgrading to 0.9, copying the sound.js into project folder, boosted back into 1.0 and just linked imports to the local, 0.9 version of sound." Sadly, I am unsure how to carry out this solution. Would anybody know how?

解决方案

Thanks to help I received on the Github issues page (https://github.com/processing/p5.js-sound/issues/453), I figured out how to get the P5.sound library to import.

First, I uninstalled the P5.js in the node_modules, then installed P5.js version 0.9.0:

npm uninstall p5
npm install p5@0.9.0

Next, after locating the P5 module in node_modules, I copied the P5 sound lib file and pasted it into my project's src directory, and then replaced the import P5sound from "p5/lib/addons/p5.sound" with import "../p5.sound.js" (which represented my relative file path). Then I installed the latest version of P5.js in the terminal with the following command:

npm install p5@1

And now I can import the sound library without getting the errors ReferenceError: p5 is not defined or p5.FFT is not a constructor.

这篇关于如何在Vue中导入和利用P5.Sound?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！