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]
12 Comments.
  • avatar
    Guest  
    19/01/2020
    http://www.yeezy.com.co/ Yeezys
    Yeezy http://www.yeezy700.org.uk/
  • avatar
    Guest  
    15/01/2020
    http://www.nikefactory.us.com/ Nike Outlet
    Yeezy Boost 350 V2 http://www.yeezyboost350.us.com/
  • avatar
    Guest  
    14/01/2020
    http://www.yeezyboost350v2.de/ Yeezy Boost 350
    Yeezy Shoes http://www.yeezys.me.uk/
  • avatar
    Guest  
    07/01/2020
    http://www.travisscottjordan1.us.com/ Travis Scott jordan 1
    <a href="http://www.nfl-jerseys.us.org/" >NFL Jerseys</a>
  • avatar
    Guest  
    04/01/2020
    http://www.nikeshoes.us.org/ Nike Shoes
    http://www.yeezy380.us/
Show 7 more comments.