如何在Vue中导入和利用P5.Sound?

本文介绍了如何在Vue中导入和利用P5.Sound?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在尝试使用Vue和P5制作音乐可视化器应用程序，并在使用本文作为指导对P5进行修改之后( https://medium.com/js-dojo/experiment-with-p5-js-on-vue-7ebc05030d33 )，我设法用一些很酷的图形渲染了一个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 ).我还尝试实现了类似问题中给出的一些建议的解决方案().尽管我可能执行不正确，但是这些工作均无效.有人知道如何将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://github.com/processing/p5.js-sound/issues/453 )，我想出了如何导入P5.sound库./p>

首先，我在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.

I have been trying to make a music visualizer app using Vue and P5, and after tinkering with P5 using this article as my guide (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 [email protected]

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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！