Special Agent Squeaky

Créez un visualiseur audio en utilisant HTML, CSS et JavaScript de base

Comment créer un visualiseur audio horizontal, étape par étape, à partir de zéro, en utilisant HTML, CSS et JavaScript de base !
Hey! Vous consultez une version traduite automatiquement de mon site Web ! Puisque la langue officielle de mon site web est l'anglais (puisque je ne connais que l'anglais), je voulais juste dire que, puisque le site web est traduit automatiquement, certaines traductions pourraient être bizarres, cassées ou même manquantes ! Passe une bonne journée!
Veuillez noter que cet article de blog a été publié October 2020, donc selon le moment où vous le lisez, certaines parties peuvent être obsolètes aujourd'hui. Malheureusement, je ne peux pas constamment tenir ces articles de blog à jour pour m'assurer que les informations sont toujours exactes.
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>
Je viens de publier une nouvelle vidéo de jeu sur YouTube ! N'hésitez pas à y jeter un œil!
ENGLISHESPAÑOLPORTUGUÊSDEUTSCHFRANÇAISITALIANOРУССКОМ日本한국인中国人
Ce site Web utilise automatiquement Google Analytics pour le suivi des analyses Web agrégées qui crée également des cookies de navigateur. Si vous ne souhaitez pas être suivi, veuillez visiter ce site en mode navigation privée.