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

最新推荐文章于 2025-03-09 12:39:31 发布

原创

最新推荐文章于 2025-03-09 12:39:31 发布 · 2.9k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #vue.js #前端 #可视化

本文介绍了如何在Vue项目中利用p5.js库创建声音可视化效果，并且颜色能够根据歌曲主色变化。建议先在p5.js编辑器完成基本效果后再移植到Vue。在Vue中使用p5.js需要注意全局与实例模式的选择，以及通过CDN引入p5.js和p5.sound.js库。必须在HTTPS环境下运行或本地开发。同时，要监听歌曲变化并激活audioContext。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：

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里面，