• Saturday , 4 April 2020

Analyser Bars Animation HTML5 Audio API JavaScript Tutorial

Code Canyon



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

3d Ocean

Related Posts

29 Comments

  1. Adam Khoury
    July 6, 2019 at 13:40

    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.

  2. Leroy Steelword
    July 6, 2019 at 13:40

    hello) please say – how i get audio from microphone to make similar effect in real-time using source from input.
    and sorry for my English …

  3. anthony trinidad
    July 6, 2019 at 13:40

    How can I add a playlist to this project? How should I go about doing that?

  4. Adrien Théüs
    July 6, 2019 at 13:40

    Thanks a lot for the solid explanation !!

  5. Fatální Průjem
    July 6, 2019 at 13:40

    hmm analyser dont show …

  6. fahzo shah
    July 6, 2019 at 13:40

    Is there a reason i cant hear the audio file but can see the value in console??

  7. Zukahara
    July 6, 2019 at 13:40

    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. Beat Monstarrs 90's New York Type Beats
    July 6, 2019 at 13:40

    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. Absyss
    July 6, 2019 at 13:40

    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.

  10. Peter Eland
    July 6, 2019 at 13:40

    Owesome . Im a late comer but frckn owesome .

  11. Ahmadreza Azimi
    July 6, 2019 at 13:40

    You what e-pal?
    You are truly fantastic ,I love watching your videos.
    take care my friend.

  12. Aman Deep
    July 6, 2019 at 13:40

    Hey i am getting Javascipt Error : Uncaught ReferenceError: webkitAudioContext is not defined
    at initMp3Player . Please Help

  13. Frie van Peer
    July 6, 2019 at 13:40

    Used this script, tweeked it a litle and it works great even Streaming…on Opera & Chrome for now. Hope to find a way to make it compatible with more browsers.
    http://frievanpeer.nl
    or:
    https://gpeer.home.xs4all.nl/index2.html

    Thanx Adam Khoury. Enjoy the source 😉

  14. JORGE RAMOS
    July 6, 2019 at 13:40

    the audio spectrum does not appear, the style / css code is missing for the spectrum to work.

  15. Bradley Bahab
    July 6, 2019 at 13:40

    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. Daniel santiago Moyano Delgadillo
    July 6, 2019 at 13:40

    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

  17. Light1c3
    July 6, 2019 at 13:40

    Is it possible to make this Animated Analyzer Bars with audio while it's being recorded in the browser (Something that's mobile friendly)?

  18. Miguel0n
    July 6, 2019 at 13:40

    Well, thanks for the tutorials. Granted it was like 90% CSS (which was not really what I was looking for) but it gave me a great starting point; hopefully now when I deep-dive into the web audio API docs I'll at least have a better idea of how it all works.

    PS: For anyone else who was looking for less CSS and more web audio, check this out: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API

  19. NinjaPunch
    July 6, 2019 at 13:40

    copied your code from te website and ran in chrome there's audio but no animation thumbs down because you haven't responded to any of the questions on here

  20. geeno123
    July 6, 2019 at 13:40

    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?

  21. Ujwal Khopkar
    July 6, 2019 at 13:40

    How can I make many player on a single page

  22. Ujwal Khopkar
    July 6, 2019 at 13:40

    I copy pasted the code graphics are not working but player is working,Please help

  23. Rui Pinto
    July 6, 2019 at 13:40

    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>

  24. Nur Mohamad
    July 6, 2019 at 13:40

    Is it possible to run this code on android??😄😄

  25. Priyanka Bharadwaj
    July 6, 2019 at 13:40

    hi could you please help me to input time domain signals instead of frequency domain using Audio API?

  26. DaNiEl ッ
    July 6, 2019 at 13:40

    is it possible to make it in a way that it takes all kind of audio from pc ?
    and is it possible to use a circle infact that a bar?

  27. Monk Simpson
    July 6, 2019 at 13:40

    Uncaught ReferenceError: webkitAudioContext is not defined

  28. Luis Grande
    July 6, 2019 at 13:40

    Hello, I have tried your code, and it does not work in chrome, nor in another browser, I remember that a year ago, it proves and worked, what will happen?

  29. Klemen Hirci
    July 6, 2019 at 13:40

    Bars doesn't work?! http://prntscr.com/fhxqna

Leave A Comment

You must be logged in to post a comment.