Special Agent Squeaky

How to add and use (custom) items for VTube Studio for Steam

Here is a quick guide on how to add and use (and even import custom items) in VTube Studio for Steam!
Please note that this blog post was published October 2020, so depending on when you read it certain parts of it might be out of date today. Unfortunately, I cannot constantly keep these blog posts always up to date to make sure the information is still accurate.
This is a step by step guide on how to create a horizontal audio visualizer, from scratch, by using basic HTML, CSS and JavaScript.

Watch the video

This is a step by step guide on how to create a horizontal audio visualizer, from scratch, by using basic HTML, CSS and JavaScript.
You could just copy the source code below and it should work, however then you will also miss some of the through processes that went behind creating some decisions in the code - so it is totally up to you!

Watch the video

Here's the full source code!
<!-- License MIT, Author Special Agent Squeaky (specialagentsqueaky.com) --> <!doctype html> <html lang="en"> <head> <title>My Eq</title> <style> body { overflow: hidden; } .background { position: absolute; top: -50px; right: -50px; bottom: -50px; left: -50px; background-image: url("background.jpg"); background-position: center center; background-size: cover; filter: blur(15px); } .track-title { position: absolute; top: 200px; right: 0; left: 0; color: white; font-family: Calibri; font-size: 100px; text-align: center; } .visualizer-container { position: absolute; bottom: 450px; right: 0; left: 0; text-align: center; } .visualizer-container__bar { display: inline-block; background: white; margin: 0 2px; width: 25px; } </style> </head> <body> <audio src="track.mp3" controls></audio> <div class="background"></div> <div class="track-title">Awesome song</div> <div class="visualizer-container"></div> <script> (function () { // The number of bars that should be displayed const NBR_OF_BARS = 50; // Get the audio element tag const audio = document.querySelector("audio"); // Create an audio context const ctx = new AudioContext(); // Create an audio source const audioSource = ctx.createMediaElementSource(audio); // Create an audio analyzer const analayzer = ctx.createAnalyser(); // Connect the source, to the analyzer, and then back the the context's destination audioSource.connect(analayzer); audioSource.connect(ctx.destination); // Print the analyze frequencies const frequencyData = new Uint8Array(analayzer.frequencyBinCount); analayzer.getByteFrequencyData(frequencyData); console.log("frequencyData", frequencyData); // Get the visualizer container const visualizerContainer = document.querySelector(".visualizer-container"); // Create a set of pre-defined bars for( let i = 0; i < NBR_OF_BARS; i++ ) { const bar = document.createElement("DIV"); bar.setAttribute("id", "bar" + i); bar.setAttribute("class", "visualizer-container__bar"); visualizerContainer.appendChild(bar); } // This function has the task to adjust the bar heights according to the frequency data function renderFrame() { // Update our frequency data array with the latest frequency data analayzer.getByteFrequencyData(frequencyData); for( let i = 0; i < NBR_OF_BARS; i++ ) { // Since the frequency data array is 1024 in length, we don't want to fetch // the first NBR_OF_BARS of values, but try and grab frequencies over the whole spectrum const index = (i + 10) * 2; // fd is a frequency value between 0 and 255 const fd = frequencyData[index]; // Fetch the bar DIV element const bar = document.querySelector("#bar" + i); if( !bar ) { continue; } // If fd is undefined, default to 0, then make sure fd is at least 4 // This will make make a quiet frequency at least 4px high for visual effects const barHeight = Math.max(4, fd || 0); bar.style.height = barHeight + "px"; } // At the next animation frame, call ourselves window.requestAnimationFrame(renderFrame); } renderFrame(); audio.volume = 0.10; audio.play(); })(); </script> </body> </html>
I just released a new gaming video on YouTube! Feel free to check it out!
ENGLISHESPAÑOLPORTUGUÊSDEUTSCHFRANÇAISITALIANOРУССКОМ日本한국인中国人
This website automatically uses Google Analytics for aggregated web analytics tracking which also creates browser cookies. If you do not wish to be tracked, please visit this site in incognito mode.