p5.sound实现音乐音频声音可视化圆点动画效果代码-html代码-BFW代码库

p5.sound实现音乐音频声音可视化圆点动画效果代码

代码语言：html

所属分类：多媒体

代码描述：p5.sound实现音乐音频声音可视化圆点动画效果代码，点击鼠标可暂停继续播放。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          margin: 0;
          padding: 0;
          height: 100vh;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          background: black;
        }
    </style>




</head>

<body >



<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.sound.0.7.3.js"></script>
    <script >
      //click mouse to start
//press key to reset to worm-like entity
let kitty; //class picked song name
let playBool = false;
let sArray = []; //array of dancing circles
let spectrum;
let waves;
let fft;
let t = 0;
let n = 200;
function preload() {
  userStartAudio();
  //track created on soundtrap w/loops to test code
  kitty = loadSound("//repo.bfw.wiki/bfwrepo/sound/62576dd63ca35.mp3");
}
function setup() {
  sArray = [];
  createCanvas(windowWidth, windowHeight);
  background(100);
  kitty.amp(0.4); //how loud?
  fft = new p5.FFT(); //creates sound array analyze
  spectrum = fft.analyze();
  for (let i = 0; i < spectrum.length; i++) {
    sArray.push(new dots(i));
  }
}

function draw() {
  translate(width / 2, height / 2);
  if (playBool) {
    t += 0.001;

    if (!kitty.isPlaying()) {
      kitty.play();
    }
 .........完整代码请登录后点击上方下载按钮下载查看