Λάβετε υπόψη ότι αυτή η ανάρτηση ιστολογίου δημοσιεύτηκε τον Οκτώβριο του 2020, επομένως, ανάλογα με το πότε την διαβάζετε, ορισμένα μέρη ενδέχεται να είναι παρωχημένα. Δυστυχώς, δεν μπορώ πάντα να διατηρώ αυτές τις αναρτήσεις πλήρως ενημερωμένες για να διασφαλίσω ότι οι πληροφορίες παραμένουν ακριβείς.
Αυτός είναι ένας οδηγός βήμα προς βήμα για το πώς να δημιουργήσετε έναν οριζόντιο οπτικοποιητή ήχου από την αρχή χρησιμοποιώντας βασικές HTML, CSS και JavaScript.
Δείτε το βίντεο
Παρακαλώ δείτε το βίντεο καθώς εξηγώ τα πράγματα πιο αναλυτικά εκεί.
Πλήρης Πηγαίος Κώδικας
Παρακάτω είναι ο πλήρης πηγαίος κώδικας για τον οριζόντιο οπτικοποιητή ήχου.
<!-- 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>
