D4mations.com

Analyser Bars Animation HTML5 Audio API JavaScript Tutorial



Lesson Code: http://www.developphp.com/video/JavaScript/Analyser-Bars-Animation-HTML-Audio-API-Tutorial
Learn to create custom animated HTML5 Audio Analyser bar graphics that move to the frequency of the sound that is playing by using aspects of the new JavaScript HTML5 Audio API. You can customize the tiny script any way you like once you grasp the concept.

Original source

d4mer

, , , , , , ,

29 responses to “Analyser Bars Animation HTML5 Audio API JavaScript Tutorial”

  1. I mentioned in the video that you have to remove "webkit" prefix in the future. The future is now. I notice a lot of you left comments having problems, and it's because nobody is listening to instructions in the video. I just deleted a lot of misleading comments of people complaining that the code doesn't work for them, listen to the instructions IN THE VIDEO instead of grabbing code and running away.

  7. In 2019 this Code has same Problems because of the new Access priorities!
    My Hot Fix is following:
    1. Of cause delete the prefix "webkit"
    window.webKitRequestAnimationFrame(frameLooper); —> window.requestAnimationFrame(frameLooper);
    context = new webKitAudioContext(); –> context = new AudioContext();
    2. You should not create the AudioContext Object not by the Loading from your Side (window.addEventListener("load", initMp3Player, false))
    For example: make a button to trigger initMp3Player/create the AudioContext, or change the "load" to "click" (You have to click anyware ONLY ONES to trigger this method. The secound click triggers an Error!)

    3. Create a shortcut from Chrome -> rightclick -> propertys or settings -> shurtcut, destinaction add " –allow-file-access-from-files –allow-file-access –allow-cross-origin-auth-prompt"
    In for example:
    "C:Program Files (x86)GoogleChromeApplicationchrome.exe" –allow-file-access-from-files –allow-file-access –allow-cross-origin-auth-prompt

  8. Thank for creating coding videos…I have applied the visualizer to my mp3player but for some reason only some uploads play.. is there a extra part of the code i can apply to have every mp3 play via audio.src="" could you look at this http://musicsplice.com/tracks/boom-bap-chill-93947-bpm-wav-download-beat-monstarrs (working) http://musicsplice.com/tracks/we-run-things-16-bit-wavs-file-download-tag-free-beat-m (not working) same code

  9. it works on Chrome but not on Safari even if i use this fix here:
    https://stackoverflow.com/questions/29373563/audiocontext-on-safari

    The problem seems to be in the "analyser" as it always returns an empty array.
    -> analyser.getByteFrequencyData(fbc_array);

    console log: 
    Uint8Array [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, …] (1024) = $5

    i suspect the reason lays somewhere here:
    source = context.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(context.destination);

    somehow the "analyser" can't get the audio-data properly.

  15. Thank you for this tutorial. I am currently using this for my project and it worked perfectly when played with an audio file. However, I am planning on using this technique a bit differently; I am planning on setting the audio source as the audio played from an embedded youtube video (within an iframe element). Is this possible? If so, do you have information on this?

  16. if it does not work for some, it's because they have to change the
    window.webkitRequestAnimationFrame (frameLooper);
    by
    window.requestAnimationFrame (frameLooper);
    and they also have to change the
    context = new webkitAudioContext ();
    by
    context = new AudioContext ();
    or what is the same they have to remove the "webkit" in the code

  20. I can't get sound or graphics bars to play or show. I took out the webkit bit since it's way past 2014. Checked the code for the video numerous times. Still no music or bars. The timer for the song starts though. Also, I am running it on a local server and I added the "Allow Control Allow Origin" plugin, mentioned in the comments. Still get the same result. Any Ideas as to why I'm still having issues?

  23. Works fine in firefox and chrome, not on opera, i supose the becouse is mp3 files not tested on edge, vivaldi. If you are interested, test yourselfs and report here
    enjoy

    <!doctype html>
    <html>
    <head>
    <style>
    div#mp3_player{ width:500px; height:70px; 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.crossOrigin = "anonymous";
    //audio.src = 'http://113fm-edge1.cdnstream.com/1734_128&#39;;
    // Uncomment above line for stream listen
    audio.src = 'mymusic.mp3';
    audio.controls = true;
    audio.loop = true;
    audio.autoplay = false;
    // Establish all variables that your Analyser will use
    var canvas, ctx, source, audioContext, 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);
    audioContext = new AudioContext(); // AudioContext object instance
    analyser = audioContext.createAnalyser(); // AnalyserNode method
    canvas = document.getElementById('analyser_render');
    ctx = canvas.getContext('2d');
    // Re-route audio playback into the processing graph of the AudioContext
    source = audioContext.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(audioContext.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(){
    requestAnimationFrame(frameLooper); // windoww.
    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>

Leave a Reply