The Audio Visualizer Generator

What you’re building

You need visual content for every release. Instagram Reels, TikTok, YouTube Shorts, Spotify Canvas — every platform wants video, and static cover art doesn’t cut it anymore. The standard move is to pay someone $50-200 per visualizer clip, or spend an hour in After Effects wrestling with audio keyframes. Every single release.

You’re going to build a visualizer that runs in your browser. Drop in a track, and it renders audio-reactive visuals in real time — frequency bars, waveforms, the works. But the real move is the tape deck mode: spinning cassette reels, VU meters bouncing to your mix, that analog aesthetic that’s already your brand. Hit fullscreen, screen-record it, and you’ve got a 60-second clip ready for every platform.

One HTML file. No installs. No subscriptions. No After Effects.

💬Why visualizers matter for streams

This isn’t just content for content’s sake. Spotify Canvas artists see a 5-145% increase in streams compared to tracks without visual loops. On TikTok and Reels, audio content with visuals gets 2-3x the engagement of static images. Visualizer clips are the highest-ROI social media asset for musicians — they take minutes to produce and drive real discovery. Every track you release without a visual clip is leaving streams on the table.

ℹNo libraries needed for the core

The Web Audio API is built into every modern browser — Chrome, Firefox, Safari, Edge. It gives you real-time frequency and waveform data from any audio file. Canvas is built in too. The entire visualizer runs on technology your browser already has. No npm install, no build step, no dependencies. Just open the HTML file.

The prompt

Open your terminal, start your AI CLI tool, and paste this prompt:

Build a single self-contained HTML file called visualizer.html that creates a
browser-based audio-reactive visualizer with a cassette tape deck aesthetic.
Everything -- HTML, CSS, and JavaScript -- goes in this one file. No external
dependencies except optionally Google Fonts from CDN.

REQUIREMENTS:

1. AUDIO INPUT
   - A drop zone covering the top area: "Drop an audio file here or click to
     browse" with a dotted border
   - Accept MP3, WAV, OGG, FLAC via drag-and-drop or file input click
   - Once a file is loaded, show the filename and a play/pause button
   - Use the Web Audio API: create an AudioContext, connect the audio source
     to an AnalyserNode, then connect to the destination (speakers)
   - AnalyserNode settings: fftSize 2048, smoothingTimeConstant 0.8

2. VISUALIZATION MODES (toggle between them with a button)

   Mode A: "TAPE DECK" (the signature mode)
   - Dark background (#09090b)
   - Two cassette reels drawn as circles with spokes, positioned left and
     right of center
   - Reels spin continuously while audio plays; speed increases slightly
     with overall volume level
   - A tape path drawn as a curved line connecting the two reels, passing
     through a "head" area in the center
   - In the center between the reels: a VU meter display
     - Two vertical bar meters (left channel, right channel if stereo,
       or duplicate mono data)
     - Bars fill from bottom to top based on average bass and mid
       frequency levels
     - Color gradient from #f97316 (orange) at the bottom to #fbbf24
       (amber) at the top
     - Meter ticks/marks on the side for the analog look
   - Below the reels: a horizontal row of small frequency bars (16-24 bars)
     representing the frequency spectrum, styled as small LED-style
     segments
   - Track info overlay in the bottom-left corner: artist name and track
     title in a monospace font, small and subtle
   - A subtle tape counter in the top-right showing elapsed time in
     MM:SS format, styled like an old mechanical counter
   - Slight CRT scanline effect over the whole canvas (horizontal lines
     at 30% opacity)

   Mode B: "CLASSIC BARS"
   - Dark background (#09090b)
   - 64 vertical frequency bars centered on the canvas
   - Bar height driven by frequency data (getByteFrequencyData)
   - Bars colored with #f97316 (orange) as the base, with a glow effect
   - Thin gap between bars
   - Mirror reflection effect below the bars (bars reflected downward at
     reduced opacity)
   - Track info overlay same as tape deck mode

3. CONTROLS (visible in non-fullscreen mode, hidden in fullscreen)
   - Play / Pause button
   - Mode toggle: "TAPE DECK" / "CLASSIC BARS"
   - Track info fields: Artist Name input, Track Title input (these update
     the overlay in real time as you type)
   - Color theme selector with 3 presets:
     - "Midnight" -- background #09090b, accent #f97316 (orange)
     - "Neon" -- background #09090b, accent #06b6d4 (cyan)
     - "Analog" -- background #09090b, accent #d97706 (warm amber)
   - Fullscreen button: enters browser fullscreen AND hides all controls,
     showing only the canvas. Press Escape to exit.
   - Volume slider

4. FULLSCREEN MODE
   - Canvas fills the entire viewport with no borders, margins, or UI
   - All controls, drop zone, and input fields are hidden
   - Canvas resolution matches the viewport dimensions (responsive)
   - Handle devicePixelRatio for sharp rendering on retina displays:
     set canvas width/height to viewport * devicePixelRatio, then
     scale the canvas element with CSS to viewport dimensions
   - Press Escape or click the canvas to exit fullscreen
   - This mode is designed for screen recording -- the output should be
     clean with no browser UI visible

5. ANIMATION
   - Use requestAnimationFrame for the render loop
   - Call analyser.getByteFrequencyData() each frame for frequency bars
   - Call analyser.getByteTimeDomainData() each frame for waveform data
   - Tape deck reel rotation: increment angle each frame, multiply speed
     by a factor derived from the average volume (louder = slightly faster)
   - All animations should be smooth at 60fps
   - When audio is paused, freeze the visualization (don't clear it)

6. STYLING
   - Body background: #09090b
   - Controls area: below the canvas, styled with dark cards (#111118),
     rounded corners, subtle borders (#262626)
   - Inputs and buttons: dark backgrounds (#1e1e2a), light text (#e5e5e5),
     orange (#f97316) accent for active/hover states
   - Font: monospace for track info overlay, system sans-serif for controls
   - The whole page should look like a piece of audio equipment -- dark,
     minimal, purposeful
   - Mobile-responsive: controls stack vertically on narrow screens

💡Copy-paste ready

That entire block is the prompt. Paste it as-is into your AI CLI tool. The specificity about Canvas rendering, devicePixelRatio, and the exact visual layout is deliberate — visualizer code has a lot of moving parts, and the more precise you are upfront, the closer you get to a working result on the first pass.

What you get

After your AI CLI tool finishes (usually 90-120 seconds for something this detailed), you’ll have one file:

visualizer.html

That’s it. No npm install, no build step, no dependencies.

Try it

Open visualizer.html in Chrome or Firefox. (Safari works too, but Chrome gives the smoothest Canvas performance.)

Drag an MP3 or WAV file onto the drop zone — or click it to browse.
Hit Play. You should see the tape deck mode animate immediately.
The reels should spin. The VU meters should bounce. The frequency bars along the bottom should react to bass, mids, and highs.
Type your artist name and track title into the input fields — the overlay on the canvas updates in real time.
Toggle to “Classic Bars” mode. You should see 64 vertical bars reacting to the audio.
Switch between the three color themes. The accent color should change across the whole visualization.
Hit the Fullscreen button. The canvas should fill your entire screen with no controls visible. Press Escape to come back.

ℹUse your own music

The visualizer works with any audio file, but it hits different when you load your own track. Drop in an unreleased single, type in the metadata, switch to tape deck mode, and see your brand aesthetic come to life. That’s the clip you’re posting.

If something is off

Problem	Follow-up prompt
No sound plays when I click Play	`Audio isn't playing. The AudioContext is probably suspended due to browser autoplay policy. Make sure the AudioContext is created or resumed inside a user click event handler, not on page load. Add audioContext.resume() inside the play button's click handler.`
Visualizer shows a flat line / bars don’t move	`The frequency bars are flat even though audio is playing. The AnalyserNode probably isn't connected between the source and destination. The chain should be: sourceNode → analyserNode → audioContext.destination. Check that the analyser is in the signal path, not on a separate branch.`
Canvas looks blurry on my MacBook	`The canvas is blurry on a retina display. Set canvas.width and canvas.height to the display size multiplied by window.devicePixelRatio, then use CSS to set the canvas element's display size to the original dimensions. Call ctx.scale(devicePixelRatio, devicePixelRatio) after resizing.`
Reels spin but don’t react to the music	`The reel spin speed is constant regardless of volume. Tie the rotation increment to the average amplitude: calculate the mean of the frequency data array each frame, normalize it to a 0-1 range, and use it as a multiplier on the base rotation speed. Louder audio = faster spin.`
Fullscreen mode has black bars on the sides	`Fullscreen shows black bars because the canvas dimensions don't match the viewport. On fullscreen change, resize the canvas to window.innerWidth and window.innerHeight (times devicePixelRatio for the buffer). Add a resize event listener that updates canvas dimensions.`

A worked example: recording a clip for a new single

Here’s the actual workflow for creating a visualizer clip for your next release:

Load the track: Open visualizer.html, drag in the final master of your single.
Enter metadata: Type your artist name (“moodmixformat”) and track title (“JADED”) into the input fields.
Pick the mode: Switch to Tape Deck mode. Select the “Midnight” color theme (orange on dark).
Go fullscreen: Hit the Fullscreen button. Your screen should show nothing but the visualizer — reels spinning, VU meters bouncing, frequency bars reacting.
Screen-record: Open OBS (or QuickTime on Mac, or Game Bar on Windows). Set it to capture the browser window or the full screen. Hit Record.
Let it play: Record 60-90 seconds of the track — pick the section with the best energy. The drop, the buildup, whatever represents the track best.
Stop and trim: Stop the recording. You now have a video file. Trim it to exactly 60 seconds for Reels/TikTok, or 8 seconds for Spotify Canvas.
Post everywhere: Upload the 60-second clip to Instagram Reels, TikTok, and YouTube Shorts. Upload the 8-second loop to Spotify Canvas. Same visual, five platforms.

Total time from opening the file to having a postable clip: about 5 minutes.

💡Screen recording tools

OBS Studio is free, open source, and works on Mac/Windows/Linux. It records your screen at whatever resolution and framerate you want. For quick recordings, Mac has QuickTime Player (File > New Screen Recording) and Windows has Game Bar (Win+G). OBS gives you the most control over output quality and format, which matters when platforms re-compress your video.

🔍How frequency analysis maps to what you hear

The Web Audio API’s AnalyserNode breaks audio into frequency bins using a Fast Fourier Transform (FFT). With an fftSize of 2048, you get 1024 frequency bins. In music terms:

Bins 0-10 (~20-200 Hz): Sub-bass and kick drums. These are the frequencies that make your chest thump. In the visualizer, these drive the left side of the frequency bars and the bulk of the VU meter movement.
Bins 10-80 (~200-2000 Hz): Mids. Vocals, synth leads, guitar, snare body. The meat of most music lives here. These fill the middle of the frequency bars.
Bins 80-400 (~2000-20000 Hz): Highs. Hi-hats, cymbals, the sizzle on synths, vocal air. These drive the right side of the frequency bars.

When you see the frequency bars react to a kick drum, it’s bins 0-10 spiking. When a hi-hat hits, it’s the high-end bins. The VU meters average across the low and mid ranges because that’s where most of the energy in electronic music lives.

The smoothingTimeConstant (set to 0.8) controls how quickly the bars respond. Higher values (closer to 1.0) make the bars move more slowly and smoothly. Lower values make them snappy and reactive. 0.8 is a good balance for visualizers — responsive enough to feel alive, smooth enough to not look jittery.

🔧

When Things Go Wrong

Use the Symptom → Evidence → Request pattern: describe what you see, paste the error, then ask for a fix.

Symptom

Audio doesn't play -- clicking Play does nothing

Evidence

Console shows 'The AudioContext was not allowed to start' or the play button doesn't respond

What to ask the AI

"The browser is blocking the AudioContext because it wasn't created from a user gesture. Move the AudioContext creation into the first user click handler. If the context already exists, call audioContext.resume() in the play button handler. Chrome requires user interaction before audio can start -- this is browser security policy, not a bug in the code."

Symptom

Visualizer shows a flat line even though audio plays

Evidence

Audio comes through the speakers but all frequency bars are at zero and the VU meters don't move

What to ask the AI

"The AnalyserNode isn't in the audio signal path. The connection chain must be: audioSource.connect(analyserNode) then analyserNode.connect(audioContext.destination). If the analyser is connected as a side branch (source → destination AND source → analyser separately), it sometimes doesn't get data. Make sure the analyser is between the source and destination in series."

Symptom

Canvas is blurry on retina/HiDPI displays

Evidence

The visualizer looks fuzzy on a MacBook or high-resolution monitor, like it's being upscaled

What to ask the AI

"The canvas isn't accounting for devicePixelRatio. Fix: set canvas.width = displayWidth * window.devicePixelRatio, canvas.height = displayHeight * window.devicePixelRatio. Then set canvas.style.width = displayWidth + 'px' and canvas.style.height = displayHeight + 'px'. Finally, call ctx.scale(window.devicePixelRatio, window.devicePixelRatio) so drawing coordinates stay in CSS pixels."

Symptom

Reels spin at constant speed regardless of the music

Evidence

The tape deck reels rotate smoothly but they don't speed up during loud sections or slow down during quiet parts

What to ask the AI

"The reel rotation isn't tied to audio data. In the animation loop, calculate the average amplitude: sum all values from getByteFrequencyData, divide by the array length, then divide by 255 to normalize to 0-1. Use this as a multiplier on the base rotation speed: rotationAngle += baseSpeed + (normalizedAmplitude * dynamicSpeed). This makes the reels feel alive."

Symptom

Fullscreen mode shows black bars or doesn't fill the screen

Evidence

Entering fullscreen leaves black bars on the sides or bottom, or the canvas is tiny in the corner of the screen

What to ask the AI

"The canvas dimensions aren't updating on fullscreen. Add a listener for the 'fullscreenchange' event and the 'resize' event. When either fires, set canvas width and height to window.innerWidth and window.innerHeight (multiplied by devicePixelRatio for the buffer). Re-apply the CSS dimensions and ctx.scale. The canvas must resize dynamically whenever the viewport changes."

Customize it

Add a cassette label with cover art

Add a visual cassette label in the center of each reel in tape deck mode. Accept
an optional image file (a second drop zone or a "Load Cover Art" button). When
provided, draw the image as a circular label in the center of each spinning reel,
rotating with the reel. If no image is provided, draw a simple circle with the
track title text. The label should be about 60% of the reel diameter.

Add a waveform progress bar

Add a horizontal waveform progress bar below the main visualization. Pre-analyze
the entire audio file when loaded and draw the full waveform shape as a static
background. As the track plays, fill the waveform from left to right with the
accent color to show playback position. Make it clickable to seek to any position
in the track. This gives the recording a visual sense of where in the track you
are.

Add a "Loop" button with two preset durations: 15 seconds and 60 seconds. When
activated, loop the current playback position for that duration -- play 15 or 60
seconds, then seamlessly loop back to the start point. Add a crossfade of 0.5
seconds at the loop point so it doesn't click. This is for recording perfectly
looping clips for Instagram Reels (60s) and Spotify Canvas (15s or 8s).

Add WebGL particle effects

Add a third visualization mode called "PARTICLES". Use a <canvas> with WebGL
(or fall back to 2D canvas) to render a particle system:
- 500-1000 particles floating upward from the bottom of the screen
- Particle speed and size driven by bass frequency intensity
- Particle color uses the current accent color with varying opacity
- Particles glow and leave a slight trail
- Add a subtle bloom/glow post-processing effect
- Track info overlay same as other modes
Keep this in the same HTML file. Use raw WebGL or a small inline shader -- no
external libraries.

Try it yourself

Open your AI CLI tool in an empty folder.
Paste the main prompt.
Open visualizer.html in your browser.
Load any audio file and verify both visualization modes work.
Enter track info, switch color themes, and try fullscreen mode.
Screen-record a 60-second clip using OBS, QuickTime, or Game Bar.
Pick one customization from the list above and add it.

If you want the full workflow: load the final master of your next single, enter the metadata, switch to tape deck mode with the Midnight theme, go fullscreen, and record the best 60 seconds. Trim it, post it to Reels and TikTok. That’s a visualizer clip in under 10 minutes, for free, with your brand aesthetic baked in.

Key takeaways

Visualizer content is the highest-ROI social media asset for musicians — Spotify Canvas, Reels, TikTok, Shorts all favor audio-visual content over static images. One visualizer clip covers every platform.
Web Audio API is free and built into every browser — no libraries, no subscriptions, no software to install. AnalyserNode gives you real-time frequency data in a few lines of code.
The tape deck aesthetic is your brand — consistency across content builds recognition. When fans see spinning reels and VU meters in your color palette, they know it’s you before they read the title. Brand consistency compounds over time.
Screen recording is the bridge — the visualizer runs in your browser, but OBS/QuickTime turns it into video files you can post anywhere. Browser to social media in minutes.
One HTML file, unlimited clips — every new release gets a visualizer clip by dragging in the track and hitting record. No re-building, no re-prompting. The tool is permanent.

KNOWLEDGE CHECK

Your visualizer is playing audio through your speakers but the frequency bars are completely flat. The AnalyserNode's getByteFrequencyData() returns all zeros. What's the most likely cause?

What’s next

You’ve now built seven tools across this module: asset engine, campaign generator, episode builder, analytics dashboard, royalty reconciler, command center, and now a visualizer generator. Together, they cover the entire release pipeline — from artwork and promotion to analytics, revenue tracking, and visual content.

Every new release follows the same pattern: generate assets (Lesson 1), build the campaign (Lesson 2), prep YouTube metadata (Lesson 3), record a visualizer clip (this lesson), track analytics (Lesson 4), reconcile royalties (Lesson 5), and check it all from the command center (Lesson 6). The tools are built. The workflow is yours. Go make music and let the tools handle the rest.

The Audio Visualizer Generator

What you'll learn

What you’re building

The prompt

What you get

Try it

If something is off

A worked example: recording a clip for a new single

When Things Go Wrong

Customize it

Add a cassette label with cover art

Add a waveform progress bar

Add a loop mode for social clips

Add WebGL particle effects

Try it yourself

Key takeaways

What’s next