Special Agent Squeaky

Cree un visualizador de audio utilizando HTML, CSS y JavaScript básicos

¡Cómo crear un visualizador de audio horizontal, paso a paso, desde cero, usando HTML básico, CSS y JavaScript!
¡Oye! ¡Estás viendo una versión traducida automáticamente de mi sitio web! Dado que el idioma oficial de mi sitio web es el inglés (ya que solo sé inglés), solo quería decir que, dado que el sitio web está traducido automáticamente, algunas traducciones podrían ser raras, estar rotas o incluso faltar. ¡Qué tengas un lindo día!
Tenga en cuenta que esta publicación de blog se publicó $Published, por lo que, dependiendo de cuándo la lea, algunas partes podrían estar desactualizadas hoy. Desafortunadamente, no puedo mantener estas publicaciones de blog siempre actualizadas para asegurarme de que la información siga siendo precisa.
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>
¡Acabo de lanzar un nuevo video de juegos en YouTube! ¡Siéntete libre de comprobarlo!
ENGLISHESPAÑOLPORTUGUÊSDEUTSCHFRANÇAISITALIANOРУССКОМ日本한국인中国人
Este sitio web utiliza automáticamente Google Analytics para el seguimiento de análisis web agregado que también crea cookies del navegador. Si no desea que lo rastreen, visite este sitio en modo incógnito.