Observera att detta blogginlägg publicerades i oktober 2020, så beroende på när du läser det kan vissa delar vara inaktuella. Tyvärr kan jag inte alltid hålla dessa inlägg helt uppdaterade för att säkerställa att informationen förblir korrekt.
Detta är en steg-för-steg-guide om hur man skapar en horisontell ljudvisualiserare från grunden med hjälp av grundläggande HTML, CSS och JavaScript.
Titta på videon
Titta gärna på videon där jag förklarar saker och ting mer ingående.
Fullständig källkod
Nedan finns den fullständiga källkoden för den horisontella ljudvisualiseringsverktyget.
<!-- 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>
