title: How to import and utilize P5.Sound in Vue?
body: <p>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 (<a href="https://medium.com/js-dojo/experiment-with-p5-js-on-vue-7ebc05030d33" rel="nofollow noreferrer">https://medium.com/js-dojo/experiment-with-p5-js-on-vue-7ebc05030d33</a>), I managed to get a Canvas rendered with some cool looking graphics.</p>
  
  <p>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.</p>
  
  <p>Now, my research has indicated that the P5 library must be run in instance mode in order to function (<a href="https://github.com/processing/p5.js/wiki/Global-and-instance-mode" rel="nofollow noreferrer">https://github.com/processing/p5.js/wiki/Global-and-instance-mode</a>), 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. </p>
  
  <p>Here is the code to my model which sets up the P5 objects: </p>
  
  <pre><code>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 = () =&gt; {
      p5.createCanvas(500, 500);
      p5.background(100);
      fft = new p5.FFT();
      fft.setInput("../assets/sawtooth.mp3")
      sound.amp(0.2);
    };
    p5.draw = () =&gt; {
      p5.background(220);
      let spectrum = fft.analyze();
      noStroke();
      fill(255, 0, 255);
      for (let i = 0; i &lt; 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 &lt; 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();
    };
  }
  </code></pre>
  
  <p>Then, in my <code>MusicVisualization.vue</code> component, I call this model in the <code>mounted()</code> section of the component:</p>
  
  <pre><code>import P5 from 'p5';
  var musicVisualizerModel = require("../models/musicVisualizerModel.js");
  
  export default {
    name: "MusicVisualization",
    data(){
        return{
            message: ""
        } 
    },
    mounted() {
      new P5(musicVisualizerModel.main);
    }
  };
  </code></pre>
  
  <p>No matter how I try to import my P5.sound library, the line <code>fft = new p5.FFT()</code> always yields an error <code>p5.FFT is not a constructor</code>. I have checked the P5.js module in my node_modules, and I can clearly see the P5.sound.js library present in the <code>p5/lib/addons/p5.sound</code> 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.</p>
  
  <p>I installed P5 using <code>npm install --save p5</code>, and have tried numerous approaches to getting P5.sound to work, such as the P5-manager package (<a href="https://www.npmjs.com/package/p5-manager/v/0.1.0" rel="nofollow noreferrer">https://www.npmjs.com/package/p5-manager/v/0.1.0</a>) and the Vue-P5 wrapper (<a href="https://www.npmjs.com/package/vue-p5" rel="nofollow noreferrer">https://www.npmjs.com/package/vue-p5</a>). I have also tried implementing some of the proposed solutions given in this similar question (<a href="https://stackoverflow.com/questions/39693208/using-p5-sound-js-in-instance-mode-p5-amplitude-not-a-constructor">Using p5.sound.js in instance mode: &#39;p5.Amplitude() not a constructor&#39;</a>). 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?</p>
  
  <p><strong>UPDATES</strong></p>
  
  <p>Another error that I noticed if I did not run the <code>fft= new p5.FFT()</code> line was the error <code>ReferenceError: p5 is not defined</code>. This error occurred whenever I tried to import the P5.sound library (with either <code>import P5sound from "p5/lib/addons/p5.sound";</code> or with <code>import "p5/lib/addons/p5.sound";</code>). I looked deeper into this problem and found others had experienced it as well (<a href="https://github.com/processing/p5.js-sound/issues/453" rel="nofollow noreferrer">https://github.com/processing/p5.js-sound/issues/453</a>). 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?</p>