Special Agent Squeaky

使用基本的 HTML、CSS 和 JavaScript 创建音频可视化工具

如何使用基本的 HTML、CSS 和 JavaScript 从头开始逐步创建水平音频可视化工具!
嘿!您正在查看我网站的自动翻译版本!由于我网站的官方语言是英语(因为我只懂英语),我只想说,由于网站是自动翻译的,所以有些翻译可能会很奇怪,损坏甚至丢失!祝你有美好的一天!
请注意,这篇博文是在 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РУССКОМ日本한국인中国人
本网站自动使用谷歌分析进行聚合网络分析跟踪,这也会创建浏览器 cookie。如果您不想被跟踪,请以隐身模式访问本网站。