Hosting Solutions
mobile_logo Table of Contents

Analyser Bars Animation HTML Audio API Tutorial

Learn to create custom animated HTML Audio Analyser bar graphics that move to the frequency of the sound that is playing by using aspects of the new JavaScript HTML Audio API. You can customize the tiny script any way you like once you grasp the concept. Adam is experimenting in the Google Chrome browser in the video tutorial. <!doctype html> <html> <head> <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>

JavaScript Videos

Audio Programming

Button Sound Effects Tutorial Audible Menu SystemsAudio Play Pause Mute Buttons TutorialAudio Seek and Volume Range Slider TutorialAudio Time Update Position TutorialAudio Player Skins and CSS Graphics TutorialAudio OGG Files CheckAudio Play Speed Setting playbackRate TutorialAudio Playlist Play Buttons JavaScript Programming TutorialAudio Playlist Array TutorialAudio Song Select Track Playlist TutorialAnalyser Bars Animation HTML Audio API TutorialPlay Uninterrupted Background Music On Your WebsiteHow to Create Custom Sound Effects with FruityLoops