Lütfen bu blog yazısının Ekim 2020'de yayınlandığını, dolayısıyla ne zaman okuduğunuza bağlı olarak bazı bölümlerinin güncelliğini yitirebileceğini unutmayın. Maalesef, bilgilerin doğru kalmasını sağlamak için bu yazıları her zaman tam olarak güncel tutamıyorum.
Bu, temel HTML, CSS ve JavaScript kullanarak sıfırdan yatay bir ses görselleştiricisinin nasıl oluşturulacağına dair adım adım bir kılavuzdur.
Videoyu izleyin
Lütfen videoyu izleyin, orada konuyu daha detaylı anlatıyorum.
Tam Kaynak Kodu
Yatay ses görüntüleyicisinin tam kaynak kodu aşağıdadır.
<!-- 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>
