Special Agent Squeaky

VTube Studio for Steamの(カスタム)アイテムを追加して使用する方法

これは、VTube Studio for Steamで追加して使用する(さらにはカスタムアイテムをインポートする)方法に関するクイックガイドです!
おい!あなたは私のウェブサイトの自動翻訳版を見ています!私のウェブサイトの公用語は英語です(私は英語しか知らないので)、ウェブサイトは自動翻訳されているので、いくつかの翻訳は奇妙で、壊れているか、あるいは欠けているかもしれません!すてきな一日を!
このブログ投稿は October 2020 で公開されているため、いつ読むかによっては、一部が今日古くなっている可能性があることに注意してください。残念ながら、情報が正確であることを確認するために、これらのブログ投稿を常に最新の状態に保つことはできません。
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>
YouTubeで新しいゲーム動画を公開しました!お気軽にチェックしてください!
ENGLISHESPAÑOLPORTUGUÊSDEUTSCHFRANÇAISITALIANOРУССКОМ日本한국인中国人
このウェブサイトは、ブラウザのクッキーも作成する集約されたウェブ分析追跡のために自動的にグーグルアナリティクスを使用します。追跡を希望されない場合は、シークレットモードでこのサイトにアクセスしてください。