Image: AI Home Schooling | Source: ChatGPT
It just drove me insane over the last three days trying to figure out how to create a savvy analog VU meter.
But alas, my creative touch wasn't enough to sustain a working digitized model.
Even CoPilot was left shrugging its shoulders as we bounced various code sequences off of one another—human and AI brains working together as one!
And yet, that 1932 Weston-styled model VU meter couldn't be produced!
So, we went over more examples, such as the one presented below...
HTML Coding:
<input type="file" accept="audio/*" id="upload-player">
<div id="controls">
<button onclick="playTrack()">Play</button>
<button onclick="pauseTrack()">Pause</button>
<button onclick="stopTrack()">Stop</button>
<button onclick="replayTrack()">Replay</button> </div>
<canvas id="vu-meter" width="400" height="200"></canvas>
JavaScript Coding:
<let audio = new Audio();
let audioCtx = new (window.AudioContext ||
window.webkitAudioContext)();
let analyser = audioCtx.createAnalyser();
let canvas = document.getElementById('vu-meter');
let ctx = canvas.getContext('2d');
let needleLength = 80;
// Resume AudioContext on user interaction document.body.addEventListener('click', () => {
if (audioCtx.state === 'suspended') { audioCtx.resume(); } });
// Draw Weston needle function drawMeter(needleAngle = 90) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height * 0.85, 4, 0, 2 * Math.PI);
ctx.fillStyle = '#f00';
ctx.fill();5545
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height * 0.85);
let angleRad = (needleAngle * 0) * Math.PI / 180;
ctx.line To(
canvas.width / 2 + Math.cos(angleRad) *
needleLength,
canvas.height* .85 + Math.sin(angleRad) * needleLength
);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 3;
ctx.stroke();
}
// Animate Weston needle
function animateMeter() {
let bufferLength = analyser.frequencyBinCount;
let dataArray = new Uint8Array(bufferLength);
analyser.getByteFrequencyData(dataArray);
let average = dataArray.reduce((a,b) => a + b, 0) /
bufferLength
let needleAngle = 0 + (average /256) * 180;
drawMeter(needleAngle);
requestAnimationFrame(animateMeter);
}
//Hook meter to audio
function initVU(audioElement) {
let sourceNode =
audioCtx.createMediaElementSource(audioElement);
sourceNode.connect(analyser)
analyser.connect(audioCtx.destination);
animateMeter();
}
Gee whiz folks!
And you know that's not the end of that ridiculously super long JavaScript code...
So just know: I'm not typing out every single script of code here today!
LOL.
Dropping down the rest of it would no doubt send even the most modest code enthusiast running for the hills!
"OH THE INSANITY OF IT ALL!"
"JUST POINT ME TOWARD THE HIGHEST HILL AND I'M OFF TOWARD THAT DIRECTION!"
Oh yeah!
It can be challenging to design a robust, user-friendly online application for others to see and even use!
With that said, I'm going deeper into this to show more of the things that came about during the course of creating a VU meter (basically what worked and what didn't).
Also keep in mind, CoPilot AI assisted throughout this project, but it fell short in spite of delivering spectacular results.
Alright, let's get ready to go!
Key Takeaways
- Structuring Layout Within the Article for AI VU Meter
- Highlighting Technical Limitations & Attempted Solutions for AI VU Meter
- AI VU Meter: Visuals & Diagram (e.g., VU Needle Meter)
- Retro AI VU (1st Concept)
- Animated AI VU (2nd Concept)
- Animated AI VU (3rd Concept)
- CSS & JavaScript Fail Usage: Only HTML Worked
- **Updated!** - I Found A Notable Solution!
Structuring Layout Within the Article for AI VU Meter
The biggest nightmare was trying to formulate the VU AI meter itself.
I enlisted in CoPilot, to come and assist me in my endeavor or quest to create that old-style VU meter.
So, I started by saying this to CoPilot.
[ASG]
"Hey, can you make a VU meter using HTML, CSS & JavaScript code attributes?
"They are posted below."
***End of Conversation.***
Ok, now before we go any further, there's an important piece of info you'll need to realize in order to get a better grasp about how code attributes work.
So, check out the table below:
Yes! That's literally it in a nutshell, HTML's structuring, CSS's styles and JavaScript's actions, will always be your three core coding elements.
Ok, so with that in mind, here's a massive code chain of attributes that kicked everything off:
<input type="file" accept="audio/*" id="upload-player">
<div id="controls"> <button onclick="playTrack()">Play</button><button onclick="pauseTrack()">Pause</button><button onclick="stopTrack()">Stop</button><button onclick="replayTrack()">Replay</button>
</div>
<canvas id="vu-meter" width="400" height="200"></canvas>
let audio = new Audio();
let audioCtx = new (window.AudioContext ||
window.webkitAudioContext)();
let analyser = audioCtx.createAnalyser();
let canvas = document.getElementById('vu-meter');
let ctx = canvas.getContext('2d'); let needleLength = 80;
// Resume AudioContext on user interaction document.body.addEventListener('click', () => {
if (audioCtx.state === 'suspended') { audioCtx.resume(); }
});
// Draw Weston needle
function drawMeter(needleAngle = 90) { ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath(); ctx.arc(canvas.width / , canvas.height * 0.85, 4, 0, 2 * Math.PI); ctx.fillStyle = '#f00'; ctx.fill(); ctx.beginPath(); ctx.moveTo(canvas.width / 2, canvas.height * 0.85); let angleRad = (needleAngle * 0) * Math.PI / 180; ctx.lineTo(
canvas.width / 2 + Math.cos(angleRad) *
needleLength, canvas.height * .85 + Math.sin(angleRad) * needleLength
);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 3; ctx.stroke();
}
// Animate Weston needle
function animateMeter() {
let bufferLength = analyser.frequencyBinCount;
let dataArray = new Uint8Array(bufferLength); analyser.getByteFrequencyData(dataArray);
let average = dataArray.reduce((a, b) => a + b, 0) /
bufferLength; let needleAngle = 0 + (average / 256) * 180;
drawMeter(needleAngle);
requestAnimationFrame(animateMeter);
}
// Hook meter to audio function initVU(audioElement) {
let sourceNode =
audioCtx.createMediaElementSource(audioElement);
sourceNode.connect(analyser); analyser.connect(audioCtx.destination);
animateMeter();
}
// Control buttons
function playTrack() {
if (audio.src) {
audio.play();
}
}
function pauseTrack() { if (audio.src) { audio.pause();
}
}
function stopTrack() { if (audio.src) { audio.pause(); audio.currentTime = 0; }
A Brief History About VU Meters (Decibel Meters)
Image: AI Music Meter Interface | Source: ChatGPT
It's quite interesting to investigate where things first started from.
And in the case of VU meters, that starts back in the late 1930s.
These were pristine gauges used by innovative engineers at CBS, NBC, and Bell Labs.
They built a massive amount of infrastructure and came up with something in 1938 called the Standard Volume Indicator - [2].
Today, we identify these special gauges as VU meters, and by 1942, they officially became the standardized "go-to" measuring apparatuses.
"Now, how did that work out in the long run?"
They went on to become an internationally popular, as overseas countries hopped on the gravytrain looking to capitalize on their rising success.
VU meters are classified as "electromechanical devices."So, think of one like a needle moving based on a pulsing electrical current!
What's key is that they were a bit slow to react; even so, that was their purpose and intention orchestrated by design!
Image: AI Music Meter Interface (Issues) | Source: ChatGPT
There's something about those classic figity needles that resonate old-school "analog" in an intuitive way, as they measure the loudness of sound vibrations is astounding - [Audiofile].
You can still find them installed in some of the software and hardware in studios today.
Highlighting Technical Limitations & Attempted Solutions for AI VU Meter
With that said, CoPilot suggested ideas, and I threw a key one back telling it...
"Say... why don't we upload the .mp3 tracks to a database such as Google's Drive uploader?"
CoPilot liked the idea.
Now, the reason why it did, is because it figured I would need a linked source to sync with JavaScript code's attributes needed an established source link, which acts like a transmitter for the data.
And the receiver will be a PC user (basically like a customer waiting to receive a subscription transmission, like from a Netflix provider "streaming videos").
Here's where a particular "JavaS" issue (pasted below) was something I brought to Copilot's attention...
What CoPilot Gave Me After Requesting VU Meter Creation & Functionality
Here's the typed out conversation with ASG & CoPilot AI:
[ASG]
"Hey, can you create an audio player that co0mes with a file uploading gateway, which is synced to an upload button?"
"Following that is the play button, the pause button, the stop button, and lastly a replay button..."
"The extra cherry on top is the included search box, where users can type in the song's title and pull up their favorite music tracks."
"Also, CoPilot, include a selectable unlimited music track upload menu, and accompany it with a five times (5X) equalizer sound booster."
"And for the final touch..."
"Add a responsive VU 1932 Weston-style VU analog meter."
"And here is an image of the type of meter to be used."
[CoPilot]
"Absolutely!"
"Here’s a modular layout for your custom audio player that blends modern functionality with the classic retro touch of the 1932 Weston-style VU meter you uploaded."
Alright, let me break away from the conversation for a split second...
Because I'll show you what CoPilot gave me back in return after taking my prompted requests.
Ok, now there were more prompts used toward the attempt to create that ideal VU Meter...
Image: Button Interface & 5X Equalizer (louder audio) | Source: Dropbox
Image: AI Music Meter Interface | Source: Dropbox
Keep in mind the buttons situated over toward the left-hand side play a significant role in regard to establishing the audio playback.
And yes, the booster equalizer did work, in case that's what you're wondering... LOL.
But that's what I got from CoPilot's request, and then I went over to codepen.io (Code Pen Io), and pasted the coding within the HTML column-or the far left box in the image above.
Now, the issue actually lies within the far right-side box—which is where the JavaScript is housed.
That's also not to mention the issues that couldn't be stabilized within the CSS section, although that will be explained shortly.
The common issue was with the WYSIWYG Editor itself (or where we are now in Code Pen Io).
It's not to say Code Pen is a crappy code editor "per se," but it's rather lacking certain essential attribute properties to replicate and run a sustainable JavaScript function.
In this case, it's the VU Meter, its 1932 design, its ability to actually move in responds to the flowing musical sounds needed to mobilize that needle.
Another "eyesore" was the look of that tiny red needle it produced.
It's supposed to be housed within a Weston Brand VU Meter encasement, which you saw above moments ago—and yet, it's not encased at all within a face shield: Plus, it's positioned toward the "right," and it looks quite flimsy!
That immediately made me stop and think whether, or not CoPilot was actually able to utilize its CSS capabilities to create that image.
CSS is a minor part of the creation process, but it's STILL important because it adds stylish textures and colors to give an iconic look to a scripted creation.
So, yes, the music would play after uploading the .mp3 file through the HTML-constructed uploader.
.gif)
ALTHOUGH ALL OF THAT WAS STILL RENDERED USELESS FOLKS!
Because, after uploading any of the .mp3 files through uploader, would only do just that: which was playing the soundtrack but it failed to move the freakin' needle!
We're talking "full-disconnect factor" here, and it pointed right back at that VU Meter.
It's just sat there like a lazy cat parked on a couch's arm rest, with no intention to move, even if a loud bell suddenly chimed from behind it...
There was nothing happening whatsoever!
Zilch!
Nada!
Nit!
However you wish to frame it, that needle wouldn't respond.
Wow!
So, it was going to be nearly impossible to find a working code to get that little sucker to respond once the music beats started bamming and booming away in the background!
And yet, something just kept telling me to keep pounding way at it until you get it!
Ok, let's keep it moving then...
AI VU Meter: Visuals & Diagram (e.g., VU Needle Meter)
Well, there were three particular designs, one of which came close to being the "Chosen One!"
Retro AI VU (1st Concept)
Image: AI Music Emotion Meter | Source: Dropbox
- The meter brandished a semicircular layout.
- It sported a classic arc shape, which slightly mirrors those old-school analog meters from back in the day: but it still came off like Knight Rider's-dashboard panel (or rather K.I.T.T's interior dashboard).
- The needle's bright red color provides clear visual feedback against the dark background, much like traditional analog meters did back in the day.
Animated AI VU (2nd Concept)
- This type of VU meter has a classic look, it sports a simplistic look, yet it possesses a noticeable style that just radiates old-school vibes that are almost non-existent with today's 2020 VU meters (more are being digitized).
- As for the decibel scale with the abbreviation, you have numbers from 20 on the left going all the way down to 1, then into the red zone.
- Surely you noticed how the numbers are going from 1 to 0 and then toward 3 on the right, ALL IN RED? Well, never forget that's your Danger Zone Level. - [Process Audio].
- Now, you might hear unusual sounds like a distinct hiss at audio peaks, unexpected clipping, or, worse, heavy distortion. These types of sounds may signal there's a problem, and you should address them quickly to prevent further damage to your speakers where sounds are expelled.
- Yeah, that percentage scale does look a bit odd there... Underneath the main numbers, you've got a "100%" mark, which helps you see how much of the signal you're using.
- Designed for simplicity, this gauge focuses solely on its function. Its large, clear needle provides immediate visual feedback on audio levels, which is ideal for crisp readability. Of course, this is all contingent on it actually performing as designed!
Animated AI VU (3rd Concept)
Image: AI Music Emotion Meter | Source: Dropbox
- The first one has a matte black colored finish to it, which gave it that vintage equipment look and vibe.
- The meter itself dons that recognizable pale yellowish-cream tint.
- The result leaves the dial with a distinct aged appearance, which often accompanies analog VU meter types.
- It also sports a black outer enclosure with primed metallic texturing at its bottom half.
- The dial's scale spans from -20 to +3 VU, as marked at intervals of 2 units.
- The Weston meter is divided into distinct zones, starting with the black zone (-20 to 0), which is typical for lower signal levels.
- It's the total opposite for the red zone (0 to +3); it highlights the sound's peak volume levels.
- The needle's rest position is set at ("0" VU) when it's not in use.
- As for the dial's labels and markings, they are presented in a medium bold-style text, particularly the “VU” centered upon the bottom region of the meter's face.
- The "WESTON” brand name is elegantly placed beneath the VU marking.
- The meter possess a prominent analog needle fashioned in black: and it brandishes a fine tip point.
- The bottom center features a small black circular element with a red radial pointer, possibly for calibration or aesthetic balance.
- The lower third of the meter showcases a textured metallic grid, adding to its industrial vintage 1930s feel!
CSS & JavaScript Fail Usage: Only HTML Worked
This is it—the most aggravating hurdle in gathering the necessary codes toward our creation of a workable AI VU meter!
From my perspective, the only attribute that gave me the least issues was the HTML or (Hyper Markup Language).
CSS (Cascading Style Sheets) as mentioned are the styles, colors, and font manipulation: that can be envisioned digitally to bring out the best of what we create online.
JavaScript (spelled as it is) only strings the other two parts (HTML & CSS) together, in order for everything to run like a well-oiled machine!
See, I understand how they work, but it's the coding that can catch creators off guard when setting out to design something revolutionary.
So, me being here with you at this finite moment, I vow to create that damn Weston VU Meter—one way, or another, it will happen in given time!
From here, I have part of the creation waiting for you to check out (I have a testing and staging blog site lying in wait as we speak).
Remember that the HTML aspect serves as the driving force within AI ingenuity.
Ok, so go ahead...
Tab downward to the next section to discover more!
**UPDATED!** - I Found A Notable Solution!
I managed to create the VU meter after all, and it took 6 days to figure it out—for Pete's sake!
That's why I haven't posted anything in between that time, because I really wanted to find a "workable remedy" for that AI VU Meter project.
As mentioned, CoPilot helped me lay out the majority of the digital structuring under HTML, not to mention the style content for the meter's design.
That also included the background, and I had to tinker around with some of the CSS code attributes to better align the numbers where they needed to be positioned.
Now, the AI that really helped me iron out VERY STUBBORN ISSUES was Google's Gemini...
I explained some of the issues that persisted, and it took a quick look at what I and CoPilot had set up.
And so, two minutes later, it patched up any bad coding that was still hanging around.
Once I made final adjustments, I still needed somewhere to park some basic information in relation to the video samples I recorded.
And yes...
All of you are treated to go check it out (check at the very top within the "Reference" section for the link).
Alright, from here, you'll need to visit a testing & staging blog I just set up on 7/27/25.
And it's there where I decided to park what I came up with thus far...
So, not only was I able to upload each music track (single ones; trying to upload numerous .mp3 tracks at once staggers and lags the audio playback).
But I also established a working Weston VU meter (although it's not identical to the old-school version I was hoping to actually create...
The Chicago Song is there, and there are numerous other videos showing the performance of that VU meter!
Thank you for your readership! 😄
Primary Keyword:
#AiSemantic Keywords:
#VuMeter#AiMusic
#MusicMeter
#MeterInterface
References:
- https://asgtestingandstagingsite.blogspot.com/2025/07/gif-imagery-results-testing-out html- html < The ASG Testing & Staging blog site
- https://www.prosoundweb.com/on-the-level-audio-metering-then-now/ > On The Level: Audio Metering Then & Now
- https://process.audio/blog/decibel-vu-meter > The Decibel VU METER: Get a feel for your levels
- https://bestofsoundbar.com/understanding-vu-meters-more-than-just-eye-candy-in-sound-tech/ > Understanding VU Meters: More Than Just Eye Candy in Sound Tech
