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]
8 Comments.
  • avatar
    Guest  
    15/07/2018
    direct lender installment loans <a href="https://cashnow.cars">loan lenders</a> direct lender payday loans <a href=https://cashnow.cars>lender</a>
  • avatar
    Guest  
    15/07/2018
    payday loans direct lender <a href="https://cashnow.cars">online lenders</a> payday lender <a href=https://cashnow.cars>lender</a>
  • avatar
    Guest  
    14/07/2018
    1000 payday loans <a href="https://cashnow.cars">lender</a> lender <a href=https://cashnow.cars>installment loans bad credit online</a>
  • avatar
    Guest  
    09/07/2018
    payday loans in texas <a href="https://cashnow.cars">payday loans direct lender</a> small payday loan <a href=https://cashnow.cars>payday loan direct lender</a>
  • avatar
    Guest  
    08/07/2018
    lender <a href="https://cashnow.cars">lender</a> payday lender https://cashnow.cars - lender
Show 3 more comments.