Recently I have been doing some fiddling around with the Web Audio API for the audio player on img.baconics.com and I have to say, one can do some pretty cool things with it; one of those things being audio visualization with a little help from the Canvas API.

The HTML

The HTML is pretty straighforward, all we really need is the <audio> and <canvas> elements.
<!DOCTYPE HTML>
<html>
    <head>
        <script type="application/javascript">
            <!--
                THE JAVASCRIPT WILL GO HERE
            //-->
        </script>
    </head>
    <body>
        <audio id="media" controls >
             <source  src="audio.mp3" type="audio/mpeg" />
             Your browser does not support HTML audio.
        </audio>
        <canvas id="visualizer" width="400" height="200" />
    </body>
</html>

The JavaScript

First we need to create the audio context, connect an analyser node and get our source media. For the sake of simplicity we will just be using a... (Show More)
Last edited 10:32 PM (UTC) on 19/05/2016 by Bacon.
avatar
Posted by: Bacon
16/04/2016
[spoil] [hr]
[Close Tags]
4 Comments.
  • avatar
    Guest  
    28/09/2017
    plus/guest
  • avatar
    Guest  
    20/09/2017
    index.php?site=
  • avatar
    Guest  
    22/03/2017
    Nice demo Bacon
    • avatar
      Guest  
      18/09/2017
      Thanks so much for giving everyone remarkably splendid opportunity to read in detail from this web site. It really is so sweet and full of amusement for me personally and my office colleagues to visit your site not less than three times in a week to read the latest tips you have. And of course, I'm also at all times happy with all the brilliant principles served by you. Some 3 ideas in this post are honestly the simplest we have ever had.