このブログ記事は2020年10月に公開されたため、お読みいただいた時期によっては情報が古くなっている可能性があります。情報の正確性を保つため、これらの記事を常に最新の状態に保つことはできませんのでご了承ください。
これは、基本的な 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>
