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]
16 Comments.
  • avatar
    Guest  
    25/02/2020
    http://www.yeezy380.us/ Yeezy Boost 380
    Pandora Jewelry Official Site http://www.jewelrypandora.org/
  • avatar
    Guest  
    18/02/2020
    http://www.pandoraonline-shop.de/ Pandora
    Pandora Jewelry http://www.jewelrypandora.org/
  • avatar
    Guest  
    30/01/2020
    Alfacip http://cheapcialisir.com - Buy Cialis Compra Cialis Online Senza Ricetta <a href=http://cheapcialisir.com>Buy Cialis</a> Levitra Farmacia Acquisto
  • avatar
    Guest  
    24/01/2020
    http://www.nikeoutletstoreonlineshopping.us/ Nike Outlet Store Online Shopping
    Yeezy http://www.yeezy-shoes.in.net/
  • avatar
    Guest  
    19/01/2020
    http://www.yeezy.com.co/ Yeezys
    Yeezy http://www.yeezy700.org.uk/
Show 11 more comments.