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
Please Login or Register to comment.
13 Comments.
  • avatar
    Guest  
    12/06/2020
    I have to get across my love for your generosity in support of those individuals that have the need for guidance on the field. Your very own commitment to getting the message all around appears to be really powerful and has continuously permitted people much like me to reach their pursuits. This interesting publication entails so much a person like me and additionally to my mates. Regards; from everyone of us.
    lebron 16 http://www.lebron16.us
  • avatar
    Guest  
    09/06/2020
    I am commenting to let you understand what a cool discovery my cousin's girl found using your web site. She picked up a good number of details, with the inclusion of what it's like to possess an incredible coaching nature to let a number of people without difficulty learn various advanced topics. You actually exceeded our expected results. Thank you for giving those productive, trusted, edifying and also cool guidance on that topic to Tanya.
    nike air max 97 http://www.nikeairmax97.net
  • avatar
    Guest  
    06/06/2020
    I am just commenting to make you know of the wonderful discovery my child had reading through your webblog. She learned plenty of details, which included what it's like to possess an ideal coaching mood to make the others smoothly learn about a variety of specialized issues. You truly did more than people's expected results. I appreciate you for showing those powerful, trusted, explanatory not to mention unique guidance on that topic to Lizeth.
    golden goose outlet http://www.goldengoose.us.com
  • avatar
    Guest  
    05/06/2020
    I happen to be writing to make you know what a amazing discovery my cousin's child enjoyed going through your webblog. She realized numerous issues, most notably what it is like to have a marvelous helping spirit to let other people completely know precisely specified very confusing matters. You truly did more than our own desires. Thank you for producing these powerful, safe, edifying and also easy guidance on this topic to Tanya.
    <a href="http://www.kyrie6shoes.us" >nike kyrie 6</a>
  • avatar
    Guest  
    05/06/2020
    I must voice my affection for your generosity supporting men and women who have the need for help with this particular niche. Your real commitment to passing the solution up and down turned out to be exceptionally useful and have specifically empowered regular people much like me to reach their pursuits. The warm and friendly report can mean a whole lot a person like me and especially to my office colleagues. Warm regards; from all of us.
    bape hoodie http://www.bapehoodie.us
Show 8 more comments.