vue 通过p5.js实现声音可视化 颜色跟随歌曲图片主色变化

注意：

1. 最好先在https://editor.p5js.org/上写好想要的效果再往vue上移，不过直接在vue上写也行；

2. 关于p5js: 先在global mode下写再转化成 instance mode 比较简单，但直接在 instance mode下写也行；

关于这两种mode： https://github.com/processing/p5.js/wiki/Global-and-instance-mode

3. 关于引入p5js： 用npm会有问题，我是用的cdn, 既要引入p5.js也要引入p5.sound.js

4. http协议下不行哦，要https或者localhost才行

最终代码：

/* eslint-disable */
//p5js代码，看起来和一般的不一样因为是 instance mode 
const s = sketch => {
  //要取得多少个不同频率的音量数据
  const ORI_NUM = 64
  //要显示多少个不同频率的音量数据
  const NUM = 48
  //图案的最长和最短
  const MIN_LENGTH = 112.5
  const MAX_LENGTH = 185
  //那个一条一条的图案的宽高
  const WID = 3
  const HIG = 70
  //最后的颜色再变得亮一点，有多亮
  const WHITE = 20
  //图案里，条的颜色默认值rgba
  let color1 = [255, 255, 255, 180]
  //图案里，面的颜色默认值rgba
  let color2 = [255, 255, 255, 150]
  //存储fft对象
  let fft
  sketch.setup = () => {
    //取得图片dom并载入
    let imgDom = document.querySelector('.middle img')
    sketch.loadImage(imgDom.src, afterLoadImg)
    //要把canvas放到哪个div里面&#