AI-Generated Audio Visualizer Website

Ever wanted to build your own audio visualizer website without writing code from scratch? In this post, I’ll show you how I created a stunning music visualizer using AI (ChatGPT) and the p5.js Web Editor — all for free and without any login!

Watch the full tutorial on YouTube: https://youtu.be/l9tc1fbVB0c?si=mra_aBK_ZwELGRLk

📋 Steps to Follow:

Open Google and search for "p5.js web editor"
Go to editor.p5js.org – it's free and doesn’t require login
Select the index.html file
Copy the code and paste it
Now hit the Play button to run your visualizer
Upload multiple audio files and enjoy the experience!

Prompt

A cosmic, interactive music visualization scene created with Web Audio API and p5.js. A glowing, color-shifting abstract blob pulsates in the center of the screen, synchronized with the bass frequencies of uploaded audio files. Soft HSB-colored strokes form multiple rotating organic layers, creating a fluid, alien-like energy blob. Faint animated particles burst gently from the blob's edge. A subtle field of floating stars in the background creates a dreamy space-like atmosphere. Users can upload multiple audio files into a playlist UI on the side, and click the central blob to play/pause music. The UI is minimal, semi-transparent, and styled with neon-glow aesthetics on a dark theme. A white play/pause icon gently rotates at the center of the blob. The entire experience is smooth, dynamic, and responsive to music and user interaction.

Index.html (preview code)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Music Blob with Playlist (Web Audio API)</title>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.8/lib/p5.min.js"></script>
  <style>
    /* --- Your original styles remain unchanged --- */
    #upload {
      position: fixed;
      top: 20px;
      left: 20px;
      z-index: 10;
      background: rgba(255 255 255 / 0.1);
      border: 1.5px solid rgba(255 255 255 / 0.3);
      color: #eee;
      padding: 8px 14px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-weight: 600;
      font-size: 14px;
      border-radius: 6px;
      cursor: pointer;
    }
    #upload::-webkit-file-upload-button {
      visibility: hidden;
    }
    #upload::before {
      content: 'Choose Music';
      display: inline-block;
      background: transparent;
      padding: 4px 10px;
    }
    body {
      margin: 0;
      overflow: hidden;
      background: #121212;
      color: #eee;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    canvas {
      display: block;
    }
    #playlist {
      position: fixed;
      top: 60px;
      left: 20px;
      width: 250px;
      max-height: 60vh;
      overflow-y: auto;
      background: rgba(255 255 255 / 0.05);
      border: 1px solid rgba(255 255 255 / 0.2);
      border-radius: 8px;
      padding: 8px;
      z-index: 10;
    }
    #playlist div.track {
      padding: 8px;
      margin-bottom: 4px;
      background: rgba(255 255 255 / 0.1);
      border-radius: 5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      user-select: none;
    }
    #playlist div.track:hover {
      background: rgba(255 255 255 / 0.2);
    }
    #playlist div.track.active {
      background: #66ccff;
      color: #121212;
      font-weight: bold;
    }
    #playlist button {
      background: transparent;
      border: none;
      color: inherit;
      font-size: 14px;
      cursor: pointer;
      padding: 0 6px;
    }
  </style>
</head>
<body>
  <input type="file" id="upload" accept="audio/*" multiple />
  <div id="playlist"></div>

  <script>
    let t = 0;
    let stars = [];
    let particles = [];
    let uploaded = false;
    let playing = false;
    let blobPoints = [];

    let playIconUrl = 'https://img.icons8.com/ios-filled/100/ffffff/play--v1.png';
    let pauseIconUrl = 'https://img.icons8.com/ios-filled/100/ffffff/pause--v1.png';
    let currentIcon;
    let playIcon, pauseIcon;

    let audioCtx, analyser, audioElement, sourceNode;
    let freqData;

    let audioList = [];
    let currentAudioIndex = -1;

    function preload() {
      playIcon = loadImage(playIconUrl);
      pauseIcon = loadImage(pauseIconUrl);
      currentIcon = playIcon;
    }

    function setup() {
      createCanvas(windowWidth, windowHeight);
      colorMode(HSB, 360, 100, 100, 100);
      noFill();

      audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      analyser = audioCtx.createAnalyser();
      analyser.fftSize = 1024;
      freqData = new Uint8Array(analyser.frequencyBinCount);

      for (let i = 0; i < 200; i++) {
        stars.push({
          x: random(-width, width),
          y: random(-height, height),
          size: random(1, 3),
          alpha: random(20, 80)
        });
      }

      document.getElementById('upload').addEventListener('change', handleFiles);
    }

    function handleFiles(evt) {
      const files = evt.target.files;
      for (let file of files) {
        if (file.type.includes('audio')) {
          audioList.push({
            name: file.name,
            url: URL.createObjectURL(file)
          });
        }
      }
      if (audioList.length > 0 && currentAudioIndex === -1) {
        setCurrentAudio(0);
      }
      updatePlaylistUI();
    }

    function setCurrentAudio(index) {
      if (audioElement) {
        audioElement.pause();
        audioElement.remove();
        sourceNode.disconnect();
      }

      currentAudioIndex = index;
      const fileURL = audioList[index].url;

      audioElement = new Audio(fileURL);
      audioElement.loop = true;
      audioElement.crossOrigin = "anonymous";

      sourceNode = audioCtx.createMediaElementSource(audioElement);
      sourceNode.connect(analyser);
      analyser.connect(audioCtx.destination);

      audioElement.play();
      uploaded = true;
      playing = true;
      currentIcon = pauseIcon;
      updatePlaylistUI();
    }

    function updatePlaylistUI() {
      const list = document.getElementById('playlist');
      list.innerHTML = '';
      audioList.forEach((item, i) => {
        const div = document.createElement('div');
        div.className = 'track' + (i === currentAudioIndex ? ' active' : '');
        div.textContent = item.name;
        div.onclick = () => setCurrentAudio(i);
        const btn = document.createElement('button');
        btn.textContent = '❌';
        btn.onclick = (e) => {
          e.stopPropagation();
          audioList.splice(i, 1);
          if (i === currentAudioIndex) {
            if (audioElement) {
              audioElement.pause();
              audioElement.remove();
              sourceNode.disconnect();
            }
            currentAudioIndex = -1;
            uploaded = false;
            playing = false;
            currentIcon = playIcon;
            if (audioList.length > 0) {
              setCurrentAudio(0);
            }
          }
          updatePlaylistUI();
        };
        div.appendChild(btn);
        list.appendChild(div);
      });
    }

    function togglePlayPause() {
      if (!audioElement) return;
      if (playing) {
        audioElement.pause();
        playing = false;
        currentIcon = playIcon;
      } else {
        audioElement.play();
        playing = true;
        currentIcon = pauseIcon;
      }
      updatePlaylistUI();
    }

    function draw() {
      background(240, 30, 5, 10);

      push();
      translate(width / 2, height / 2);
      for (let s of stars) {
        noStroke();
         fill(0, 0, 100, s.alpha);
        ellipse(s.x, s.y, s.size);
      }
      pop();

      if (!uploaded) {
        textAlign(CENTER, CENTER);
        textSize(24);
        text("Upload music files to start 🎶", width / 2, height / 2);
        return;
      }

      analyser.getByteFrequencyData(freqData);
      let bass = 0;
      for (let i = 0; i < 20; i++) bass += freqData[i];
      bass /= 20;

      let hue = (frameCount * 0.5) % 360;
      stroke(hue, 100, 100, 80);
      strokeWeight(2);

      translate(width / 2, height / 2);
      rotate(sin(t * 0.5) * 0.5);
      blobPoints = [];

      for (let layer = 0; layer < 5; layer++) {
        beginShape();
        for (let a = 0; a < TWO_PI; a += 0.1) {
          let rBase = 150 + layer * 3 + map(bass, 0, 255, -10, 30);
          let offset = map(noise(a * 3 + t + layer), 0, 1, -20, 20);
          let angleToMouse = atan2(mouseY - height / 2, mouseX - width / 2);
          let pull = map(cos(a - angleToMouse), -1, 1, -10, 10);
          let r = rBase + offset;
          if (dist(mouseX, mouseY, width / 2, height / 2) < 300) {
            r += pull * 1.5;
          }
          let x = r * cos(a);
          let y = r * sin(a);
          if (layer === 2) blobPoints.push(createVector(x, y));
          vertex(x, y);
        }
        endShape(CLOSE);
      }

      if (frameCount % 4 === 0) {
        for (let i = 0; i < 3; i++) {
          let p = random(blobPoints);
          particles.push({
            pos: createVector(p.x, p.y),
            vel: p5.Vector.random2D().mult(random(1, 3)),
            life: 60,
            hue: hue
          });
        }
      }

      for (let i = particles.length - 1; i >= 0; i--) {
        let p = particles[i];
        stroke(p.hue, 100, 100, map(p.life, 0, 60, 0, 100));
        point(p.pos.x, p.pos.y);
        p.pos.add(p.vel);
        p.life--;
        if (p.life <= 0) particles.splice(i, 1);
      }

      push();
      rotate(-sin(t * 0.5) * 0.5);
      imageMode(CENTER);
      tint(255, 220);
      image(currentIcon, 0, 0, 80, 80);
      pop();

      t += 0.01;
    }

    function mouseClicked() {
      if (dist(mouseX, mouseY, width / 2, height / 2) < 60 && audioElement) {
        togglePlayPause();
      }
    }

    function windowResized() {
      resizeCanvas(windowWidth, windowHeight);
    }
  </script>
</body>
</html>

Version generated by ChatGPT

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Cosmic Audio Visualizer</title>
  <style>
    body {
      margin: 0;
      background: black;
      overflow: hidden;
      font-family: 'Orbitron', sans-serif;
    }
    #ui {
      position: absolute;
      top: 20px;
      left: 20px;
      color: white;
      background: rgba(0,0,0,0.5);
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0 0 10px #0ff;
    }
    input[type=file] {
      color: #0ff;
    }
  </style>
</head>
<body>

<div id="ui">
  <input type="file" id="upload" multiple accept="audio/*">
  <div id="playlist"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/addons/p5.sound.min.js"></script>
<script>
let fft, amp, audio, files = [], currentTrack = 0, playing = false;
let blobRotation = 0, starfield = [];

function preload() {
  // Optional preload for visuals
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  fft = new p5.FFT();
  amp = new p5.Amplitude();

  for (let i = 0; i < 200; i++) {
    starfield.push(createVector(random(width), random(height)));
  }

  document.getElementById('upload').addEventListener('change', handleUpload);
}

function draw() {
  background(0, 0, 5);

  // Starfield
  noStroke();
  fill(200, 10, 100, 10);
  for (let s of starfield) {
    ellipse(s.x, s.y, 1.5, 1.5);
  }

  if (audio) {
    let spectrum = fft.analyze();
    let bass = fft.getEnergy("bass");
    let rms = amp.getLevel();

    translate(width/2, height/2);
    rotate(blobRotation);
    blobRotation += 0.001;

    // Central Blob
    drawBlob(rms, bass);

    // Play/Pause Icon
    fill(0, 0, 100, 80);
    noStroke();
    ellipse(0, 0, 40);
    drawPlayPauseIcon(playing);
  }
}

function drawBlob(level, bass) {
  let r = map(bass, 0, 255, 100, 300);
  noFill();
  strokeWeight(2);
  for (let i = 0; i < 3; i++) {
    stroke((frameCount + i*60) % 360, 80, 100, 70);
    beginShape();
    for (let a = 0; a < TWO_PI; a += 0.05) {
      let offset = map(noise(a * 2 + i, frameCount * 0.01), 0, 1, -50, 50);
      let x = (r + offset) * cos(a);
      let y = (r + offset) * sin(a);
      vertex(x, y);
    }
    endShape(CLOSE);
  }

  // Particles
  for (let i = 0; i < 5; i++) {
    let angle = random(TWO_PI);
    let radius = r + 10;
    let x = radius * cos(angle);
    let y = radius * sin(angle);
    stroke(180, 80, 100, 50);
    point(x + random(-5,5), y + random(-5,5));
  }
}

function drawPlayPauseIcon(isPlaying) {
  push();
  rotate(frameCount * 0.01);
  stroke(0, 0, 0);
  fill(0, 0, 100);
  if (isPlaying) {
    rect(-6, -10, 4, 20);
    rect(2, -10, 4, 20);
  } else {
    triangle(-6, -12, -6, 12, 10, 0);
  }
  pop();
}

function mousePressed() {
  if (dist(mouseX, mouseY, width/2, height/2) < 100) {
    if (audio && playing) {
      audio.pause();
      playing = false;
    } else if (audio) {
      audio.play();
      playing = true;
    }
  }
}

function handleUpload(event) {
  for (let file of event.target.files) {
    let sound = loadSound(URL.createObjectURL(file), () => {
      files.push(sound);
      addToPlaylist(file.name, files.length - 1);
      if (!audio) {
        audio = sound;
        fft.setInput(audio);
        amp.setInput(audio);
      }
    });
  }
}

function addToPlaylist(name, index) {
  const list = document.getElementById('playlist');
  const item = document.createElement('div');
  item.innerText = name;
  item.style.cursor = 'pointer';
  item.style.marginTop = '5px';
  item.onclick = () => {
    if (audio) audio.stop();
    audio = files[index];
    fft.setInput(audio);
    amp.setInput(audio);
    audio.play();
    playing = true;
  };
  list.appendChild(item);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
</script>

</body>
</html>

☑️Support me on Patreon

https://www.patreon.com/developercrazy

🔸More WordPress Videos playlist

🔸Unity Videos playlist

🔸UI Template Download link

Developer Crazy!!!

Search This Blog

AI-Generated Audio Visualizer Website – Full Tutorial

📋 Steps to Follow:

Prompt

Index.html (preview code)

Version generated by ChatGPT

Comments

Post a Comment