Today I Will Teach You How to Create a Audio Analyser Bar Animation With Pure HTML,CSS,and JavaScript. We Will Use nothing Else Except Javascript,CSS, and HTML. Take A Look To The Final Result, Open This Linkhttp://bit.ly/myangelfurious7 (Make Sure You are On Laptop/PC and Not On Mobile) .You can customize these settings as you want. For Eg:- You Can Change The Color of bars By Changing a little Code as shown below.
Now Lets Get Started with the blog. I will Also Provide You the Codeing. Here is The Coding.
<!doctype html>
<html>
<head>
<title> Learn to Code Securely – Code Example </title>
<style>
div#mp3_player{ width:500px; height:60px; background:#000; padding:5px; margin:50px auto; }
div#mp3_player > div > audio{ width:500px; background:#000; float:left; }
div#mp3_player > canvas{ width:500px; height:30px; background:#002D3C; float:left; }
</style>
<script>
// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
audio.src = ‘track1.mp3’;
audio.controls = true;
audio.loop = true;
audio.autoplay = true;
// Establish all variables that your Analyser will use
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
// Initialize the MP3 player after the page loads all of its HTML into the window
window.addEventListener(“load”, initMp3Player, false);
function initMp3Player(){
document.getElementById(‘audio_box’).appendChild(audio);
context = new webkitAudioContext(); // AudioContext object instance
analyser = context.createAnalyser(); // AnalyserNode method
canvas = document.getElementById(‘analyser_render’);
ctx = canvas.getContext(‘2d’);
// Re-route audio playback into the processing graph of the AudioContext
source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
frameLooper();
}
// frameLooper() animates any style of graphics you wish to the audio frequency
// Looping at the default frame rate that the browser provides(approx. 60 FPS)
function frameLooper(){
window.webkitRequestAnimationFrame(frameLooper);
fbc_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc_array);
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
ctx.fillStyle = ‘#00CCFF’; // Color of the bars
bars = 100;
for (var i = 0; i < bars; i++) {
bar_x = i * 3;
bar_width = 2;
bar_height = -(fbc_array[i] / 2);
// fillRect( x, y, width, height ) // Explanation of the parameters below
ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
}
}
</script>
</head>
<body>
<div id=”mp3_player”>
<div id=”audio_box”></div>
<canvas id=”analyser_render”></canvas>
</div>
</body>
</html>
So, This Was the Code that I used On My Page bit.ly/myangelfurious7 ….. Make Sure While Testing This Code You Change the audio.src location to the source of your Audio.
EXPLANATION
We will start with a basic HTML 5 Structure. Then In the BODY section we will add one div with ID mp3_player and its 2 child. One is with div id audio_box and other is canvas where we will have the animation of audio.
Now we will add the CSS here. First we will add the style section and then under it, we will design our analyser bars. Here we give every div a height of 500 pixels and float to left; You can do it right acc. To your preference. Then we will add background colour and some other basic things. You can and i must say you should tweek these settings according to your needs.
Rest Is The Difficult Section and The Main Section Also.This is the JAVASCRIPT section.
Now we will add the Audio section and will loop it plus do it on autoplay. So that As soon as someone open the website the audio should start playing Automatically.Now here we will use the canvas section. We will Design The Audio Analyser Bars.First We Add Variables that we would use and add event listener that will load when the page will load.
You Should Also Read the Comments Which Are Added In The Code Itself To explain you how it works.
No comments:
Post a Comment