Hey everyone,

So I'm new to this js visualizer thing. I tried to follow a youtube video on a tutorial for an audio visualizer (https://www.youtube.com/watch?v=IBHpSkGZtNM), however the support for issues that I'm having aren't very helpful.

What I'm basically trying to accomplish is for now, to play one song (..and later a playlist with categories to select the genre of playlist) from a song file with bars moving with the bpm (beats per minute) of the song, underneath the audio player.

I can get the song to play but not the bars to show or animate. I'd also like to add that when I take away the "webkit" part of the code located on lines 22 and 35 (for chrome browser), the song no longer works. Can anyone help me figure this issue out and give me some pointers on a concept like this so can learn from it?

I'm also doing this on my local XAMPP server. Thanks in advance for any help or advice!

Here's my basic code so far.

<!doctype html>
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; }
// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
audio.src = 'songs/songTitle.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(){
    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); 
// 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(){
    fbc_array = new Uint8Array(analyser.frequencyBinCount);
    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);
<div id="mp3_player">
  <div id="audio_box"></div>
  <canvas id="analyser_render"></canvas>

Recommended Answers

All 5 Replies

It appears that is Chrome only and 3 years ago. In a reply at your YouTube link you find:

PROBLEM: Be aware that this code in video will only work in chrome. (even in 2014!) BUT I have managed to make this work in firefox also:
You need to modify the
"context = new webkitAudioContext();" to:

I think you need to read what they changed in the replies there.


Yes, thank you for pointing that out. I did see that solution. However even when I remove the "webkit" part of the code as well as the "window.webkitRequest" (because in the console, I was given a yellow warning stating that the "window.webkitRequestAnimationFrame" was depricated and to use "requestAnimationFrame instead"), I still get no animated bars as well as now no music. However, when I keep the webkit part back in, the music plays, yet no animated bars. I do get a message that says this, "MediaElementAudioSource outputs zeroes due to CORS access restrictions for file:///C:/xampp/htdocs/examples/songs/songTitle.mp3"


Yes, I didn't remove it entirely, just edited where it said change webkit part to that code without the webkit. I still get the same result. No music and no animated.

Time to find that author. A lot has changed in browsers over the years. Find them and ask if there are other changes required. All I found so far is you jumped in, and well, not my code so I can only point out obvious omissions.

Read the rest of the replies at the link given.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.